@dereekb/dbx-form 13.10.7 → 13.10.9

package/fesm2022/dereekb-dbx-form.mjs

@@ -317,10 +317,10 @@ class DbxActionFormDirective {
             return of({ value: value });
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxActionFormDirective, isStandalone: true, selector: "[dbxActionForm]", inputs: { dbxActionFormDisabledOnWorking: { classPropertyName: "dbxActionFormDisabledOnWorking", publicName: "dbxActionFormDisabledOnWorking", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsValid: { classPropertyName: "dbxActionFormIsValid", publicName: "dbxActionFormIsValid", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsEqual: { classPropertyName: "dbxActionFormIsEqual", publicName: "dbxActionFormIsEqual", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormIsModified: { classPropertyName: "dbxActionFormIsModified", publicName: "dbxActionFormIsModified", isSignal: true, isRequired: false, transformFunction: null }, dbxActionFormMapValue: { classPropertyName: "dbxActionFormMapValue", publicName: "dbxActionFormMapValue", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxActionFormDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionForm]',
@@ -353,10 +353,10 @@ class DbxActionFormSafetyDirective extends DbxActionTransitionSafetyDirective {
         this.dbxActionForm.form.forceFormUpdate();
         return super._handleOnBeforeTransition(transition);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormSafetyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxActionFormSafetyDirective, isStandalone: true, selector: "[dbxActionFormSafety]", inputs: { dbxActionFormSafety: { classPropertyName: "dbxActionFormSafety", publicName: "dbxActionFormSafety", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxActionFormSafetyDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxActionFormSafety]',
@@ -458,10 +458,10 @@ class DbxFormlyContext {
             this._delegate.value.forceFormUpdate();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyContext, decorators: [{
             type: Injectable
         }] });
 
@@ -619,14 +619,14 @@ class DbxFormlyComponent {
     forceFormUpdate() {
         this._forceUpdate.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DbxFormlyComponent, isStandalone: true, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyComponent), viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], exportAs: ["formly"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DbxFormlyComponent, isStandalone: true, selector: "dbx-formly", host: { classAttribute: "dbx-formly" }, providers: provideDbxMutableForm(DbxFormlyComponent), viewQueries: [{ propertyName: "formlyForm", first: true, predicate: FormlyForm, descendants: true, isSignal: true }], exportAs: ["formly"], ngImport: i0, template: `
     <form [formGroup]="form" class="dbx-formly">
       <formly-form [form]="form" [options]="options" [fields]="fieldsSignal()" [model]="modelSignal()"></formly-form>
     </form>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.LegacyFormlyForm, selector: "formly-form" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-formly',
@@ -748,10 +748,10 @@ class DbxFormSourceDirective {
         }
         this._effectSub.setSub(subscription);
     }, ...(ngDevMode ? [{ debugName: "_setFormSourceObservableEffect" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxFormSourceDirective, isStandalone: true, selector: "[dbxFormSource]", inputs: { dbxFormSourceMode: { classPropertyName: "dbxFormSourceMode", publicName: "dbxFormSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormSource: { classPropertyName: "dbxFormSource", publicName: "dbxFormSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormSource]',
@@ -810,8 +810,8 @@ class DbxFormActionDialogComponent extends AbstractDialogDirective {
             data: config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideFormlyContext()], usesInheritance: true, ngImport: i0, template: `
     <dbx-dialog-content dbxAction [dbxActionHandler]="handleSubmitValue" class="dbx-dialog-content-with-header">
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
@@ -822,7 +822,7 @@ class DbxFormActionDialogComponent extends AbstractDialogDirective {
     </dbx-dialog-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$3.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxFormlyComponent, selector: "dbx-formly", exportAs: ["formly"] }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1095,10 +1095,10 @@ class DbxForgeGlobalDefaultConfigService {
     setDefaultValidationMessages(messages) {
         this._defaults = { ...this._defaults, defaultValidationMessages: messages ?? undefined };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeGlobalDefaultConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1409,10 +1409,10 @@ class DbxForgeFormContext {
             this._reset.complete();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContext, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1529,10 +1529,10 @@ class DbxForgeFormContextService {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormContextService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1781,14 +1781,14 @@ class DbxForgeFormComponent {
         this.formValue.set(sanitized);
         this._emitFormState();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormComponent, isStandalone: true, selector: "dbx-forge", host: { properties: { "class.dbx-forge-form-disabled": "isDisabled()" }, classAttribute: "dbx-forge" }, providers: [EventDispatcher, { provide: DbxForgeDynamicFormSignalRef, useExisting: DbxForgeFormComponent }, DbxForgeFormContextService, { provide: DbxForm, useExisting: DbxForgeFormContext }, { provide: DbxMutableForm, useExisting: DbxForgeFormContext }], viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: `
+    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": "isDisabled()" }, classAttribute: "dbx-forge" }, providers: [EventDispatcher, { provide: DbxForgeDynamicFormSignalRef, useExisting: DbxForgeFormComponent }, DbxForgeFormContextService, { provide: DbxForm, useExisting: DbxForgeFormContext }, { provide: DbxMutableForm, useExisting: DbxForgeFormContext }], viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicForm, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (configSignal()) {
       <form [dynamic-form]="configSignal()!" [(value)]="formValue" [formOptions]="formOptionsSignal()"></form>
     }
   `, isInline: true, dependencies: [{ kind: "component", type: DynamicForm, selector: "form[dynamic-form]", inputs: ["dynamic-form", "formOptions", "value"], outputs: ["valueChange", "validityChange", "dirtyChange", "submitted", "reset", "cleared", "events", "initialized", "onPageChange", "onPageNavigationStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge',
@@ -1942,8 +1942,8 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
             data: config
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeActionDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxForgeActionDialogComponent, isStandalone: true, selector: "ng-component", providers: [provideDbxForgeFormContext()], usesInheritance: true, ngImport: i0, template: `
+    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">
       <h3 class="dbx-dialog-content-header">{{ header }}</h3>
       <dbx-dialog-content-close (close)="close()"></dbx-dialog-content-close>
@@ -1954,7 +1954,7 @@ class DbxForgeActionDialogComponent extends AbstractDialogDirective {
     </dbx-dialog-content>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxDialogContentDirective, selector: "dbx-dialog-content,[dbxDialogContent],.dbx-dialog-content", inputs: ["width"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "ngmodule", type: DbxButtonModule }, { kind: "component", type: i1$3.DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: DbxDialogContentCloseComponent, selector: "dbx-dialog-content-close", inputs: ["padded"], outputs: ["close"] }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormSourceDirective, selector: "[dbxFormSource]", inputs: ["dbxFormSourceMode", "dbxFormSource"] }, { kind: "directive", type: DbxActionFormDirective, selector: "[dbxActionForm]", inputs: ["dbxActionFormDisabledOnWorking", "dbxActionFormIsValid", "dbxActionFormIsEqual", "dbxActionFormIsModified", "dbxActionFormMapValue"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeActionDialogComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -1996,10 +1996,10 @@ class DbxFormLoggerDirective {
             console.log('dbxFormLogger - stream: ', event);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormLoggerDirective, isStandalone: true, selector: "[dbxFormLogger],[dbxFormStreamLogger]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLogger],[dbxFormStreamLogger]',
@@ -2040,10 +2040,10 @@ class DbxFormLoadingSourceDirective {
             this.form.setValue(x);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoadingSourceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxFormLoadingSourceDirective, isStandalone: true, selector: "[dbxFormLoadingSource]", inputs: { dbxFormLoadingSourceMode: { classPropertyName: "dbxFormLoadingSourceMode", publicName: "dbxFormLoadingSourceMode", isSignal: true, isRequired: false, transformFunction: null }, dbxFormLoadingSource: { classPropertyName: "dbxFormLoadingSource", publicName: "dbxFormLoadingSource", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoadingSourceDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormLoadingSource]',
@@ -2086,10 +2086,10 @@ class DbxFormValueChangeDirective {
             }
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormValueChangeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormValueChangeDirective, isStandalone: true, selector: "[dbxFormValueChange]", outputs: { dbxFormValueChange: "dbxFormValueChange" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormValueChangeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormValueChange]',
@@ -2123,11 +2123,11 @@ function streamValueFromControl(fromControl, path) {
  * to access the core form features provided by the library.
  */
 class DbxFormModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: []
@@ -4252,10 +4252,10 @@ class DbxDateTimeFieldMenuPresetsService {
     set configurations(configurations) {
         this._configurations.next(configurations);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldMenuPresetsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5121,10 +5121,10 @@ class DbxDateTimeFieldComponent extends FieldType {
     clearValue() {
         this._cleared.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDateTimeFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  @if (showDateInputSignal()) {\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\">\n      <ng-container [ngTemplateOutlet]=\"dateInputTemplate\"></ng-container>\n    </div>\n  }\n  <!-- Time -->\n  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInputSignal() ? '50' : '100'\">\n      @if (showTimeInputSignal()) {\n        <ng-container [ngTemplateOutlet]=\"timeMenuAndInputTemplate\"></ng-container>\n      }\n      @if (showAddTimeSignal()) {\n        <div class=\"add-time-button-wrapper\">\n          <button mat-button class=\"mat-datepicker-button-highlight dbx-button-spacer add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n            <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\n  <!-- Date Hint -->\n  @switch (hasErrorSignal()) {\n    @case (false) {\n      @if (!hideDateHint) {\n        <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n          <div class=\"dbx-hint\">\n            @switch (hasEmptyDisplayValueSignal()) {\n              @case (true) {\n                <span class=\"dbx-small\">No date/time set</span>\n              }\n              @case (false) {\n                @switch (fullDaySignal()) {\n                  @case (true) {\n                    <small>\n                      <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n                      {{ displayValueSignal() | date: 'fullDate' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | dateDistance }})\n                    </small>\n                  }\n                  @case (false) {\n                    <small>\n                      @if (displayValueSignal()) {\n                        <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n                        {{ displayValueSignal() | date: 'medium' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | timeDistance }})\n                      }\n                    </small>\n                  }\n                }\n              }\n            }\n          </div>\n        </div>\n      }\n    }\n    @case (true) {\n      @if (currentErrorMessageSignal()) {\n        <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n      }\n    }\n  }\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [disabled]=\"disabled\" [required]=\"isDateRequired\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"datePicked($event)\" [value]=\"dateValueSignal()\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n    @if (!hideDatePicker) {\n      <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">clear</mat-icon>\n      </button>\n    }\n    @if (!showTimeInputSignal()) {\n      <span matTextSuffix>\n        <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n      </span>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <mat-menu #timemenu=\"matMenu\">\n    @if (timeMode === 'optional') {\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    }\n    @for (preset of presetsSignal(); track preset) {\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    }\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">timer</mat-icon>\n    </button>\n    <span matTextSuffix>\n      <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n    @if (timeInputCtrl.hasError('pattern')) {\n      <mat-error>The input time is not recognizable.</mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  @if (showTimezone) {\n    <span class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDateTimeFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  @if (showDateInputSignal()) {\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\">\n      <ng-container [ngTemplateOutlet]=\"dateInputTemplate\"></ng-container>\n    </div>\n  }\n  <!-- Time -->\n  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInputSignal() ? '50' : '100'\">\n      @if (showTimeInputSignal()) {\n        <ng-container [ngTemplateOutlet]=\"timeMenuAndInputTemplate\"></ng-container>\n      }\n      @if (showAddTimeSignal()) {\n        <div class=\"add-time-button-wrapper\">\n          <button mat-button class=\"mat-datepicker-button-highlight dbx-button-spacer add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n            <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\n  <!-- Date Hint -->\n  @switch (hasErrorSignal()) {\n    @case (false) {\n      @if (!hideDateHint) {\n        <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n          <div class=\"dbx-hint\">\n            @switch (hasEmptyDisplayValueSignal()) {\n              @case (true) {\n                <span class=\"dbx-small\">No date/time set</span>\n              }\n              @case (false) {\n                @switch (fullDaySignal()) {\n                  @case (true) {\n                    <small>\n                      <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n                      {{ displayValueSignal() | date: 'fullDate' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | dateDistance }})\n                    </small>\n                  }\n                  @case (false) {\n                    <small>\n                      @if (displayValueSignal()) {\n                        <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n                        {{ displayValueSignal() | date: 'medium' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | timeDistance }})\n                      }\n                    </small>\n                  }\n                }\n              }\n            }\n          </div>\n        </div>\n      }\n    }\n    @case (true) {\n      @if (currentErrorMessageSignal()) {\n        <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n      }\n    }\n  }\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [disabled]=\"disabled\" [required]=\"isDateRequired\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"datePicked($event)\" [value]=\"dateValueSignal()\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n    @if (!hideDatePicker) {\n      <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">clear</mat-icon>\n      </button>\n    }\n    @if (!showTimeInputSignal()) {\n      <span matTextSuffix>\n        <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n      </span>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <mat-menu #timemenu=\"matMenu\">\n    @if (timeMode === 'optional') {\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    }\n    @for (preset of presetsSignal(); track preset) {\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    }\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">timer</mat-icon>\n    </button>\n    <span matTextSuffix>\n      <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n    @if (timeInputCtrl.hasError('pattern')) {\n      <mat-error>The input time is not recognizable.</mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  @if (showTimezone) {\n    <span class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$4.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$4.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$4.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$4.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDateTimeFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [FlexLayoutModule, NgTemplateOutlet, MatButtonModule, MatError, MatFormFieldModule, MatDatepickerModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatMenuModule, MatFormFieldModule, GetValuePipe, DatePipe, DateDistancePipe, TimeDistancePipe, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-datetime-field\" fxLayout=\"row wrap\" fxLayout.xs=\"column wrap\" fxLayoutGap=\"6px grid\" fxLayoutAlign=\"space-evenly stretch\">\n  <!-- Date -->\n  @if (showDateInputSignal()) {\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"dateOnly ? '100' : '50'\">\n      <ng-container [ngTemplateOutlet]=\"dateInputTemplate\"></ng-container>\n    </div>\n  }\n  <!-- Time -->\n  @if (showTimeInputSignal() || showAddTimeSignal()) {\n    <!-- Only show flex if there is content to be displayed. -->\n    <div class=\"dbx-datetime-row\" fxFlex.lt-sm=\"100\" [fxFlex]=\"showDateInputSignal() ? '50' : '100'\">\n      @if (showTimeInputSignal()) {\n        <ng-container [ngTemplateOutlet]=\"timeMenuAndInputTemplate\"></ng-container>\n      }\n      @if (showAddTimeSignal()) {\n        <div class=\"add-time-button-wrapper\">\n          <button mat-button class=\"mat-datepicker-button-highlight dbx-button-spacer add-time-button\" ngClass.lt-sm=\"add-time-button-full\" (click)=\"addTime()\">\n            <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            Add Time\n          </button>\n        </div>\n      }\n    </div>\n  }\n  <!-- Date Hint -->\n  @switch (hasErrorSignal()) {\n    @case (false) {\n      @if (!hideDateHint) {\n        <div class=\"dbx-datetime-row dbx-datetime-hint-row\" fxFlex=\"100\">\n          <div class=\"dbx-hint\">\n            @switch (hasEmptyDisplayValueSignal()) {\n              @case (true) {\n                <span class=\"dbx-small\">No date/time set</span>\n              }\n              @case (false) {\n                @switch (fullDaySignal()) {\n                  @case (true) {\n                    <small>\n                      <b class=\"dbx-ok\">{{ allDayLabel }}</b>\n                      {{ displayValueSignal() | date: 'fullDate' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | dateDistance }})\n                    </small>\n                  }\n                  @case (false) {\n                    <small>\n                      @if (displayValueSignal()) {\n                        <b class=\"dbx-ok\">{{ atTimeLabel }}</b>\n                        {{ displayValueSignal() | date: 'medium' }} {{ timezoneAbbreviationSignal() }} ({{ displayValueSignal() | timeDistance }})\n                      }\n                    </small>\n                  }\n                }\n              }\n            }\n          </div>\n        </div>\n      }\n    }\n    @case (true) {\n      @if (currentErrorMessageSignal()) {\n        <mat-error>{{ currentErrorMessageSignal() }}</mat-error>\n      }\n    }\n  }\n</div>\n\n<!-- Date Input Template -->\n<ng-template #dateInputTemplate>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ dateLabel }}</mat-label>\n    <input #dateInput matInput [disabled]=\"disabled\" [required]=\"isDateRequired\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"datePicked($event)\" [value]=\"dateValueSignal()\" (keydown)=\"keydownOnDateInput($event)\" />\n    <mat-datepicker #picker></mat-datepicker>\n    @if (!hideDatePicker) {\n      <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button (click)=\"picker.open()\" [disabled]=\"disabled\" aria-label=\"Open date picker\">\n        <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n      </button>\n    }\n    @if (showClearButtonSignal()) {\n      <button matSuffix class=\"dbx-datetime-clear-button\" mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"disabled\" (click)=\"clearValue()\">\n        <mat-icon aria-hidden=\"true\">clear</mat-icon>\n      </button>\n    }\n    @if (!showTimeInputSignal()) {\n      <span matTextSuffix>\n        <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n      </span>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Time Menu/Input Template -->\n<ng-template #timeMenuAndInputTemplate>\n  <mat-menu #timemenu=\"matMenu\">\n    @if (timeMode === 'optional') {\n      <button mat-menu-item (click)=\"removeTime()\">\n        <span>Remove Time</span>\n      </button>\n      <mat-divider></mat-divider>\n    }\n    @for (preset of presetsSignal(); track preset) {\n      <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n    }\n  </mat-menu>\n  <mat-form-field class=\"dbx-datetime-row-field\">\n    <mat-label>{{ timeLabel }}</mat-label>\n    <input #timeInput [errorStateMatcher]=\"timeErrorStateMatcher\" matInput [required]=\"isTimeRequired\" [formControl]=\"timeInputCtrl\" (focus)=\"focusTime()\" (focusout)=\"focusOutTime()\" (keydown)=\"keydownOnTimeInput($event)\" />\n    <button matPrefix class=\"dbx-datetime-row-button\" mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"disabled\">\n      <mat-icon aria-hidden=\"true\">timer</mat-icon>\n    </button>\n    <span matTextSuffix>\n      <ng-container [ngTemplateOutlet]=\"timezoneSuffixTemplate\"></ng-container>\n    </span>\n    @if (timeInputCtrl.hasError('pattern')) {\n      <mat-error>The input time is not recognizable.</mat-error>\n    }\n  </mat-form-field>\n</ng-template>\n\n<!-- Timezone Suffix -->\n<ng-template #timezoneSuffixTemplate>\n  @if (showTimezone) {\n    <span class=\"dbx-datetime-timezone dbx-faint\">{{ timezoneAbbreviationSignal() }}</span>\n  }\n</ng-template>\n" }]
         }] });
@@ -6051,7 +6051,12 @@ class DbxForgeDateTimeFieldComponent {
                 return;
             const currentDateCtrl = this.dateCtrl.value;
             if (!currentDateCtrl || !isSameDateDay(currentDateCtrl, date)) {
-                this.dateCtrl.setValue(date, { emitEvent: false });
+                // Emit valueChanges (default) so currentDate$ — and therefore date$/dateValue$/_rawDateTimeDate$
+                // — see the inbound date. Without this emission, rawDateTime$.combineLatest is starved on the
+                // date side and a user-typed time edit can never propagate back to the form value.
+                // The outbound pipeline's `filter(!dbxDateTimeIsSameDateTimeFieldValue(x, currentValue))`
+                // prevents the resulting _updateTime tick from causing a feedback write.
+                this.dateCtrl.setValue(date);
             }
             // Do not overwrite time control while user is actively editing it
             if (!isTimeFocused) {
@@ -6061,10 +6066,14 @@ class DbxForgeDateTimeFieldComponent {
                 }
             }
         });
-        // Main output subscription: timeOutput$ → field value
-        this._sub.subscription = this.valueInSystemTimezone$
-            .pipe(combineLatestWith$1(this.timezoneInstance$.pipe(map$1((tz) => dbxDateTimeOutputValueFactory(this.valueMode(), tz)))), throttleTime$1(TIME_OUTPUT_THROTTLE_TIME$2, undefined, { leading: false, trailing: true }), switchMap$1(([currentValue, valueFactory]) => {
-            return this.timeOutput$.pipe(throttleTime$1(TIME_OUTPUT_THROTTLE_TIME$2 * 2, undefined, { leading: false, trailing: true }), skipAllInitialMaybe(), distinctUntilChanged$1(isSameDateHoursAndMinutes), map$1((x) => valueFactory(x)), filter$1((x) => !dbxDateTimeIsSameDateTimeFieldValue(x, currentValue)));
+        // Main output subscription: timeOutput$ → field value.
+        // The filter must compare in storage form against the raw fieldValue. Comparing against
+        // valueInSystemTimezone$ (display-shifted) is wrong: with a non-zero system↔target tz shift,
+        // a freshly picked time can have the same timestamp as the previous valueInSystemTimezone$
+        // and be incorrectly dropped (e.g. CDT system + UTC field tz: pick 12pm → pick 5pm collides).
+        this._sub.subscription = this.fieldValue$
+            .pipe(combineLatestWith$1(this.timezoneInstance$.pipe(map$1((tz) => dbxDateTimeOutputValueFactory(this.valueMode(), tz)))), throttleTime$1(TIME_OUTPUT_THROTTLE_TIME$2, undefined, { leading: false, trailing: true }), switchMap$1(([currentRawValue, valueFactory]) => {
+            return this.timeOutput$.pipe(throttleTime$1(TIME_OUTPUT_THROTTLE_TIME$2 * 2, undefined, { leading: false, trailing: true }), skipAllInitialMaybe(), distinctUntilChanged$1(isSameDateHoursAndMinutes), map$1((x) => valueFactory(x)), filter$1((x) => !dbxDateTimeIsSameDateTimeFieldValue(x, currentRawValue)));
         }))
             .subscribe((value) => {
             this._setFieldValue(value);
@@ -6272,10 +6281,10 @@ class DbxForgeDateTimeFieldComponent {
             // Silently handle if sibling field is not writable
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateTimeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeDateTimeFieldComponent, isStandalone: true, selector: "dbx-forge-datetime-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()" } }, ngImport: i0, template: "<div class=\"dbx-forge-datetime-field-wrapper\">\n  <!-- Field Label -->\n  @if (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeMode() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 (fieldLabel()) {\n    <span class=\"dbx-forge-field-label\">\n      {{ fieldLabel() }}\n      @if (isRequired()) {\n        <span class=\"dbx-forge-required-marker\">*</span>\n      }\n    </span>\n  }\n\n  <!-- Date + Time row -->\n  <div class=\"dbx-forge-datetime-field dbx-forge-datetime-inputs\">\n    <!-- Date Input -->\n    @if (showDateInputSignal()) {\n      <div class=\"dbx-forge-datetime-col\" [class.dbx-forge-datetime-col-full]=\"isDateOnly()\">\n        <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n          <mat-label>{{ dateLabel() }}</mat-label>\n          <input matInput [disabled]=\"isDisabledSignal()\" [required]=\"isDateRequired()\" [min]=\"dateInputMinSignal()\" [max]=\"dateInputMaxSignal()\" [matDatepicker]=\"picker\" [matDatepickerFilter]=\"pickerFilterSignal()\" (dateChange)=\"onDatePicked($event)\" [value]=\"dateValueSignal()\" (click)=\"onDateInputClick(picker)\" (keydown)=\"onDateKeydown($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n          @if (!hideDatePicker()) {\n            <button matPrefix mat-icon-button (click)=\"picker.open()\" [disabled]=\"isDisabledSignal()\" aria-label=\"Open date picker\">\n              <mat-icon aria-hidden=\"true\">calendar_today</mat-icon>\n            </button>\n          }\n          <mat-datepicker #picker></mat-datepicker>\n          @if (showClearButtonSignal()) {\n            <button matSuffix mat-icon-button aria-label=\"Clear date and time\" [disabled]=\"isDisabledSignal()\" (click)=\"clearValue()\">\n              <mat-icon aria-hidden=\"true\">clear</mat-icon>\n            </button>\n          }\n          @if (!showTimeInputSignal()) {\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n          }\n        </mat-form-field>\n      </div>\n    }\n\n    <!-- Time Input / Add Time Button -->\n    @if (showTimeInputSignal() || showAddTimeButtonSignal()) {\n      <div class=\"dbx-forge-datetime-col\">\n        @if (showTimeInputSignal()) {\n          <mat-menu #timemenu=\"matMenu\">\n            @if (timeMode() === 'optional') {\n              <button mat-menu-item (click)=\"removeTime()\">\n                <span>Remove Time</span>\n              </button>\n              <mat-divider></mat-divider>\n            }\n            @for (preset of presetsSignal(); track $index) {\n              <button mat-menu-item (click)=\"selectPreset(preset)\">{{ preset.label | getValue }}</button>\n            }\n          </mat-menu>\n          <mat-form-field [appearance]=\"appearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-datetime-col-field\">\n            <mat-label>{{ timeLabel() }}</mat-label>\n            <input matInput [errorStateMatcher]=\"timeErrorStateMatcher\" [required]=\"isTimeRequired()\" [formControl]=\"timeCtrl\" (focus)=\"onTimeFocus()\" (focusout)=\"onTimeBlur()\" (keydown)=\"onTimeKeydown($event)\" />\n            <button matPrefix mat-icon-button [matMenuTriggerFor]=\"timemenu\" aria-label=\"Open time presets\" [disabled]=\"isTimeMenuDisabledSignal()\">\n              <mat-icon aria-hidden=\"true\">timer</mat-icon>\n            </button>\n            <span matTextSuffix>\n              <ng-container [ngTemplateOutlet]=\"tzSuffix\"></ng-container>\n            </span>\n            @if (timeCtrl.hasError('pattern')) {\n              <mat-error>The input time is not recognizable.</mat-error>\n            }\n          </mat-form-field>\n        }\n        @if (showAddTimeButtonSignal()) {\n          <div class=\"dbx-forge-add-time-wrapper\">\n            <button mat-button (click)=\"addTime()\">\n              <mat-icon>timer</mat-icon>\n              Add Time\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Date Hint / Error -->\n  @if (hasErrorSignal()) {\n    @if (currentErrorMessageSignal()) {\n      <mat-error class=\"dbx-forge-datetime-error\" [id]=\"errorId()\">{{ currentErrorMessageSignal() }}</mat-error>\n    }\n  } @else if (!hideDateHint()) {\n    <div class=\"dbx-forge-datetime-hint\" [id]=\"hintId()\">\n      @if (!hasValueSignal()) {\n        <span class=\"dbx-small dbx-hint\">No date/time set</span>\n      } @else if (displayValueSignal(); as dv) {\n        @if (fullDaySignal()) {\n          <small>\n            <b class=\"dbx-ok\">{{ allDayLabel() }}</b>\n            {{ dv | date: 'fullDate' }} {{ tzAbbreviationSignal() }} ({{ dv | dateDistance }})\n          </small>\n        } @else {\n          <small>\n            <b class=\"dbx-ok\">{{ atTimeLabel() }}</b>\n            {{ dv | date: 'medium' }} {{ tzAbbreviationSignal() }} ({{ dv | timeDistance }})\n          </small>\n        }\n      }\n    </div>\n  }\n\n  <!-- Description -->\n  @if (description()) {\n    <p class=\"dbx-hint dbx-forge-datetime-desc\">{{ description() }}</p>\n  }\n</div>\n\n<!-- Timezone Suffix Template -->\n<ng-template #tzSuffix>\n  @if (showTimezone()) {\n    <span class=\"dbx-forge-datetime-timezone dbx-faint\">{{ tzAbbreviationSignal() }}</span>\n  }\n</ng-template>\n", styles: [".dbx-forge-datetime-field-wrapper{width:100%}.dbx-forge-datetime-inputs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;width:100%}.dbx-forge-datetime-col{flex:1 1 0%;min-width:180px}.dbx-forge-datetime-col-full{flex:1 1 100%}.dbx-forge-datetime-col-field{width:100%}.dbx-forge-field-label{font-weight:500}.dbx-forge-required-marker{color:var(--mat-sys-error, red)}.dbx-forge-datetime-desc{font-size:12px;margin-top:0}.dbx-forge-add-time-wrapper{display:flex;align-items:center;min-height:56px}.dbx-forge-datetime-timezone{padding:0 6px;pointer-events:none}.dbx-forge-datetime-hint,.dbx-forge-datetime-error{padding:0 2px}@media(max-width:599px){.dbx-forge-datetime-inputs{flex-direction:column;align-items:stretch}.dbx-forge-datetime-col{flex:1 1 auto;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i9.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i9.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i9.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DateDistancePipe, name: "dateDistance" }, { kind: "pipe", type: TimeDistancePipe, name: "timeDistance" }, { kind: "pipe", type: GetValuePipe, name: "getValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateTimeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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: {
                         '[class]': 'className()'
@@ -6469,10 +6478,10 @@ class DbxForgeDateRangeFieldComponent {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-daterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-daterange-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule, MatIconModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dbx-forge-daterange-field\">\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start\">\n    <mat-label>{{ startLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"startPicker\" [formControl]=\"startDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #startPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-start-time\">\n      <mat-label>Start Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"startTimeCtrl\" />\n    </mat-form-field>\n  }\n  <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end\">\n    <mat-label>{{ endLabelSignal() }}</mat-label>\n    <input matInput [matDatepicker]=\"endPicker\" [formControl]=\"endDateCtrl\" [min]=\"minDateSignal()\" [max]=\"maxDateSignal()\" />\n    <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n    <mat-datepicker #endPicker></mat-datepicker>\n  </mat-form-field>\n  @if (showTimeSignal()) {\n    <mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-daterange-end-time\">\n      <mat-label>End Time</mat-label>\n      <input matInput type=\"time\" [formControl]=\"endTimeCtrl\" />\n    </mat-form-field>\n  }\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</div>\n", styles: [".dbx-forge-daterange-field{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}.dbx-forge-daterange-start,.dbx-forge-daterange-end{flex:1 1 auto;min-width:140px}.dbx-forge-daterange-start-time,.dbx-forge-daterange-end-time{flex:0 1 auto;min-width:100px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -6994,15 +7003,15 @@ class DbxForgeFixedDateRangeFieldComponent {
             // Field may not be ready
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFixedDateRangeFieldComponent, isStandalone: true, selector: "dbx-forge-fixeddaterange-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    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: [
             {
                 provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                 useClass: forwardRef(() => DbxForgeFixedDateRangeFieldSelectionStrategy)
             }
         ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelectionSignal()\" [dateFilter]=\"pickerFilterSignal()\" [minDate]=\"minDateSignal()\" [maxDate]=\"maxDateSignal()\" (selectedChange)=\"selectedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInput()) {\n      <mat-date-range-input [formGroup]=\"inputRangeForm\">\n        <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input #endDateInput [ngClass]=\"endDisabledSignal() ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"endDisabledSignal() ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n    }\n  </mat-form-field>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint }}</mat-hint>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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: [
                         {
@@ -7060,10 +7069,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.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 // MARK: Mapper
@@ -7380,10 +7389,10 @@ class DbxDurationPickerPopoverComponent extends AbstractPopoverDirective {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDurationPickerPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDurationPickerPopoverComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDurationPickerPopoverComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatIconModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-duration-picker\">\n  @for (unit of units; track unit) {\n    <div class=\"dbx-duration-picker-column\">\n      <span class=\"dbx-duration-picker-label\">{{ unitLabel(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('increment', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canIncrement(unit)\" aria-label=\"Increase\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <span class=\"dbx-duration-picker-value\">{{ getValue(unit) }}</span>\n      <button mat-icon-button type=\"button\" (mousedown)=\"onHoldStart('decrement', unit, $event)\" (mouseup)=\"stopHold()\" (mouseleave)=\"stopHold()\" (keydown.arrowup)=\"onHoldStart('increment', unit, $event)\" (keydown.arrowdown)=\"onHoldStart('decrement', unit, $event)\" (keyup)=\"onKeyUp($event)\" [disabled]=\"!canDecrement(unit)\" aria-label=\"Decrease\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -7615,10 +7624,10 @@ class DbxForgeTimeDurationFieldComponent {
         }
         return result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeTimeDurationFieldComponent, isStandalone: true, selector: "dbx-forge-timeduration-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTimeDurationFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-timeduration-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, FormsModule, ReactiveFormsModule, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\" class=\"dbx-forge-timeduration-field\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" placeholder=\"e.g. 2h30m\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  <button mat-icon-button matSuffix type=\"button\" #pickerButton (click)=\"openPicker()\" [disabled]=\"isDisabled()\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }], pickerButtonElement: [{ type: i0.ViewChild, args: ['pickerButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
@@ -7996,10 +8005,10 @@ class DbxForgePhoneFieldComponent {
         }
         this._syncing = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePhoneFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePhoneFieldComponent, isStandalone: true, selector: "dbx-forge-phone-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-phone-field', standalone: true, imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, NgxMatInputTelComponent, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field [appearance]=\"effectiveAppearance()\" subscriptSizing=\"dynamic\">\n  @if (label()) {\n    <mat-label>{{ label() | dynamicText | async }}</mat-label>\n  }\n  <div class=\"dbx-form-phone-field\">\n    <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [formControl]=\"phoneCtrl\" [autocomplete]=\"effectiveAutocomplete()\" [enableSearch]=\"enableSearch()\" [preferredCountries]=\"preferredCountries()\" [onlyCountries]=\"onlyCountries()\" [enablePlaceholder]=\"false\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-mat-input-tel>\n    @if (allowExtension()) {\n      <div class=\"dbx-form-phone-field-extension-content\">\n        <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n        <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n      </div>\n    }\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", styles: [":host{display:block;width:100%}:host mat-form-field{width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -8124,10 +8133,10 @@ class DbxForgeValueSelectionFieldComponent {
     constructor() {
         setupMetaTracking(this.elementRef, this.meta, { selector: 'mat-select' });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeValueSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-value-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [multiple]=\"multipleSignal()\" [compareWith]=\"compareWithSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @for (option of resolvedOptionsSignal(); track $index) {\n      <mat-option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">{{ option.label }}</mat-option>\n    }\n  </mat-select>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [placeholder]=\"(placeholder() | dynamicText | async) ?? ''\" [multiple]=\"multipleSignal()\" [compareWith]=\"compareWithSignal()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @for (option of resolvedOptionsSignal(); track $index) {\n      <mat-option [value]=\"option.value\" [disabled]=\"option.disabled ?? false\">{{ option.label }}</mat-option>\n    }\n  </mat-select>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (props()?.hint; as hint) {\n    <mat-hint [id]=\"hintId()\">{{ hint | dynamicText | async }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeValueSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-value-selection-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatHint, FormField, MatError, DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[id]': '`${key()}`',
@@ -8205,14 +8214,14 @@ class DbxSearchableFieldAutocompleteItemComponent {
         return config;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
     anchorSignal = computed(() => this.displayValue().anchor, ...(ngDevMode ? [{ debugName: "anchorSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxSearchableFieldAutocompleteItemComponent, isStandalone: true, selector: "dbx-searchable-field-autocomplete-item", inputs: { displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    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: `
     <dbx-anchor [block]="true" [anchor]="anchorSignal()">
       <dbx-injection [config]="configSignal()"></dbx-injection>
     </dbx-anchor>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableFieldAutocompleteItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-searchable-field-autocomplete-item',
@@ -8235,10 +8244,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  */
 class AbstractDbxSearchableFieldDisplayDirective {
     displayValue = inject(DBX_SEARCHABLE_FIELD_COMPONENT_DATA_TOKEN);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractDbxSearchableFieldDisplayDirective, isStandalone: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxSearchableFieldDisplayDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -8248,8 +8257,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  */
 class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFieldDisplayDirective {
     icon = this.displayValue.icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDefaultSearchableFieldDisplayComponent, isStandalone: true, selector: "dbx-default-searchable-field-display", usesInheritance: true, ngImport: i0, template: `
+    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: `
     <div class="dbx-default-searchable-field-display dbx-flex-bar">
       @if (icon) {
         <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
@@ -8261,7 +8270,7 @@ class DbxDefaultSearchableFieldDisplayComponent extends AbstractDbxSearchableFie
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDefaultSearchableFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-default-searchable-field-display',
@@ -8404,10 +8413,10 @@ class AbstractForgeSearchableFieldDirective {
             return obs;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeSearchableFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgeSearchableFieldDirective, isStandalone: true, inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeSearchableFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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 }] }] } });
 
@@ -8608,10 +8617,10 @@ class DbxForgeSearchableTextFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableTextFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-text-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textInputRef", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n  @if (showSelectedDisplayValueSignal()) {\n    @let sv = selectedDisplayValueSignal();\n    @if (sv) {\n      <div class=\"dbx-searchable-text-field-value\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n      </div>\n    }\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabelSignal()) {\n      <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\" [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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\" [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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-searchable-text-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatOptionModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" tabindex=\"0\" (click)=\"focusInput()\" (keydown.enter)=\"focusInput()\" [class.dbx-searchable-text-field-has-value]=\"hasValueSignal()\" [class.dbx-searchable-text-field-show-value]=\"showSelectedDisplayValueSignal()\">\n  @if (showSelectedDisplayValueSignal()) {\n    @let sv = selectedDisplayValueSignal();\n    @if (sv) {\n      <div class=\"dbx-searchable-text-field-value\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"sv\"></dbx-searchable-field-autocomplete-item>\n      </div>\n    }\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabelSignal()) {\n      <div class=\"dbx-label\">{{ searchLabelSignal() }}</div>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [placeholder]=\"searchInputPlaceholder()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </div>\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @if (showClearValueSignal() && hasValueSignal()) {\n    <mat-option [value]=\"{ _clear: true }\">Clear</mat-option>\n  }\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\" [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 }] }] } });
@@ -8795,10 +8804,10 @@ class DbxForgeSearchableChipFieldComponent extends AbstractForgeSearchableFieldD
             fieldState.value.set(newValue);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSearchableChipFieldComponent, isStandalone: true, selector: "dbx-forge-searchable-chip-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSearchableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-searchable-chip-field', imports: [FormsModule, ReactiveFormsModule, MatAutocompleteModule, MatChipsModule, MatOptionModule, MatIconModule, DbxLoadingModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-field dbx-searchable-chip-field\">\n  <mat-chip-grid #chipGrid>\n    @for (dv of displayValuesSignal(); track $index) {\n      <mat-chip-row (removed)=\"removeWithDisplayValue(dv)\">\n        <dbx-searchable-field-autocomplete-item [displayValue]=\"dv\"></dbx-searchable-field-autocomplete-item>\n        <button matChipRemove>\n          <mat-icon>cancel</mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n    <input #textInput class=\"dbx-forge-bare-input\" [class.dbx-warn]=\"inputErrorMessage\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" [placeholder]=\"searchInputPlaceholder()\" (blur)=\"onBlur()\" (keydown)=\"tabPressedOnInput($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\" />\n  </mat-chip-grid>\n  @if (inputCtrl.value && inputCtrl.touched && inputErrorMessage) {\n    <div class=\"dbx-small mat-mdc-form-field-error mat-mdc-form-field-bottom-align\">{{ inputErrorMessage }}</div>\n  }\n</div>\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selectedChip($event)\">\n  @for (result of searchResultsSignal(); track $index) {\n    <mat-option [value]=\"result\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"result\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }] } });
@@ -9044,10 +9053,10 @@ class AbstractForgePickableItemFieldDirective {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgePickableItemFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgePickableItemFieldDirective, isStandalone: true, inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgePickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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 }] }] } });
 
@@ -9136,10 +9145,10 @@ class DbxForgePickableChipFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableChipFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePickableChipFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-chip-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-chips\">\n    <mat-chip-listbox [multiple]=\"multiSelectSignal()\" [selectable]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          @if (item.itemValue.sublabel) {\n            <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n          }\n        </mat-chip-option>\n      }\n    </mat-chip-listbox>\n    <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          @if (item.itemValue.sublabel) {\n            <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n          }\n        </mat-chip-option>\n      }\n    </mat-chip-listbox>\n    <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-pickable-chip-field', imports: [ReactiveFormsModule, MatChipsModule, MatIconModule, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-chips\">\n    <mat-chip-listbox [multiple]=\"multiSelectSignal()\" [selectable]=\"!isDisabledOrReadonly()\" [disabled]=\"isDisabledOrReadonly()\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n        <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n          <span class=\"dbx-chip-label\">All</span>\n        </mat-chip-option>\n      }\n      @for (item of itemsSignal(); track item.key) {\n        <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n          @if (item.itemValue.sublabel) {\n            <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n          }\n        </mat-chip-option>\n      }\n    </mat-chip-listbox>\n    <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  </div>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -9176,10 +9185,10 @@ class DbxForgePickableListFieldComponent extends AbstractForgePickableItemFieldD
             this._setValues(allValues);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgePickableListFieldComponent, isStandalone: true, selector: "dbx-forge-pickable-list-field", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field dbx-pickable-item-field-list\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">({{ item.itemValue.sublabel }})</span>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">({{ item.itemValue.sublabel }})</span>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i2$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i2$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgePickableListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgePickableListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-pickable-list-field', imports: [ReactiveFormsModule, MatListModule, MatIconModule, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field dbx-pickable-item-field-list\">\n  @if (showTextFilterSignal()) {\n    <div class=\"dbx-pickable-item-field-filter\">\n      @if (filterLabelSignal()) {\n        <div class=\"dbx-label\">{{ filterLabelSignal() }}</div>\n      }\n      <input class=\"dbx-forge-bare-input\" [placeholder]=\"'Filter'\" [formControl]=\"inputCtrl\" />\n      <mat-divider></mat-divider>\n    </div>\n  }\n  @if (showSelectAllButtonSignal() && multiSelectSignal() && !isDisabledOrReadonly()) {\n    <div class=\"dbx-pickable-item-field-select-all\">\n      <button class=\"dbx-pickable-select-all-button\" type=\"button\" (click)=\"toggleAll()\">{{ allSelectedSignal() ? 'Deselect All' : 'Select All' }}</button>\n      <mat-divider></mat-divider>\n    </div>\n  }\n  <div class=\"dbx-pickable-item-field-list-content\">\n    <mat-selection-list [multiple]=\"multiSelectSignal()\" [disabled]=\"isDisabledOrReadonly()\" (selectionChange)=\"onSelectionChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n      @for (item of itemsSignal(); track item.key) {\n        <mat-list-option class=\"dbx-list-view-item\" [value]=\"item.itemValue.value\" [selected]=\"item.selected\" [disabled]=\"readonlySignal() || item.disabled\">\n          @if (item.itemValue.icon) {\n            <mat-icon matListItemIcon>{{ item.itemValue.icon }}</mat-icon>\n          }\n          <div class=\"dbx-default-pickable-item-field-list-item dbx-flex-bar\">\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">({{ item.itemValue.sublabel }})</span>\n            }\n          </div>\n        </mat-list-option>\n      }\n    </mat-selection-list>\n  </div>\n  <dbx-injection [config]=\"footerConfigSignal()\"></dbx-injection>\n  @if (noItemsAvailableSignal()) {\n    <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n  }\n</div>\n" }]
         }], ctorParameters: () => [] });
@@ -9560,10 +9569,10 @@ class DbxForgeSourceSelectFieldComponent {
             return of(hasDisplay.map((x) => x[3]));
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintId()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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]=\"effectiveAppearance()\" [subscriptSizing]=\"effectiveSubscriptSizing()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-required]=\"ariaRequired()\" [attr.aria-describedby]=\"ariaDescribedBy()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplay()[0]; as error) {\n    <mat-error [id]=\"errorId()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintId()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-source-select-field', imports: [MatFormField, MatLabel, MatSelect, MatOption, MatOptgroup, MatHint, MatError, MatSuffix, FormField, DynamicTextPipe, AsyncPipe, DbxButtonComponent, DbxActionModule, DbxLoadingComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[id]': '`${key()}`',
@@ -9740,10 +9749,10 @@ class DbxForgeListSelectionFieldComponent {
             fieldState.value.set(values);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeListSelectionFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxForgeListSelectionFieldComponent, isStandalone: true, selector: "dbx-forge-list-selection-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeListSelectionFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeListSelectionFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-list-selection-field', imports: [DbxListModifierModule, DbxInjectionComponent, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-forge-list-item-field\" [class.dbx-forge-list-field-disabled]=\"isDisabled()\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\" [attr.aria-invalid]=\"ariaInvalid()\">\n  <div class=\"dbx-forge-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -9813,12 +9822,12 @@ class DbxForgeComponentFieldComponent {
     configSignal = computed(() => {
         return this.props()?.componentField;
     }, ...(ngDevMode ? [{ debugName: "configSignal" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeComponentFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.10", type: DbxForgeComponentFieldComponent, isStandalone: true, selector: "dbx-forge-component-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "className()", "class.dbx-forge-disabled": "showDisabledState()" } }, ngImport: i0, template: `
+    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": "showDisabledState()" } }, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="configSignal()"></div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-component-field',
@@ -9986,10 +9995,10 @@ class DbxForgeTextEditorFieldComponent {
             node.value.set(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeTextEditorFieldComponent, isStandalone: true, selector: "dbx-forge-texteditor-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n  @if (labelSignal()) {\n    <span class=\"dbx-label\">{{ labelSignal() }}</span>\n  }\n  <div class=\"dbx-texteditor-field-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-texteditor-field', imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n  @if (labelSignal()) {\n    <span class=\"dbx-label\">{{ labelSignal() }}</span>\n  }\n  <div class=\"dbx-texteditor-field-input\">\n    <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalid()\" [attr.aria-describedby]=\"ariaDescribedBy()\"></ngx-editor>\n  </div>\n  <div class=\"dbx-texteditor-field-menu\">\n    <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n  </div>\n  @if (errorsToDisplay()[0]; as error) {\n    <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorId()\">{{ error.message }}</div>\n  } @else if (descriptionSignal()) {\n    <div class=\"dbx-form-description\" [id]=\"hintId()\">{{ descriptionSignal() }}</div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
@@ -10268,10 +10277,10 @@ class DbxForgeArrayFieldWrapperComponent {
         const boundedTo = Math.max(0, Math.min(toIndex, items.length));
         this.dispatcher.dispatch(arrayEvent(key).insertAt(boundedTo, templateWithValues));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeArrayFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array\">\n  @if (labelSignal(); as labelText) {\n    <div class=\"dbx-form-repeat-array-header\">\n      <h4 class=\"dbx-form-repeat-array-title\">{{ labelText | dynamicText | async }}</h4>\n    </div>\n  }\n  @if (hintSignal(); as hintText) {\n    <p class=\"dbx-form-repeat-array-hint\">{{ hintText | dynamicText | async }}</p>\n  }\n  <div class=\"dbx-form-repeat-array-content\" cdkDropList [cdkDropListDisabled]=\"disableRearrangeSignal()\" (cdkDropListDropped)=\"drop($event)\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n  @if (allowAddSignal()) {\n    <div class=\"dbx-form-repeat-array-footer\">\n      <dbx-button [text]=\"addTextSignal()\" [buttonStyle]=\"addButtonStyleSignal()\" [disabled]=\"addButtonDisabledSignal()\" (buttonClick)=\"addItem()\"></dbx-button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-array-field-wrapper', imports: [DynamicTextPipe, AsyncPipe, CdkDropList, DbxButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array\">\n  @if (labelSignal(); as labelText) {\n    <div class=\"dbx-form-repeat-array-header\">\n      <h4 class=\"dbx-form-repeat-array-title\">{{ labelText | dynamicText | async }}</h4>\n    </div>\n  }\n  @if (hintSignal(); as hintText) {\n    <p class=\"dbx-form-repeat-array-hint\">{{ hintText | dynamicText | async }}</p>\n  }\n  <div class=\"dbx-form-repeat-array-content\" cdkDropList [cdkDropListDisabled]=\"disableRearrangeSignal()\" (cdkDropListDropped)=\"drop($event)\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n  @if (allowAddSignal()) {\n    <div class=\"dbx-form-repeat-array-footer\">\n      <dbx-button [text]=\"addTextSignal()\" [buttonStyle]=\"addButtonStyleSignal()\" [disabled]=\"addButtonDisabledSignal()\" (buttonClick)=\"addItem()\"></dbx-button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
@@ -10412,10 +10421,10 @@ class DbxForgeArrayFieldElementWrapperComponent {
             this.parent.duplicateItem(this.arrayContext.index(), targetIndex);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeArrayFieldElementWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-element-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n  <ng-template cdkDragPlaceholder>\n    <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n  </ng-template>\n  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-array-field-element-wrapper', imports: [CdkDrag, CdkDragHandle, CdkDragPlaceholder, DbxChipDirective, MatIconModule, MatButtonModule, DbxButtonComponent, DbxButtonSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n  <ng-template cdkDragPlaceholder>\n    <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n  </ng-template>\n  <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n    @if (!disableRearrangeSignal()) {\n      <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n        <mat-icon>drag_handle</mat-icon>\n      </button>\n      <dbx-button-spacer></dbx-button-spacer>\n    }\n    @if (showIndexChipSignal()) {\n      <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n    }\n    <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n    <span class=\"spacer\"></span>\n    @if (allowDuplicateSignal()) {\n      <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n    }\n    @if (allowRemoveSignal()) {\n      <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n    }\n  </div>\n  <div class=\"dbx-form-repeat-array-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n" }]
         }], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
@@ -10494,10 +10503,10 @@ class DbxForgeFormFieldWrapperComponent {
     labelId = computed(() => `${this.keySignal()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
     errorId = computed(() => `${this.keySignal()}-error`, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
     hintId = computed(() => `${this.keySignal()}-hint`, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeFormFieldWrapperComponent, isStandalone: true, selector: "dbx-forge-form-field-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classNameSignal()" }, classAttribute: "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]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n  <div class=\"dbx-forge-form-field-outline\">\n    <div class=\"dbx-forge-form-field-outline-leading\"></div>\n    <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n      @if (label(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequired()) {\n            <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n  </div>\n  <div class=\"dbx-forge-form-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n  @if (showErrors()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n    </div>\n  } @else if (hintSignal(); as hint) {\n    <div class=\"mat-mdc-form-field-hint-wrapper\">\n      <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.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]=\"isDisabled()\" role=\"group\" [attr.aria-labelledby]=\"label() ? labelId() : null\">\n  <div class=\"dbx-forge-form-field-outline\">\n    <div class=\"dbx-forge-form-field-outline-leading\"></div>\n    <div class=\"dbx-forge-form-field-outline-notch\" [class.dbx-forge-form-field-outline-notch-empty]=\"!label()\">\n      @if (label(); as labelText) {\n        <span class=\"dbx-forge-form-field-outline-label\" [id]=\"labelId()\">\n          {{ labelText | dynamicText | async }}\n          @if (isRequired()) {\n            <span aria-hidden=\"true\" class=\"mat-mdc-form-field-required-marker mdc-floating-label--required\"></span>\n          }\n        </span>\n      }\n    </div>\n    <div class=\"dbx-forge-form-field-outline-trailing\"></div>\n  </div>\n  <div class=\"dbx-forge-form-field-content\">\n    <ng-container #fieldComponent></ng-container>\n  </div>\n</div>\n<div class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align mat-mdc-form-field-subscript-dynamic-size\">\n  @if (showErrors()) {\n    <div class=\"mat-mdc-form-field-error-wrapper\">\n      <div class=\"mat-mdc-form-field-error mat-mdc-form-field-bottom-align\" [id]=\"errorId()\">{{ firstErrorMessage() }}</div>\n    </div>\n  } @else if (hintSignal(); as hint) {\n    <div class=\"mat-mdc-form-field-hint-wrapper\">\n      <div class=\"mat-mdc-form-field-hint mat-mdc-form-field-bottom-align\" [id]=\"hintId()\">{{ hint }}</div>\n    </div>\n  }\n</div>\n", styles: [".dbx-forge-form-field-wrapper{position:relative;margin-top:8px}.dbx-forge-form-field-outline{display:flex;position:absolute;inset:0;pointer-events:none}.dbx-forge-form-field-outline-leading{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-right:none;border-radius:var(--mdc-outlined-text-field-container-shape, 8px) 0 0 var(--mdc-outlined-text-field-container-shape, 8px);width:12px}.dbx-forge-form-field-outline-notch{border-bottom:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));display:flex;align-items:flex-start;max-width:calc(100% - 24px)}.dbx-forge-form-field-outline-notch-empty{border-top:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));width:0;padding:0}.dbx-forge-form-field-outline-label{display:inline-block;transform:translateY(-50%);pointer-events:auto;padding:0 4px;background:var(--mat-sys-surface, white);white-space:nowrap;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--mat-form-field-outlined-label-text-populated-font, var(--mat-sys-body-small-font));font-size:var(--mat-form-field-outlined-label-text-populated-size, var(--mat-sys-body-small-size));line-height:var(--mat-form-field-outlined-label-text-populated-line-height, var(--mat-sys-body-small-line-height));letter-spacing:var(--mat-form-field-outlined-label-text-populated-tracking, var(--mat-sys-body-small-tracking));font-weight:var(--mat-form-field-outlined-label-text-populated-weight, var(--mat-sys-body-small-weight));color:var(--mdc-outlined-text-field-label-text-color, var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .6)))}.dbx-forge-form-field-outline-trailing{border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline, rgba(0, 0, 0, .38)));border-left:none;border-radius:0 var(--mdc-outlined-text-field-container-shape, 8px) var(--mdc-outlined-text-field-container-shape, 8px) 0;flex-grow:1}.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-hover-outline-color, var(--mat-sys-on-surface, rgba(0, 0, 0, .87)))}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-focus-outline-color, var(--mat-sys-primary));border-width:2px}.dbx-forge-form-field-wrapper:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-focus-label-text-color, var(--mat-sys-primary));padding:0 3px}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-error-outline-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-wrapper-error .dbx-forge-form-field-outline-label,.dbx-forge-form-field-wrapper-error:focus-within .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-error-label-text-color, var(--mat-sys-error, #f44336))}.dbx-forge-form-field-content{position:relative;padding:var(--mat-form-field-container-vertical-padding, 16px) 16px 8px;min-height:56px;box-sizing:border-box}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-content{opacity:.38;pointer-events:none}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-trailing,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-leading,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-notch,.dbx-forge-form-field-wrapper-disabled:hover .dbx-forge-form-field-outline-trailing{border-color:var(--mdc-outlined-text-field-disabled-outline-color, rgba(0, 0, 0, .12))}.dbx-forge-form-field-wrapper-disabled .dbx-forge-form-field-outline-label{color:var(--mdc-outlined-text-field-disabled-label-text-color, rgba(0, 0, 0, .38))}\n"], dependencies: [{ kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-forge-form-field-wrapper', imports: [DynamicTextPipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         // `mat-form-field-animations-enabled` is intentionally retained: it gates
@@ -10642,8 +10651,8 @@ class DbxForgeWorkingWrapperComponent {
     showLoading = computed(() => {
         return this.fieldSignalContext.form().pending();
     }, ...(ngDevMode ? [{ debugName: "showLoading" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeWorkingWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxForgeWorkingWrapperComponent, isStandalone: true, selector: "dbx-forge-working-wrapper", viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    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: `
     <div class="dbx-forge-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       @if (showLoading()) {
@@ -10652,7 +10661,7 @@ class DbxForgeWorkingWrapperComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$a.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-working-wrapper',
@@ -10693,11 +10702,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.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [DbxForgeFormComponent], exports: [DbxForgeFormComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, imports: [dbxForgeFormComponentImports] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeFormComponentImportsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dbxForgeFormComponentImports,
@@ -10735,10 +10744,10 @@ class AbstractForgeFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractForgeFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
@@ -10748,10 +10757,10 @@ class AbstractSyncForgeFormDirective extends AbstractForgeFormDirective {
     ngOnInit() {
         this.context.config = this.formConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractSyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractSyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -10765,10 +10774,10 @@ class AbstractAsyncForgeFormDirective extends AbstractForgeFormDirective {
             this.context.config = formConfig;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractAsyncForgeFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractAsyncForgeFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -10784,10 +10793,10 @@ class AbstractConfigAsyncForgeFormDirective extends AbstractAsyncForgeFormDirect
      */
     config = model(...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
     currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractConfigAsyncForgeFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { config: "configChange" }, usesInheritance: true, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractConfigAsyncForgeFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }, { type: i0.Output, args: ["configChange"] }] } });
 
@@ -10798,10 +10807,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
  */
 class DbxForgeAsyncConfigFormComponent extends AbstractConfigAsyncForgeFormDirective {
     formConfig$ = this.currentConfig$;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxForgeAsyncConfigFormComponent, isStandalone: true, selector: "dbx-forge-form", providers: provideDbxForgeFormContext(), usesInheritance: true, ngImport: i0, template: "<dbx-forge></dbx-forge>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeAsyncConfigFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-forge-form',
@@ -10893,12 +10902,12 @@ const DBX_FORGE_FIELD_TYPES = [
     // -- Wrapper-related fields --
     {
         name: FORGE_EXPAND_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-C-U67kCE.mjs').then((m) => m.DbxForgeExpandFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-expand.field.component-xIW9lckC.mjs').then((m) => m.DbxForgeExpandFieldComponent),
         mapper: valueFieldMapper
     },
     {
         name: FORGE_INFO_BUTTON_FIELD_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.field.component-CfUse-zd.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
+        loadComponent: () => import('./dereekb-dbx-form-info.field.component-CBAXCDdO.mjs').then((m) => m.DbxForgeInfoButtonFieldComponent),
         mapper: valueFieldMapper
     }
 ];
@@ -10912,15 +10921,15 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_SECTION_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-6BCFOu3o.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-section.wrapper.component-Dy5kBYDD.mjs').then((m) => m.DbxForgeSectionWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_STYLE_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-BJs4BnH0.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-style.wrapper.component-C4dVNND_.mjs').then((m) => m.DbxForgeStyleWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_INFO_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-BdtiodXl.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-info.wrapper.component-DR63j8z2.mjs').then((m) => m.DbxForgeInfoWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_WORKING_WRAPPER_TYPE_NAME,
@@ -10928,7 +10937,7 @@ const DBX_FORGE_FIELD_WRAPPER_TYPES = [
     },
     {
         wrapperName: DBX_FORGE_FLEX_WRAPPER_TYPE_NAME,
-        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-DIDKGVO5.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
+        loadComponent: () => import('./dereekb-dbx-form-flex.wrapper.component-C2nN1Oi1.mjs').then((m) => m.DbxForgeFlexWrapperComponent)
     },
     {
         wrapperName: DBX_FORGE_ARRAY_FIELD_WRAPPER_NAME,
@@ -11004,12 +11013,12 @@ class DbxFormSearchFormComponent extends AbstractConfigAsyncForgeFormDirective {
     searchChanged(value) {
         this.search.emit(value?.search ?? '');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSearchFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSearchFormComponent, isStandalone: true, selector: "dbx-form-search-form", outputs: { search: "search" }, host: { classAttribute: "d-block dbx-form-search-form" }, providers: provideDbxForgeFormContext(), usesInheritance: true, ngImport: i0, template: `
+    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: `
     <dbx-forge (dbxFormValueChange)="searchChanged($event)"></dbx-forge>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxForgeFormComponentImportsModule }, { kind: "component", type: DbxForgeFormComponent, selector: "dbx-forge" }, { kind: "directive", type: DbxFormValueChangeDirective, selector: "[dbxFormValueChange]", outputs: ["dbxFormValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSearchFormComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-search-form',
@@ -11428,8 +11437,8 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     setDisplayContent(displayContent) {
         this._displayContentSignal.set(displayContent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxDefaultChecklistItemFieldDisplayComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxDefaultChecklistItemFieldDisplayComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
     @if (displayContentSignal()) {
       <div class="dbx-default-checklist-item-field">
         @if (displayContentSignal()?.label) {
@@ -11445,7 +11454,7 @@ class DbxDefaultChecklistItemFieldDisplayComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxDefaultChecklistItemFieldDisplayComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11483,12 +11492,12 @@ class DbxChecklistItemContentComponent {
             }));
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxChecklistItemContentComponent, isStandalone: true, selector: "dbx-checklist-item-content-component", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChecklistItemContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxChecklistItemContentComponent, isStandalone: true, selector: "dbx-checklist-item-content-component", ngImport: i0, template: `
     <dbx-injection [config]="config"></dbx-injection>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChecklistItemContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-checklist-item-content-component',
@@ -11542,10 +11551,10 @@ class DbxChecklistItemFieldComponent extends FieldType$1 {
         // field prop is finally available here
         this._displayContentObs.set(this.checklistField.displayContent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxChecklistItemFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  @if (label) {\n    <div class=\"dbx-checklist-item-label\">{{ label }}</div>\n  }\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchorSignal()\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"rippleDisabledSignal()\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          @if (!rippleDisabledSignal()) {\n            <mat-icon>navigate_next</mat-icon>\n          }\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  @if (description) {\n    <div class=\"dbx-hint\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChecklistItemFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxChecklistItemFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  @if (label) {\n    <div class=\"dbx-checklist-item-label\">{{ label }}</div>\n  }\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchorSignal()\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"rippleDisabledSignal()\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          @if (!rippleDisabledSignal()) {\n            <mat-icon>navigate_next</mat-icon>\n          }\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  @if (description) {\n    <div class=\"dbx-hint\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DbxChecklistItemContentComponent, selector: "dbx-checklist-item-content-component" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxChecklistItemFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule, DbxAnchorComponent, MatRippleModule, MatIconModule, DbxChecklistItemContentComponent], template: "<div class=\"dbx-checklist-item-wrapper\" [formGroup]=\"formGroup\">\n  @if (label) {\n    <div class=\"dbx-checklist-item-label\">{{ label }}</div>\n  }\n  <div class=\"dbx-checklist-item\">\n    <div class=\"dbx-checklist-item-check\">\n      <mat-checkbox [formControlName]=\"formControlName\"></mat-checkbox>\n    </div>\n    <div class=\"dbx-checklist-item-content-wrapper\">\n      <dbx-anchor [block]=\"true\" [anchor]=\"anchorSignal()\">\n        <div class=\"dbx-checklist-item-content\" matRipple [matRippleDisabled]=\"rippleDisabledSignal()\">\n          <dbx-checklist-item-content-component></dbx-checklist-item-content-component>\n          <span class=\"spacer\"></span>\n          @if (!rippleDisabledSignal()) {\n            <mat-icon>navigate_next</mat-icon>\n          }\n        </div>\n      </dbx-anchor>\n    </div>\n  </div>\n  @if (description) {\n    <div class=\"dbx-hint\">{{ description }}</div>\n  }\n</div>\n" }]
         }] });
@@ -11563,8 +11572,8 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     onInfoClick() {
         this.infoWrapper.onInfoClick();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormInfoWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormInfoWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormInfoWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-info-wrapper dbx-flex-bar">
       <div class="dbx-form-info-wrapper-content dbx-flex-grow">
         <ng-container #fieldComponent></ng-container>
@@ -11577,7 +11586,7 @@ class DbxFormInfoWrapperComponent extends FieldWrapper {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormInfoWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11610,14 +11619,14 @@ class DbxFormSectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSectionWrapperComponent, isStandalone: true, selector: "dbx-form-section-wrapper", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormSectionWrapperComponent, isStandalone: true, selector: "dbx-form-section-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-section [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-section>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: DbxSectionLayoutModule }, { kind: "component", type: i1$3.DbxSectionComponent, selector: "dbx-section", inputs: ["elevate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-section-wrapper',
@@ -11651,14 +11660,14 @@ class DbxFormFlexWrapperComponent extends FieldWrapper {
     get breakToColumn() {
         return this.flexWrapper.breakToColumn ?? false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormFlexWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFlexWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormFlexWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-flex-section" dbxFlexGroup [content]="false" [relative]="relative" [breakpoint]="breakpoint" [breakToColumn]="breakToColumn">
       <ng-container #fieldComponent></ng-container>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: DbxFlexGroupDirective, selector: "[dbxFlexGroup]", inputs: ["content", "breakToColumn", "relative", "breakpoint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFlexWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11684,14 +11693,14 @@ class DbxFormSubsectionWrapperComponent extends FieldWrapper {
     get headerConfig() {
         return this.props;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSubsectionWrapperComponent, isStandalone: true, selector: "dbx-form-subsection-wrapper", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSubsectionWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormSubsectionWrapperComponent, isStandalone: true, selector: "dbx-form-subsection-wrapper", usesInheritance: true, ngImport: i0, template: `
     <dbx-subsection [headerConfig]="headerConfig">
       <ng-container #fieldComponent></ng-container>
     </dbx-subsection>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxSubSectionComponent, selector: "dbx-subsection" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSubsectionWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-subsection-wrapper',
@@ -11761,10 +11770,10 @@ class AbstractFormExpandSectionWrapperDirective extends FieldWrapper {
     ngOnInit() {
         this._formControlObs.next(this.formControl);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractFormExpandSectionWrapperDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractFormExpandSectionWrapperDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractFormExpandSectionWrapperDirective, decorators: [{
             type: Directive
         }] });
 
@@ -11775,8 +11784,8 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDire
     get buttonType() {
         return this.expandSection.buttonType ?? 'button';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormExpandWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExpandWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFormExpandWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     @if (showSignal()) {
       <div [id]="expandContentId" role="region" [attr.aria-label]="expandLabel">
         <ng-container #fieldComponent></ng-container>
@@ -11786,7 +11795,7 @@ class DbxFormExpandWrapperComponent extends AbstractFormExpandSectionWrapperDire
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExpandWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11815,12 +11824,12 @@ class AutoTouchFieldWrapperComponent extends FieldWrapper {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: AutoTouchFieldWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AutoTouchFieldWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: AutoTouchFieldWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <ng-container #fieldComponent></ng-container>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AutoTouchFieldWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11847,8 +11856,8 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDire
             this._toggleOpen.next(!show);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormToggleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormToggleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFormToggleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-toggle-wrapper">
       <div class="dbx-form-toggle-wrapper-toggle">
         <mat-slide-toggle [checked]="showSignal()" [attr.aria-expanded]="showSignal()" [attr.aria-controls]="expandContentId" (toggleChange)="onToggleChange()">{{ slideLabelSignal() }}</mat-slide-toggle>
@@ -11861,7 +11870,7 @@ class DbxFormToggleWrapperComponent extends AbstractFormExpandSectionWrapperDire
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormToggleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11910,14 +11919,14 @@ class DbxFormStyleWrapperComponent extends FieldWrapper {
             this._class.next(asObservable(this.classGetter));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormStyleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormStyleWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-style-wrapper" [ngClass]="classSignal()" [ngStyle]="styleSignal()">
       <ng-container #fieldComponent></ng-container>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormStyleWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -11947,15 +11956,15 @@ class DbxFormWorkingWrapperComponent extends FieldWrapper {
     ngOnDestroy() {
         this.workingContext.destroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormWorkingWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormWorkingWrapperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormWorkingWrapperComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-working-wrapper">
       <ng-container #fieldComponent></ng-container>
       <dbx-loading [linear]="true" [context]="workingContext"></dbx-loading>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormWorkingWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12025,8 +12034,8 @@ const importsAndExports$h = [
  * Registers all Formly field wrapper types (section, flex, expand, toggle, style, info, working, autotouch, subsection).
  */
 class DbxFormFormlyWrapperModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [AutoTouchFieldWrapperComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyWrapperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [AutoTouchFieldWrapperComponent,
             DbxFormSectionWrapperComponent,
             DbxFormSubsectionWrapperComponent,
             DbxFormInfoWrapperComponent,
@@ -12049,7 +12058,7 @@ class DbxFormFormlyWrapperModule {
             // Formly
             FormlyModule,
             FormlyMaterialModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [DbxFormSectionWrapperComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyWrapperModule, imports: [DbxFormSectionWrapperComponent,
             DbxFormSubsectionWrapperComponent,
             DbxFormInfoWrapperComponent,
             DbxFormToggleWrapperComponent,
@@ -12073,7 +12082,7 @@ class DbxFormFormlyWrapperModule {
             FormlyModule,
             FormlyMaterialModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyWrapperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12101,14 +12110,14 @@ const importsAndExports$g = [DbxChecklistItemFieldComponent, DbxChecklistItemCon
  * Registers the `checklistitem` Formly field type with wrapper support.
  */
 class DbxFormFormlyChecklistItemFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxFormFormlyWrapperModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxDefaultChecklistItemFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, imports: [DbxChecklistItemFieldComponent, DbxChecklistItemContentComponent, DbxFormFormlyWrapperModule,
             FormlyModule.forChild({
                 types: [{ name: 'checklistitem', component: DbxChecklistItemFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyChecklistItemFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12403,12 +12412,12 @@ class DbxFormComponentFieldComponent extends FieldType$1 {
     get config() {
         return this.field.componentField;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormComponentFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormComponentFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxFormComponentFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-component" dbx-injection [config]="config"></div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormComponentFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12425,13 +12434,13 @@ const importsAndExports$f = [DbxFormComponentFieldComponent];
  * Registers the `component` Formly field type for custom Angular component injection.
  */
 class DbxFormFormlyComponentFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$1.FormlyModule], exports: [DbxFormComponentFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$f, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyComponentFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [DbxFormComponentFieldComponent, i1$1.FormlyModule], exports: [DbxFormComponentFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyComponentFieldModule, imports: [importsAndExports$f, FormlyModule.forChild({
                 types: [{ name: 'component', component: DbxFormComponentFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyComponentFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12570,10 +12579,10 @@ class DbxItemListFieldComponent extends FieldType$1 {
             this.formControl.markAsTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxItemListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-list-item-field\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\">\n  @if (label) {\n    <span class=\"dbx-label dbx-label-padded\">{{ label }}</span>\n  }\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  @if (description) {\n    <div class=\"dbx-form-description\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxItemListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxItemListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-list-item-field\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\">\n  @if (label) {\n    <span class=\"dbx-label dbx-label-padded\">{{ label }}</span>\n  }\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  @if (description) {\n    <div class=\"dbx-form-description\">{{ description }}</div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: DbxListModifierModule }, { kind: "directive", type: i1$3.DbxValueListItemModifierDirective, selector: "dbxListItemModifier,[dbxListItemModifier]", inputs: ["dbxListItemModifier"] }, { kind: "directive", type: i1$3.DbxListItemIsSelectedModifierDirective, selector: "dbxListItemIsSelectedModifier,[dbxListItemIsSelectedModifier]", inputs: ["dbxListItemIsSelectedModifier"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i10.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxItemListFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [DbxListModifierModule, DbxInjectionComponent, MatDividerModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-list-item-field\" dbxListItemModifier [dbxListItemIsSelectedModifier]=\"isSelectedModifierFunctionSignal()\">\n  @if (label) {\n    <span class=\"dbx-label dbx-label-padded\">{{ label }}</span>\n  }\n  <div class=\"dbx-list-item-field-content\">\n    <dbx-injection [config]=\"configSignal()\"></dbx-injection>\n  </div>\n  <mat-divider></mat-divider>\n  @if (description) {\n    <div class=\"dbx-form-description\">{{ description }}</div>\n  }\n</div>\n" }]
         }] });
@@ -12583,13 +12592,13 @@ const importsAndExports$e = [DbxItemListFieldComponent];
  * Registers the `dbxlistfield` Formly field type for item list selection.
  */
 class DbxFormFormlyDbxListFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$e, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [DbxItemListFieldComponent, i1$1.FormlyModule], exports: [DbxItemListFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, imports: [importsAndExports$e, FormlyModule.forChild({
                 types: [{ name: 'dbxlistfield', component: DbxItemListFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDbxListFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -12887,10 +12896,10 @@ class AbstractDbxPickableItemFieldDirective extends FieldType {
         this.formControl.markAsTouched();
         this.formControl.markAsDirty();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: AbstractDbxPickableItemFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["matInput"], descendants: true, read: MatInput, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.11", type: AbstractDbxPickableItemFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "filterMatInput", first: true, predicate: ["matInput"], descendants: true, read: MatInput, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxPickableItemFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { filterMatInput: [{ type: i0.ViewChild, args: ['matInput', { ...{ read: MatInput }, isSignal: true }] }] } });
 
@@ -12910,10 +12919,10 @@ class DbxPickableChipListFieldComponent extends AbstractDbxPickableItemFieldDire
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPickableChipListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\n        @for (item of itemsSignal(); track item.itemValue.value) {\n          <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n            @if (item.itemValue.icon) {\n              <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n            }\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n            }\n          </mat-chip-option>\n        }\n      </mat-chip-listbox>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableChipListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxPickableChipListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\n        @for (item of itemsSignal(); track item.itemValue.value) {\n          <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n            @if (item.itemValue.icon) {\n              <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n            }\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n            }\n          </mat-chip-option>\n        }\n      </mat-chip-listbox>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableChipListFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatChipsModule, NgTemplateOutlet, FormsModule, ReactiveFormsModule, MatIconModule, MatInputModule, DbxLoadingComponent, MatDivider, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\" [linear]=\"true\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-chips\">\n      <mat-chip-listbox [multiple]=\"multiSelect\" [required]=\"required\" [selectable]=\"!isReadonlyOrDisabled\" [disabled]=\"readonly\" #chipList>\n        @if (showSelectAllButton && multiSelect && !isReadonlyOrDisabled) {\n          <mat-chip-option (click)=\"toggleAll()\" [selected]=\"allSelectedSignal()\">\n            <span class=\"dbx-chip-label\">All</span>\n          </mat-chip-option>\n        }\n        @for (item of itemsSignal(); track item.itemValue.value) {\n          <mat-chip-option (click)=\"itemClicked(item)\" [selected]=\"item.selected\" [disabled]=\"isReadonlyOrDisabled || item.disabled\">\n            @if (item.itemValue.icon) {\n              <mat-icon matChipAvatar>{{ item.itemValue.icon }}</mat-icon>\n            }\n            <span class=\"dbx-chip-label\">{{ item.itemValue.label }}</span>\n            @if (item.itemValue.sublabel) {\n              <span class=\"dbx-chip-sublabel\">{{ item.itemValue.sublabel }}</span>\n            }\n          </mat-chip-option>\n        }\n      </mat-chip-listbox>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
         }] });
@@ -12928,10 +12937,10 @@ class DbxPickableListFieldItemListComponent extends AbstractDbxSelectionListWrap
             componentClass: DbxPickableListFieldItemListViewComponent
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxPickableListFieldItemListComponent, isStandalone: true, selector: "dbx-form-pickable-item-field-item-list", providers: provideDbxListViewWrapper(DbxPickableListFieldItemListComponent), usesInheritance: true, ngImport: i0, template: "\n  <dbx-list [state]=\"currentState$\" [config]=\"configSignal()\" [hasMore]=\"hasMore()\" [disabled]=\"disabledSignal()\" [selectionMode]=\"selectionModeSignal()\">\n    <ng-content top select=\"[top]\"></ng-content>\n    <ng-content bottom select=\"[bottom]\"></ng-content>\n    <ng-content empty select=\"[empty]\"></ng-content>\n    <ng-content emptyLoading select=\"[emptyLoading]\"></ng-content>\n    <ng-content end select=\"[end]\"></ng-content>\n  </dbx-list>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxListWrapperComponentImportsModule }, { kind: "component", type: i1$3.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode", "hasMore"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxPickableListFieldItemListComponent, isStandalone: true, selector: "dbx-form-pickable-item-field-item-list", providers: provideDbxListViewWrapper(DbxPickableListFieldItemListComponent), usesInheritance: true, ngImport: i0, template: "\n  <dbx-list [state]=\"currentState$\" [config]=\"configSignal()\" [hasMore]=\"hasMore()\" [disabled]=\"disabledSignal()\" [selectionMode]=\"selectionModeSignal()\">\n    <ng-content top select=\"[top]\"></ng-content>\n    <ng-content bottom select=\"[bottom]\"></ng-content>\n    <ng-content empty select=\"[empty]\"></ng-content>\n    <ng-content emptyLoading select=\"[emptyLoading]\"></ng-content>\n    <ng-content end select=\"[end]\"></ng-content>\n  </dbx-list>", isInline: true, dependencies: [{ kind: "ngmodule", type: DbxListWrapperComponentImportsModule }, { kind: "component", type: i1$3.DbxListComponent, selector: "dbx-list", inputs: ["padded", "state", "config", "disabled", "selectionMode", "hasMore"], outputs: ["contentScrolled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'dbx-form-pickable-item-field-item-list',
@@ -12967,12 +12976,12 @@ class DbxPickableListFieldItemListViewComponent extends AbstractDbxSelectionList
     // NOTE: This causes the "value" to be a PickableValueFieldDisplayValue<T>, which means we emit PickableValueFieldDisplayValue<T> to DbxPickableListFieldComponent.
     map((x) => addConfigToValueListItems(this.config, x)), shareReplay(1));
     itemsSignal = toSignal(this.items$);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DbxPickableListFieldItemListViewComponent, isStandalone: true, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: DbxPickableListFieldItemListViewComponent, isStandalone: true, selector: "ng-component", providers: provideDbxListView(DbxPickableListFieldItemListViewComponent), usesInheritance: true, ngImport: i0, template: `
     <dbx-selection-list-view-content [multiple]="multiple" [selectionMode]="selectionMode" [items]="itemsSignal()"></dbx-selection-list-view-content>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxSelectionValueListViewContentComponent, selector: "dbx-selection-list-view-content", inputs: ["multiple", "selectionMode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListViewComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -12987,8 +12996,8 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     label = this.itemValue.label;
     sublabel = this.itemValue.sublabel;
     icon = this.itemValue.icon;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPickableListFieldItemListViewItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxPickableListFieldItemListViewItemComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-default-pickable-item-field-list-item dbx-flex-bar">
       @if (icon) {
         <mat-icon class="dbx-icon-spacer">{{ icon }}</mat-icon>
@@ -13000,7 +13009,7 @@ class DbxPickableListFieldItemListViewItemComponent extends AbstractDbxValueList
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldItemListViewItemComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -13032,10 +13041,10 @@ class DbxPickableListFieldComponent extends AbstractDbxPickableItemFieldDirectiv
         const values = items.map((x) => x.itemValue.value);
         this.setValues(values);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPickableListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxPickableListFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: DbxPickableListFieldItemListComponent, selector: "dbx-form-pickable-item-field-item-list" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "component", type: DbxInjectionComponent, selector: "dbx-injection, [dbxInjection], [dbx-injection]", inputs: ["config", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPickableListFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [DbxPickableListFieldItemListComponent, NgTemplateOutlet, FormsModule, ReactiveFormsModule, MatInputModule, MatDivider, DbxLoadingComponent, DbxInjectionComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-pickable-item-field\">\n  <dbx-loading [context]=\"context\">\n    @if (showFilterInput) {\n      <ng-container *ngTemplateOutlet=\"filterTemplate\"></ng-container>\n    }\n    <!-- Content -->\n    <div class=\"dbx-pickable-item-field-list\">\n      <div class=\"dbx-pickable-item-field-list-content\">\n        <dbx-form-pickable-item-field-item-list [disabled]=\"isReadonlyOrDisabled\" [state]=\"filterItemsLoadingState$\" (selectionChange)=\"onSelectionChange($event)\"></dbx-form-pickable-item-field-item-list>\n      </div>\n      <dbx-injection [config]=\"footerConfig\"></dbx-injection>\n    </div>\n  </dbx-loading>\n</div>\n\n<!-- Filter Input -->\n<ng-template #filterTemplate>\n  <div class=\"dbx-pickable-item-field-filter\">\n    <div class=\"dbx-label\">{{ filterLabel }}</div>\n    <input [name]=\"name\" autocomplete=\"{{ autocomplete }}\" #filterMatInput=\"matInput\" matInput [placeholder]=\"placeholder\" [formControl]=\"inputCtrl\" [attr.aria-label]=\"filterLabel || 'Filter items'\" />\n    <mat-divider></mat-divider>\n    <dbx-loading [linear]=\"true\" [context]=\"filterResultsContext\"></dbx-loading>\n    <!-- No items found. -->\n    @if (noItemsAvailableSignal()) {\n      <p class=\"dbx-label\" role=\"status\">No items match this filter.</p>\n    }\n  </div>\n</ng-template>\n" }]
         }] });
@@ -13045,16 +13054,16 @@ const importsAndExports$d = [DbxPickableChipListFieldComponent, DbxPickableListF
  * Registers the `pickablechipfield` and `pickablelistfield` Formly field types.
  */
 class DbxFormFormlyPickableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$1.FormlyModule], exports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [importsAndExports$d, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPickableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent, i1$1.FormlyModule], exports: [DbxPickableChipListFieldComponent, DbxPickableListFieldComponent, DbxPickableListFieldItemListComponent, DbxPickableListFieldItemListViewComponent, DbxPickableListFieldItemListViewItemComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPickableFieldModule, imports: [importsAndExports$d, FormlyModule.forChild({
                 types: [
                     { name: 'pickablechipfield', component: DbxPickableChipListFieldComponent, wrappers: ['form-field'] },
                     { name: 'pickablelistfield', component: DbxPickableListFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPickableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -13494,10 +13503,10 @@ class AbstractDbxSearchableValueFieldDirective extends FieldType {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.10", type: AbstractDbxSearchableValueFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.11", type: AbstractDbxSearchableValueFieldDirective, isStandalone: true, viewQueries: [{ propertyName: "textInput", first: true, predicate: ["textInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractDbxSearchableValueFieldDirective, decorators: [{
             type: Directive
         }], propDecorators: { textInput: [{ type: i0.ViewChild, args: ['textInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
@@ -13546,10 +13555,10 @@ class DbxSearchableChipFieldComponent extends AbstractDbxSearchableValueFieldDir
     onBlur() {
         this._blur.next();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxSearchableChipFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove aria-label=\"Remove\">cancel</mat-icon>\n        }\n      </mat-chip-row>\n    }\n    <input #textInput [name]=\"name\" [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableChipFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxSearchableChipFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove aria-label=\"Remove\">cancel</mat-icon>\n        }\n      </mat-chip-row>\n    }\n    <input #textInput [name]=\"name\" [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i1$8.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$8.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$8.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableChipFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatChipsModule, MatIconModule, FormsModule, ReactiveFormsModule, DbxLoadingModule, MatAutocompleteModule, MatOptionModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-field\">\n  <!-- View -->\n  <mat-chip-grid [required]=\"required\" [disabled]=\"readonly\" #chipList>\n    @for (displayValue of displayValuesSignal(); track displayValue.value) {\n      <mat-chip-row [removable]=\"true\" (removed)=\"removeWithDisplayValue(displayValue)\">\n        @if (displayValue.icon) {\n          <mat-icon matChipAvatar>{{ displayValue.icon }}</mat-icon>\n        }\n        <span class=\"dbx-chip-label\">{{ displayValue.label }}</span>\n        @if (displayValue.sublabel) {\n          <span class=\"dbx-chip-sublabel\">{{ displayValue.sublabel }}</span>\n        }\n        @if (!readonly) {\n          <mat-icon matChipRemove aria-label=\"Remove\">cancel</mat-icon>\n        }\n      </mat-chip-row>\n    }\n    <input #textInput [name]=\"name\" [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" autocomplete=\"{{ autocomplete }}\" [matAutocompleteDisabled]=\"readonly\" [matChipInputFor]=\"chipList\" (keydown)=\"tabPressedOnInput($event)\" [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"addChip($event)\" (blur)=\"onBlur()\" [attr.aria-label]=\"searchInputPlaceholder || 'Search'\" />\n  </mat-chip-grid>\n  <div class=\"searchable-field-form-loading\">\n    <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n  </div>\n  @if (inputCtrl.touched && inputErrorMessage) {\n    <span class=\"dbx-chip-input-error\">{{ inputErrorMessage }}</span>\n  }\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }] });
@@ -13722,10 +13731,10 @@ class DbxSearchableTextFieldComponent extends AbstractDbxSearchableValueFieldDir
             this.addWithDisplayValue(value);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxSearchableTextFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  @if (showSelectedDisplayValueSignal()) {\n    <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n    </div>\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabel) {\n      <div class=\"dbx-label\">{{ searchLabel }}</div>\n    }\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\" [class.dbx-searchable-field-anchor-option]=\"!!displayValue.anchor\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n  <!-- If No Results -->\n  @if (searchResultsSignal()?.length === 0) {\n    @if (!isLoadingSearchResultsSignal()) {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">No results found.</p>\n      </mat-option>\n    } @else {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">Loading...</p>\n      </mat-option>\n    }\n  }\n  <!-- Add/Pick String Value -->\n  @if (allowStringValues && inputValueSignal()) {\n    <mat-option [value]=\"{ value: inputValueSignal() }\">\n      <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n    </mat-option>\n  }\n  <!-- Show clear value -->\n  @if (showClearValue && hasValueSignal()) {\n    <mat-option value=\"\">\n      <p class=\"dbx-clear-hint text-center\">Clear</p>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableTextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxSearchableTextFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  @if (showSelectedDisplayValueSignal()) {\n    <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n    </div>\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabel) {\n      <div class=\"dbx-label\">{{ searchLabel }}</div>\n    }\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\" [class.dbx-searchable-field-anchor-option]=\"!!displayValue.anchor\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n  <!-- If No Results -->\n  @if (searchResultsSignal()?.length === 0) {\n    @if (!isLoadingSearchResultsSignal()) {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">No results found.</p>\n      </mat-option>\n    } @else {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">Loading...</p>\n      </mat-option>\n    }\n  }\n  <!-- Add/Pick String Value -->\n  @if (allowStringValues && inputValueSignal()) {\n    <mat-option [value]=\"{ value: inputValueSignal() }\">\n      <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n    </mat-option>\n  }\n  <!-- Show clear value -->\n  @if (showClearValue && hasValueSignal()) {\n    <mat-option value=\"\">\n      <p class=\"dbx-clear-hint text-center\">Clear</p>\n    </mat-option>\n  }\n</mat-autocomplete>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: DbxLoadingModule }, { kind: "component", type: i1$3.DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: DbxSearchableFieldAutocompleteItemComponent, selector: "dbx-searchable-field-autocomplete-item", inputs: ["displayValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxSearchableTextFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [FormsModule, MatInput, NgClass, ReactiveFormsModule, DbxLoadingModule, MatOptionModule, MatAutocompleteModule, MatChipsModule, MatIconModule, DbxSearchableFieldAutocompleteItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-searchable-text-field\" [ngClass]=\"{ 'dbx-searchable-text-field-has-value': hasValueSignal(), 'dbx-searchable-text-field-show-value': showSelectedValue }\">\n  <!-- Result View -->\n  @if (showSelectedDisplayValueSignal()) {\n    <div class=\"dbx-searchable-text-field-value mat-option mat-option-text\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"selectedDisplayValueSignal()!\"></dbx-searchable-field-autocomplete-item>\n    </div>\n  }\n  <div class=\"dbx-searchable-text-field-input\">\n    @if (searchLabel) {\n      <div class=\"dbx-label\">{{ searchLabel }}</div>\n    }\n    <!-- View -->\n    <input type=\"search\" [name]=\"name\" matInput #textInput [placeholder]=\"searchInputPlaceholder\" [formControl]=\"inputCtrl\" [matAutocomplete]=\"auto\" [matAutocompleteDisabled]=\"readonly || disabled\" autocomplete=\"{{ autocomplete }}\" [attr.aria-label]=\"searchLabel || searchInputPlaceholder || 'Search'\" />\n    <div class=\"searchable-field-form-loading\">\n      <dbx-loading [linear]=\"true\" [context]=\"searchContext\"></dbx-loading>\n    </div>\n  </div>\n</div>\n\n<!-- Autocomplete -->\n<mat-autocomplete class=\"dbx-searchable-text-field-autocomplete\" #auto (optionSelected)=\"selected($event)\">\n  @for (displayValue of searchResultsSignal(); track displayValue.value) {\n    <mat-option [value]=\"displayValue\" [class.dbx-searchable-field-anchor-option]=\"!!displayValue.anchor\">\n      <dbx-searchable-field-autocomplete-item [displayValue]=\"displayValue\"></dbx-searchable-field-autocomplete-item>\n    </mat-option>\n  }\n  <!-- If No Results -->\n  @if (searchResultsSignal()?.length === 0) {\n    @if (!isLoadingSearchResultsSignal()) {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">No results found.</p>\n      </mat-option>\n    } @else {\n      <mat-option value=\"\" disabled>\n        <p class=\"dbx-clear-hint text-center\">Loading...</p>\n      </mat-option>\n    }\n  }\n  <!-- Add/Pick String Value -->\n  @if (allowStringValues && inputValueSignal()) {\n    <mat-option [value]=\"{ value: inputValueSignal() }\">\n      <p class=\"dbx-clear-hint text-center\">\"{{ inputValueSignal() }}\"</p>\n    </mat-option>\n  }\n  <!-- Show clear value -->\n  @if (showClearValue && hasValueSignal()) {\n    <mat-option value=\"\">\n      <p class=\"dbx-clear-hint text-center\">Clear</p>\n    </mat-option>\n  }\n</mat-autocomplete>\n" }]
         }] });
@@ -13735,16 +13744,16 @@ const importsAndExports$c = [DbxSearchableChipFieldComponent, DbxSearchableTextF
  * Registers the `searchablechipfield` and `searchabletextfield` Formly field types.
  */
 class DbxFormFormlySearchableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$c, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySearchableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent, i1$1.FormlyModule], exports: [DbxSearchableChipFieldComponent, DbxSearchableTextFieldComponent, DbxSearchableFieldAutocompleteItemComponent, DbxDefaultSearchableFieldDisplayComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySearchableFieldModule, imports: [importsAndExports$c, FormlyModule.forChild({
                 types: [
                     { name: 'searchablechipfield', component: DbxSearchableChipFieldComponent, wrappers: ['form-field'] },
                     { name: 'searchabletextfield', component: DbxSearchableTextFieldComponent, wrappers: ['form-field'] }
                 ]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySearchableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14144,10 +14153,10 @@ class DbxFormSourceSelectFieldComponent extends FieldType$2 {
         this.formControl.markAsDirty();
         this.formControl.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n        <mat-optgroup [label]=\"optionGroup.label\">\n          @for (value of optionGroup.values; track value.value) {\n            <mat-option [value]=\"value.value\">\n              {{ value.label }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    </mat-select>\n    @if (showOpenSourceButton) {\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    }\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n", dependencies: [{ kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSourceSelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFormSourceSelectFieldComponent, isStandalone: true, selector: "dbx-form-sourceselectfield", viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n        <mat-optgroup [label]=\"optionGroup.label\">\n          @for (value of optionGroup.values; track value.value) {\n            <mat-option [value]=\"value.value\">\n              {{ value.label }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    </mat-select>\n    @if (showOpenSourceButton) {\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    }\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n", dependencies: [{ kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1$2.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1$2.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1$2.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1$2.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSourceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-form-sourceselectfield', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatSelect, MatOption, FormsModule, ReactiveFormsModule, DbxButtonComponent, MatOptgroup, DbxButtonSpacerDirective, DbxActionModule, DbxLoadingComponent], standalone: true, template: "<div class=\"dbx-source-select-field\">\n  <div class=\"dbx-source-select-field-content\">\n    <mat-select class=\"dbx-source-select-field-select\" [id]=\"id\" [formControl]=\"formControl\" [multiple]=\"props.multiple\" [panelClass]=\"selectPanelClass\" (openedChange)=\"onSelectOpenedChange($event)\">\n      @if (filterable) {\n        <div class=\"dbx-source-select-filter-container\">\n          <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n        </div>\n      }\n      @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n        <mat-option [value]=\"value.value\">\n          {{ value.label }}\n        </mat-option>\n      }\n      @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n        <mat-optgroup [label]=\"optionGroup.label\">\n          @for (value of optionGroup.values; track value.value) {\n            <mat-option [value]=\"value.value\">\n              {{ value.label }}\n            </mat-option>\n          }\n        </mat-optgroup>\n      }\n    </mat-select>\n    @if (showOpenSourceButton) {\n      <dbx-button-spacer></dbx-button-spacer>\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\" class=\"dbx-source-select-field-button\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIcon\"></dbx-button>\n      </dbx-action>\n    }\n  </div>\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n</div>\n" }]
         }], propDecorators: { buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
@@ -14191,14 +14200,14 @@ const sourceSelectField = formlySourceSelectField;
  * Registers the `sourceselectfield` Formly field type.
  */
 class DbxFormFormlySourceSelectModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySourceSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent, i1$1.FormlyModule], exports: [DbxFormSourceSelectFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySourceSelectModule, imports: [DbxFormSourceSelectFieldComponent,
             FormlyModule.forChild({
                 types: [{ name: 'sourceselectfield', component: DbxFormSourceSelectFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlySourceSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14323,8 +14332,8 @@ class DbxTextEditorFieldComponent extends FieldType {
             this._editor.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxTextEditorFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextEditorFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxTextEditorFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-texteditor-field" [ngClass]="compactClassSignal()" [formGroup]="formGroup">
       @if (label) {
         <span class="dbx-label">{{ label }}</span>
@@ -14341,7 +14350,7 @@ class DbxTextEditorFieldComponent extends FieldType {
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$9.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$9.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTextEditorFieldComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14371,13 +14380,13 @@ const importsAndExports$b = [DbxTextEditorFieldComponent];
  * Registers the `texteditor` Formly field type for rich text editing.
  */
 class DbxFormFormlyTextEditorFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$1.FormlyModule], exports: [DbxTextEditorFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$b, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [DbxTextEditorFieldComponent, i1$1.FormlyModule], exports: [DbxTextEditorFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, imports: [importsAndExports$b, FormlyModule.forChild({
                 types: [{ name: 'texteditor', component: DbxTextEditorFieldComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextEditorFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14562,8 +14571,8 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
             fieldConfig
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFormRepeatArrayTypeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFormRepeatArrayTypeComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
     <div class="dbx-form-repeat-array">
       <dbx-subsection [header]="label" [hint]="description">
         <!-- Fields -->
@@ -14603,7 +14612,7 @@ class DbxFormRepeatArrayTypeComponent extends FieldArrayType {
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: DbxSubSectionComponent, selector: "dbx-subsection" }, { kind: "directive", type: DbxBarDirective, selector: "dbx-bar,[dbxBar]", inputs: ["color"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i1$1.LegacyFormlyField, selector: "formly-field" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$5.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormRepeatArrayTypeComponent, decorators: [{
             type: Component,
             args: [{
                     template: `
@@ -14656,13 +14665,13 @@ const importsAndExports$a = [DbxFormRepeatArrayTypeComponent];
  * Registers the `repeatarray` Formly field type for dynamic array fields.
  */
 class DbxFormFormlyArrayFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$1.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports$a, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyArrayFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [DbxFormRepeatArrayTypeComponent, i1$1.FormlyModule], exports: [DbxFormRepeatArrayTypeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyArrayFieldModule, imports: [importsAndExports$a, FormlyModule.forChild({
                 types: [{ name: 'repeatarray', component: DbxFormRepeatArrayTypeComponent }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyArrayFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -14730,11 +14739,11 @@ const importsAndExports$9 = [FormlyMaterialModule, FormlyMatCheckboxModule, Form
  * Provides Formly Material checkbox and toggle field support.
  */
 class DbxFormFormlyBooleanFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule], exports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [importsAndExports$9, FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule], exports: [FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, imports: [importsAndExports$9, FormlyMaterialModule, FormlyMatCheckboxModule, FormlyMatToggleModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyBooleanFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$9,
@@ -15232,15 +15241,15 @@ class DbxFixedDateRangeFieldComponent extends FieldType {
     _createDateRange(date) {
         return date ? dateRange({ ...this.currentDateRangeInputSignal(), date }) : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxFixedDateRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFixedDateRangeFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxFixedDateRangeFieldComponent, isStandalone: true, selector: "ng-component", providers: [
             {
                 provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
                 useClass: forwardRef(() => DbxFixedDateRangeFieldSelectionStrategy)
             }
         ], viewQueries: [{ propertyName: "calendar", first: true, predicate: MatCalendar, descendants: true, isSignal: true }, { propertyName: "startDateInputElement", first: true, predicate: ["startDateInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "endDateInputElement", first: true, predicate: ["endDateInput"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-fixeddaterange-field\">\n  <mat-calendar #calendarView [selected]=\"calendarSelectionSignal()\" [dateFilter]=\"pickerFilterSignal()\" [minDate]=\"minDateSignal()\" [maxDate]=\"maxDateSignal()\" (selectedChange)=\"selectedChange($event)\"></mat-calendar>\n  <mat-form-field class=\"dbx-fixeddaterange-field-input\" appearance=\"fill\">\n    @if (showRangeInput) {\n      <mat-date-range-input [formGroup]=\"inputRangeForm\">\n        <input #startDateInput matStartDate formControlName=\"start\" placeholder=\"Start date\" />\n        <input #endDateInput [ngClass]=\"endDisabledSignal() ? 'dbx-fixeddaterange-field-input-end' : ''\" [attr.tabindex]=\"endDisabledSignal() ? -1 : 0\" matEndDate formControlName=\"end\" placeholder=\"End date\" />\n      </mat-date-range-input>\n    }\n  </mat-form-field>\n  @if (formControl.hasError('required')) {\n    <mat-error>Date range is required</mat-error>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$6.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "component", type: i1$6.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i1$6.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i1$6.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFixedDateRangeFieldComponent, decorators: [{
             type: Component,
             args: [{ providers: [
                         {
@@ -15297,10 +15306,10 @@ class DbxFixedDateRangeFieldSelectionStrategy {
         const year = date.getFullYear();
         return this._dateAdapter.createDate(year, monthIndex, day);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFixedDateRangeFieldSelectionStrategy, decorators: [{
             type: Injectable
         }] });
 
@@ -15309,9 +15318,9 @@ const importsAndExports$8 = [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldCo
  * Registers the `datetime` and `fixeddaterange` Formly field types with style and form-field wrappers.
  */
 class DbxFormFormlyDateFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [importsAndExports$8, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDateFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule, i1$1.FormlyModule], exports: [DbxDateTimeFieldComponent, DbxFixedDateRangeFieldComponent, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDateFieldModule, imports: [importsAndExports$8, FormlyModule.forChild({
                 types: [
                     //
                     { name: 'datetime', component: DbxDateTimeFieldComponent, wrappers: ['style', 'form-field'] },
@@ -15319,7 +15328,7 @@ class DbxFormFormlyDateFieldModule {
                 ]
             }), DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDateFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16111,12 +16120,12 @@ class DbxTimeDurationFieldComponent extends FieldType {
         }
         return timeUnitToMilliseconds(value, this.outputUnit);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTimeDurationFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.10", type: DbxTimeDurationFieldComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTimeDurationFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.11", type: DbxTimeDurationFieldComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "pickerButtonElement", first: true, predicate: ["pickerButton"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input dbx-flex-fill\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxTimeDurationFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxTimeDurationFieldComponent, decorators: [{
             type: Component,
-            args: [{ imports: [MatInputModule, MatFormFieldModule, MatIconModule, MatButtonModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n" }]
+            args: [{ imports: [MatInputModule, MatFormFieldModule, MatIconModule, MatButtonModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-duration-field\">\n  <input matInput type=\"text\" [formControl]=\"textCtrl\" (blur)=\"onTextBlur()\" (keydown.enter)=\"onTextEnter($event)\" class=\"dbx-form-duration-field-input dbx-flex-fill\" placeholder=\"e.g. 2h30m\" [attr.aria-label]=\"props.label || 'Duration'\" />\n  <button mat-icon-button type=\"button\" #pickerButton (click)=\"openPicker()\" class=\"dbx-form-duration-field-picker-btn\" aria-label=\"Open duration picker\">\n    <mat-icon>schedule</mat-icon>\n  </button>\n</div>\n" }]
         }], propDecorators: { pickerButtonElement: [{ type: i0.ViewChild, args: ['pickerButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 const importsAndExports$7 = [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent];
@@ -16124,13 +16133,13 @@ const importsAndExports$7 = [DbxTimeDurationFieldComponent, DbxDurationPickerPop
  * Registers the `timeduration` Formly field type for time duration input with text parsing and popover picker.
  */
 class DbxFormFormlyDurationFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent, i1$1.FormlyModule], exports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [importsAndExports$7, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDurationFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent, i1$1.FormlyModule], exports: [DbxTimeDurationFieldComponent, DbxDurationPickerPopoverComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDurationFieldModule, imports: [importsAndExports$7, FormlyModule.forChild({
                 types: [{ name: 'timeduration', component: DbxTimeDurationFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyDurationFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyDurationFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -16416,11 +16425,11 @@ const importsAndExports$6 = [FormlyMaterialModule, FormlyMatSliderModule];
  * Provides Formly Material number input and slider support.
  */
 class DbxFormFormlyNumberFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [FormlyMaterialModule, FormlyMatSliderModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [importsAndExports$6, FormlyMaterialModule, FormlyMatSliderModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyNumberFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [FormlyMaterialModule, FormlyMatSliderModule], exports: [FormlyMaterialModule, FormlyMatSliderModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyNumberFieldModule, imports: [importsAndExports$6, FormlyMaterialModule, FormlyMatSliderModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyNumberFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$6,
@@ -16516,10 +16525,10 @@ class DbxPhoneFieldComponent extends FieldType {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DbxPhoneFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormlyMatFormFieldModule }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxPhoneFieldComponent, isStandalone: true, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "ngmodule", type: FormlyMatFormFieldModule }, { kind: "component", type: NgxMatInputTelComponent, selector: "ngx-mat-input-tel", inputs: ["autocomplete", "ariaLabel", "cssClass", "defaultCountry", "errorStateMatcher", "maxLength", "name", "placeholder", "countriesName", "preferredCountries", "onlyCountries", "searchPlaceholder", "validation", "enablePlaceholder", "enableSearch", "resetOnChange", "separateDialCode", "hideAreaCodes", "format", "required", "disabled"], outputs: ["countryChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxPhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ imports: [MatInputModule, MatFormFieldModule, FormsModule, ReactiveFormsModule, MatIconModule, FlexLayoutModule, FormlyMatFormFieldModule, NgxMatInputTelComponent], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-phone-field\" [formGroup]=\"inputFormGroup\">\n  <ngx-mat-input-tel name=\"phone\" class=\"dbx-form-phone-field-phone-content\" [required]=\"required\" [enableSearch]=\"enableSearch\" [preferredCountries]=\"preferredCountries\" [enablePlaceholder]=\"false\" [formControl]=\"phoneCtrl\"></ngx-mat-input-tel>\n  @if (allowExtension) {\n    <div class=\"dbx-form-phone-field-extension-content\">\n      <span class=\"dbx-hint dbx-button-spacer\">Ext.</span>\n      <input name=\"phone-extension\" class=\"dbx-form-phone-field-extension-input\" placeholder=\"123\" minlength=\"0\" maxlength=\"6\" #extensionInput [formControl]=\"extensionCtrl\" aria-label=\"Phone extension\" />\n    </div>\n  }\n</div>\n" }]
         }] });
@@ -16529,13 +16538,13 @@ const importsAndExports$5 = [DbxPhoneFieldComponent];
  * Registers the `intphone` Formly field type for international phone number input.
  */
 class DbxFormFormlyPhoneFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [DbxPhoneFieldComponent, i1$1.FormlyModule], exports: [DbxPhoneFieldComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [DbxPhoneFieldComponent, i1$1.FormlyModule], exports: [DbxPhoneFieldComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, imports: [importsAndExports$5, FormlyModule.forChild({
                 types: [{ name: 'intphone', component: DbxPhoneFieldComponent, wrappers: ['form-field'] }]
             })] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyPhoneFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -17134,11 +17143,11 @@ const importsAndExports$4 = [DbxFormFormlyArrayFieldModule, FormlyMaterialModule
  * Aggregates Formly Material input, array field, and wrapper modules for text field support.
  */
 class DbxFormFormlyTextFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [importsAndExports$4, DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextFieldModule, imports: [importsAndExports$4, DbxFormFormlyArrayFieldModule, FormlyMaterialModule, FormlyMatInputModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyTextFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$4,
@@ -17178,11 +17187,11 @@ const importsAndExports$3 = [DbxFormFormlyChecklistItemFieldModule, DbxFormForml
  * Aggregates all custom Formly field type modules (checklist, component, texteditor) and wrappers.
  */
 class DbxFormFormlyFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [importsAndExports$3, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyFieldModule, imports: [importsAndExports$3, DbxFormFormlyChecklistItemFieldModule, DbxFormFormlyComponentFieldModule, DbxFormFormlyTextEditorFieldModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormFormlyFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$3,
@@ -17235,11 +17244,11 @@ const importsAndExports$2 = [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperM
  * Imports and re-exports the text field and wrapper modules required by {@link textIsAvailableField}.
  */
 class DbxFormTextAvailableFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [importsAndExports$2, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTextAvailableFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule], exports: [DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTextAvailableFieldModule, imports: [importsAndExports$2, DbxFormFormlyTextFieldModule, DbxFormFormlyWrapperModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTextAvailableFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTextAvailableFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$2,
@@ -17384,11 +17393,11 @@ const importsAndExports$1 = [DbxFormFormlyTextFieldModule];
  * Imports and re-exports the text field module required by the username/password login field functions.
  */
 class DbxFormLoginFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, imports: [DbxFormFormlyTextFieldModule], exports: [DbxFormFormlyTextFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, imports: [importsAndExports$1, DbxFormFormlyTextFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoginFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoginFieldModule, imports: [DbxFormFormlyTextFieldModule], exports: [DbxFormFormlyTextFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoginFieldModule, imports: [importsAndExports$1, DbxFormFormlyTextFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormLoginFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormLoginFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports$1,
@@ -17432,11 +17441,11 @@ const importsAndExports = [DbxFormFormlySearchableFieldModule];
  * Imports and re-exports the searchable field module required by {@link timezoneStringField}.
  */
 class DbxFormTimezoneStringFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [DbxFormFormlySearchableFieldModule], exports: [DbxFormFormlySearchableFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [importsAndExports, DbxFormFormlySearchableFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTimezoneStringFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [DbxFormFormlySearchableFieldModule], exports: [DbxFormFormlySearchableFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTimezoneStringFieldModule, imports: [importsAndExports, DbxFormFormlySearchableFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormTimezoneStringFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormTimezoneStringFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: importsAndExports,
@@ -17497,10 +17506,10 @@ class AbstractFormlyFormDirective {
     setDisabled(key, disabled) {
         this.context.setDisabled(key, disabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractFormlyFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractFormlyFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractFormlyFormDirective, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 /**
@@ -17510,10 +17519,10 @@ class AbstractSyncFormlyFormDirective extends AbstractFormlyFormDirective {
     ngOnInit() {
         this.context.fields = this.fields;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractSyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractSyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractSyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractSyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 /**
@@ -17527,20 +17536,20 @@ class AbstractAsyncFormlyFormDirective extends AbstractFormlyFormDirective {
             this.context.fields = fields;
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: AbstractAsyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: AbstractAsyncFormlyFormDirective, isStandalone: true, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }] });
 class AbstractConfigAsyncFormlyFormDirective extends AbstractAsyncFormlyFormDirective {
     config = input(undefined, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     currentConfig$ = toObservable(this.config).pipe(maybeValueFromObservableOrValue());
     config$ = this.currentConfig$.pipe(filterMaybe(), shareReplay(1));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: AbstractConfigAsyncFormlyFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: AbstractConfigAsyncFormlyFormDirective, isStandalone: true, inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: AbstractConfigAsyncFormlyFormDirective, decorators: [{
             type: Directive
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
 
@@ -17550,10 +17559,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
 class DbxFormlyFieldsContextDirective extends AbstractAsyncFormlyFormDirective {
     fields = input(undefined, { ...(ngDevMode ? { debugName: "fields" } : /* istanbul ignore next */ {}), alias: 'dbxFormlyFields' });
     fields$ = toObservable(this.fields);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.10", type: DbxFormlyFieldsContextDirective, isStandalone: true, selector: "[dbxFormlyFields]", inputs: { fields: { classPropertyName: "fields", publicName: "dbxFormlyFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFieldsContextDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.11", type: DbxFormlyFieldsContextDirective, isStandalone: true, selector: "[dbxFormlyFields]", inputs: { fields: { classPropertyName: "fields", publicName: "dbxFormlyFields", isSignal: true, isRequired: false, transformFunction: null } }, providers: provideFormlyContext(), usesInheritance: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFieldsContextDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbxFormlyFields]',
@@ -17571,11 +17580,11 @@ const dbxFormlyFormComponentImports = [DbxFormlyComponent];
  * Default imports module for a view that extends AbstractFormlyFormDirective.
  */
 class DbxFormlyFormComponentImportsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [DbxFormlyComponent], exports: [DbxFormlyComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [dbxFormlyFormComponentImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFormComponentImportsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [DbxFormlyComponent], exports: [DbxFormlyComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFormComponentImportsModule, imports: [dbxFormlyFormComponentImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormlyFormComponentImportsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: dbxFormlyFormComponentImports,
@@ -17600,10 +17609,10 @@ function provideDbxFormFormlyFieldDeclarations() {
  * @selector `dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer`
  */
 class DbxFormSpacerDirective {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSpacerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.10", type: DbxFormSpacerDirective, isStandalone: true, selector: "dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer", host: { classAttribute: "d-block dbx-form-spacer" }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormSpacerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'dbx-form-spacer,[dbxFormSpacer],.dbx-form-spacer',
@@ -17615,11 +17624,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImpo
         }] });
 
 class DbxFormExtensionModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormFormlyFieldModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormFormlyFieldModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExtensionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExtensionModule, exports: [DbxFormModule, DbxFormFormlyFieldModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExtensionModule, imports: [DbxFormModule, DbxFormFormlyFieldModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxFormExtensionModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [DbxFormModule, DbxFormFormlyFieldModule]