@abp/ng.components 10.5.0 → 10.6.0-rc.1

package/fesm2022/abp-ng.components-dynamic-form.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, forwardRef, input, ChangeDetectorRef, DestroyRef, Injector, ChangeDetectionStrategy, Component, viewChild, ViewContainerRef, effect, output } from '@angular/core';
+import { inject, Injectable, InjectionToken, forwardRef, input, DestroyRef, Injector, signal, computed, ChangeDetectionStrategy, Component, viewChild, ViewContainerRef, effect, output } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormBuilder, FormControl, Validators, NG_VALUE_ACCESSOR, NgControl, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RestService, LocalizationPipe } from '@abp/ng.core';
+import { of, merge } from 'rxjs';
 import { FormCheckboxComponent } from '@abp/ng.theme.shared';
-import { of } from 'rxjs';
 
 class DynamicFormService {
     constructor() {
@@ -109,10 +109,10 @@ class DynamicFormService {
                 return '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -145,14 +145,52 @@ class DynamicFormFieldComponent {
         return `${this.fieldId}-help`;
     }
     constructor() {
-        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
-        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.visible = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
         this.injector = inject(Injector);
         this.formBuilder = inject(FormBuilder);
         this.dynamicFormService = inject(DynamicFormService);
+        this.controlStateTick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlStateTick" }] : /* istanbul ignore next */ []));
         this.options$ = of([]);
+        this.isInvalid = computed(() => {
+            this.controlStateTick();
+            if (this.control) {
+                return this.control.invalid && (this.control.dirty || this.control.touched);
+            }
+            return false;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+        this.errors = computed(() => {
+            this.controlStateTick();
+            if (!this.control?.errors)
+                return [];
+            if (this.control && this.control.errors) {
+                const errorKeys = Object.keys(this.control.errors);
+                const validators = this.field().validators || [];
+                return errorKeys.map(key => {
+                    const validator = validators.find(v => v.type.toLowerCase() === key.toLowerCase());
+                    if (validator && validator.message) {
+                        return validator.message;
+                    }
+                    // Fallback error messages
+                    if (key === 'required')
+                        return `${this.field().label} is required`;
+                    if (key === 'email')
+                        return 'Please enter a valid email address';
+                    if (key === 'minlength')
+                        return `Minimum length is ${this.control.errors[key].requiredLength}`;
+                    if (key === 'maxlength')
+                        return `Maximum length is ${this.control.errors[key].requiredLength}`;
+                    return `${this.field().label} is invalid due to ${key} validation.`;
+                });
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         this.onChange = () => { };
         this.onTouched = () => { };
         this.fieldFormGroup = this.formBuilder.group({
@@ -163,6 +201,9 @@ class DynamicFormFieldComponent {
         const ngControl = this.injector.get(NgControl, null);
         if (ngControl) {
             this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
+            merge(this.control.statusChanges, this.control.valueChanges)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.controlStateTick.update(tick => tick + 1));
         }
         this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
             this.onChange(value);
@@ -175,7 +216,7 @@ class DynamicFormFieldComponent {
             this.options$ = of(options.defaultValues.map(item => {
                 return {
                     key: item[options.valueProp || 'key'] || item,
-                    value: item[options.labelProp || 'value'] || item
+                    value: item[options.labelProp || 'value'] || item,
                 };
             }));
         }
@@ -185,7 +226,6 @@ class DynamicFormFieldComponent {
     }
     writeValue(value) {
         this.value.setValue(value || '');
-        this.changeDetectorRef.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -200,38 +240,6 @@ class DynamicFormFieldComponent {
         else {
             this.value.enable();
         }
-        this.changeDetectorRef.markForCheck();
-    }
-    get isInvalid() {
-        if (this.control) {
-            return this.control.invalid && (this.control.dirty || this.control.touched);
-        }
-        return false;
-    }
-    get errors() {
-        if (!this.control?.errors)
-            return [];
-        if (this.control && this.control.errors) {
-            const errorKeys = Object.keys(this.control.errors);
-            const validators = this.field().validators || [];
-            return errorKeys.map(key => {
-                const validator = validators.find(v => v.type.toLowerCase() === key.toLowerCase());
-                if (validator && validator.message) {
-                    return validator.message;
-                }
-                // Fallback error messages
-                if (key === 'required')
-                    return `${this.field().label} is required`;
-                if (key === 'email')
-                    return 'Please enter a valid email address';
-                if (key === 'minlength')
-                    return `Minimum length is ${this.control.errors[key].requiredLength}`;
-                if (key === 'maxlength')
-                    return `Maximum length is ${this.control.errors[key].requiredLength}`;
-                return `${this.field().label} is invalid due to ${key} validation.`;
-            });
-        }
-        return [];
     }
     get value() {
         return this.fieldFormGroup.get('value');
@@ -245,24 +253,32 @@ class DynamicFormFieldComponent {
             this.onChange(value);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DynamicFormFieldComponent, isStandalone: true, selector: "abp-dynamic-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "abp-dynamic-form-field" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DynamicFormFieldComponent, isStandalone: true, selector: "abp-dynamic-form-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "abp-dynamic-form-field" }, providers: [
             { provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
             DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR,
-        ], exportAs: ["abpDynamicFormField"], ngImport: i0, template: "@if (visible()) {\r\n<div [formGroup]=\"fieldFormGroup\" role=\"group\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n  \r\n  <!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level -->\r\n  <!-- This component only handles leaf/primitive field types -->\r\n  \r\n  @if (field().type === 'text') {\r\n  <!-- Text Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      [id]=\"fieldId\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'select') {\r\n  <!-- Select Dropdown -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <select \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n      <option value=\"\">{{ '::Select' | abpLocalization }}</option>\r\n      @for (option of options$ | async; track option.key) {\r\n      <option [value]=\"option.key\">\r\n        {{ option.value | abpLocalization }}\r\n      </option>\r\n      }\r\n    </select>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'checkbox') {\r\n  <!-- Checkbox -->\r\n  <div class=\"form-group form-check mb-3\" role=\"group\">\r\n    <abp-checkbox \r\n      [label]=\"field().label | abpLocalization\" \r\n      formControlName=\"value\" \r\n      [id]=\"fieldId\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\" />\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'email') {\r\n  <!-- Email Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"email\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"email\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'textarea') {\r\n  <!-- Textarea -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <textarea \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\" \r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      rows=\"4\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n        </textarea>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'number') {\r\n  <!-- Number Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"number\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.step]=\"field().step || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'date') {\r\n  <!-- Date Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"date\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'datetime-local') {\r\n  <!-- DateTime Local Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"datetime-local\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'time') {\r\n  <!-- Time Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"time\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.step]=\"field().step || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'password') {\r\n  <!-- Password Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"password\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.minlength]=\"field().minLength || null\"\r\n      [attr.maxlength]=\"field().maxLength || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"new-password\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'tel') {\r\n  <!-- Tel Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"tel\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.pattern]=\"field().pattern || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"tel\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'url') {\r\n  <!-- URL Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"url\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"url\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'radio') {\r\n  <!-- Radio Group -->\r\n  <div class=\"form-group mb-3\" role=\"radiogroup\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"radio-group\">\r\n      @for (option of options$ | async; track option.key) {\r\n      <div class=\"form-check\">\r\n        <input \r\n          type=\"radio\" \r\n          [id]=\"fieldId + '-' + option.key\"\r\n          [value]=\"option.key\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid\" \r\n          class=\"form-check-input\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid || null\"\r\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\">\r\n        <label [for]=\"fieldId + '-' + option.key\" class=\"form-check-label\">\r\n          {{ option.value | abpLocalization }}\r\n        </label>\r\n      </div>\r\n      }\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'file') {\r\n  <!-- File Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"file\" \r\n      [id]=\"fieldId\"\r\n      (change)=\"onFileChange($event)\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.accept]=\"field().accept || null\"\r\n      [attr.multiple]=\"field().multiple || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'range') {\r\n  <!-- Range Slider -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <input \r\n        type=\"range\" \r\n        [id]=\"fieldId\"\r\n        formControlName=\"value\"\r\n        [class.is-invalid]=\"isInvalid\" \r\n        class=\"form-range flex-grow-1\"\r\n        [attr.min]=\"field().min || 0\"\r\n        [attr.max]=\"field().max || 100\"\r\n        [attr.step]=\"field().step || 1\"\r\n        [attr.aria-required]=\"field().required || null\"\r\n        [attr.aria-invalid]=\"isInvalid || null\"\r\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n        [attr.aria-label]=\"field().label | abpLocalization\"\r\n        [attr.aria-valuenow]=\"value.value\"\r\n        [attr.aria-valuemin]=\"field().min || 0\"\r\n        [attr.aria-valuemax]=\"field().max || 100\">\r\n      <output [for]=\"fieldId\" class=\"badge bg-primary\">{{ value.value }}</output>\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'color') {\r\n  <!-- Color Picker -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <input \r\n        type=\"color\" \r\n        [id]=\"fieldId\"\r\n        formControlName=\"value\"\r\n        [class.is-invalid]=\"isInvalid\" \r\n        class=\"form-control form-control-color\"\r\n        [attr.aria-required]=\"field().required || null\"\r\n        [attr.aria-invalid]=\"isInvalid || null\"\r\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n        [attr.aria-label]=\"field().label | abpLocalization\">\r\n      <code class=\"text-muted\">{{ value.value || '#000000' }}</code>\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #labelTemplate>\r\n  <label \r\n    [for]=\"fieldId\"\r\n    [id]=\"fieldId + '-label'\"\r\n    [class.required]=\"field().required\">\r\n    {{ field().label | abpLocalization }}\r\n    @if (field().required) {\r\n      <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n    }\r\n  </label>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n  <div \r\n    class=\"invalid-feedback\" \r\n    [id]=\"errorId\"\r\n    role=\"alert\"\r\n    aria-live=\"polite\"\r\n    aria-atomic=\"true\">\r\n    @for (error of errors; track error) {\r\n    <div>{{ error | abpLocalization }}</div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".form-group{display:flex;flex-direction:column}.form-group .radio-group{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormCheckboxComponent, selector: "abp-checkbox", inputs: ["label", "labelClass", "checkboxId", "checkboxStyle", "checkboxClass", "checkboxReadonly"], outputs: ["checkboxBlur", "checkboxFocus"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpDynamicFormField"], ngImport: i0, template: "@if (visible()) {\r\n  <div [formGroup]=\"fieldFormGroup\" role=\"group\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n    <!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level -->\r\n    <!-- This component only handles leaf/primitive field types -->\r\n\r\n    @if (field().type === 'text') {\r\n      <!-- Text Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          [id]=\"fieldId\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'select') {\r\n      <!-- Select Dropdown -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <select\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        >\r\n          <option value=\"\">{{ '::Select' | abpLocalization }}</option>\r\n          @for (option of options$ | async; track option.key) {\r\n            <option [value]=\"option.key\">\r\n              {{ option.value | abpLocalization }}\r\n            </option>\r\n          }\r\n        </select>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'checkbox') {\r\n      <!-- Checkbox -->\r\n      <div class=\"form-group form-check mb-3\" role=\"group\">\r\n        <abp-checkbox\r\n          [label]=\"field().label | abpLocalization\"\r\n          formControlName=\"value\"\r\n          [checkboxId]=\"fieldId\"\r\n          [id]=\"fieldId\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'email') {\r\n      <!-- Email Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"email\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"email\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'textarea') {\r\n      <!-- Textarea -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <textarea\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          rows=\"4\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        >\r\n        </textarea>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'number') {\r\n      <!-- Number Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"number\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.step]=\"field().step || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'date') {\r\n      <!-- Date Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"date\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'datetime-local') {\r\n      <!-- DateTime Local Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"datetime-local\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'time') {\r\n      <!-- Time Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"time\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.step]=\"field().step || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'password') {\r\n      <!-- Password Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"password\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.minlength]=\"field().minLength || null\"\r\n          [attr.maxlength]=\"field().maxLength || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"new-password\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'tel') {\r\n      <!-- Tel Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"tel\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.pattern]=\"field().pattern || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"tel\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'url') {\r\n      <!-- URL Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"url\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"url\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'radio') {\r\n      <!-- Radio Group -->\r\n      <div class=\"form-group mb-3\" role=\"radiogroup\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"radio-group\">\r\n          @for (option of options$ | async; track option.key) {\r\n            <div class=\"form-check\">\r\n              <input\r\n                type=\"radio\"\r\n                [id]=\"fieldId + '-' + option.key\"\r\n                [value]=\"option.key\"\r\n                formControlName=\"value\"\r\n                [class.is-invalid]=\"isInvalid()\"\r\n                class=\"form-check-input\"\r\n                [attr.aria-required]=\"field().required || null\"\r\n                [attr.aria-invalid]=\"isInvalid() || null\"\r\n                [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n              />\r\n              <label [for]=\"fieldId + '-' + option.key\" class=\"form-check-label\">\r\n                {{ option.value | abpLocalization }}\r\n              </label>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'file') {\r\n      <!-- File Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"file\"\r\n          [id]=\"fieldId\"\r\n          (change)=\"onFileChange($event)\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.accept]=\"field().accept || null\"\r\n          [attr.multiple]=\"field().multiple || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'range') {\r\n      <!-- Range Slider -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n          <input\r\n            type=\"range\"\r\n            [id]=\"fieldId\"\r\n            formControlName=\"value\"\r\n            [class.is-invalid]=\"isInvalid()\"\r\n            class=\"form-range flex-grow-1\"\r\n            [attr.min]=\"field().min || 0\"\r\n            [attr.max]=\"field().max || 100\"\r\n            [attr.step]=\"field().step || 1\"\r\n            [attr.aria-required]=\"field().required || null\"\r\n            [attr.aria-invalid]=\"isInvalid() || null\"\r\n            [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n            [attr.aria-label]=\"field().label | abpLocalization\"\r\n            [attr.aria-valuenow]=\"value.value\"\r\n            [attr.aria-valuemin]=\"field().min || 0\"\r\n            [attr.aria-valuemax]=\"field().max || 100\"\r\n          />\r\n          <output [for]=\"fieldId\" class=\"badge bg-primary\">{{ value.value }}</output>\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'color') {\r\n      <!-- Color Picker -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n          <input\r\n            type=\"color\"\r\n            [id]=\"fieldId\"\r\n            formControlName=\"value\"\r\n            [class.is-invalid]=\"isInvalid()\"\r\n            class=\"form-control form-control-color\"\r\n            [attr.aria-required]=\"field().required || null\"\r\n            [attr.aria-invalid]=\"isInvalid() || null\"\r\n            [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n            [attr.aria-label]=\"field().label | abpLocalization\"\r\n          />\r\n          <code class=\"text-muted\">{{ value.value || '#000000' }}</code>\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #labelTemplate>\r\n  <label [for]=\"fieldId\" [id]=\"fieldId + '-label'\" [class.required]=\"field().required\">\r\n    {{ field().label | abpLocalization }}\r\n    @if (field().required) {\r\n      <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n    }\r\n  </label>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n  <div class=\"invalid-feedback\" [id]=\"errorId\" role=\"alert\" aria-live=\"polite\" aria-atomic=\"true\">\r\n    @for (error of errors(); track error) {\r\n      <div>{{ error | abpLocalization }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".form-group{display:flex;flex-direction:column}.form-group .radio-group{display:flex;flex-direction:column;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormCheckboxComponent, selector: "abp-checkbox", inputs: ["label", "labelClass", "checkboxId", "checkboxStyle", "checkboxClass", "checkboxReadonly"], outputs: ["checkboxBlur", "checkboxFocus"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-dynamic-form-field', providers: [
                         { provide: ABP_DYNAMIC_FORM_FIELD, useExisting: DynamicFormFieldComponent },
                         DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR,
-                    ], host: { class: 'abp-dynamic-form-field' }, exportAs: 'abpDynamicFormField', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, LocalizationPipe, ReactiveFormsModule, FormCheckboxComponent, AsyncPipe], template: "@if (visible()) {\r\n<div [formGroup]=\"fieldFormGroup\" role=\"group\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n  \r\n  <!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level -->\r\n  <!-- This component only handles leaf/primitive field types -->\r\n  \r\n  @if (field().type === 'text') {\r\n  <!-- Text Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      [id]=\"fieldId\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'select') {\r\n  <!-- Select Dropdown -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <select \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n      <option value=\"\">{{ '::Select' | abpLocalization }}</option>\r\n      @for (option of options$ | async; track option.key) {\r\n      <option [value]=\"option.key\">\r\n        {{ option.value | abpLocalization }}\r\n      </option>\r\n      }\r\n    </select>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'checkbox') {\r\n  <!-- Checkbox -->\r\n  <div class=\"form-group form-check mb-3\" role=\"group\">\r\n    <abp-checkbox \r\n      [label]=\"field().label | abpLocalization\" \r\n      formControlName=\"value\" \r\n      [id]=\"fieldId\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\" />\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'email') {\r\n  <!-- Email Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"email\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"email\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'textarea') {\r\n  <!-- Textarea -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <textarea \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\" \r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      rows=\"4\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n        </textarea>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'number') {\r\n  <!-- Number Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"number\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.step]=\"field().step || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'date') {\r\n  <!-- Date Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"date\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'datetime-local') {\r\n  <!-- DateTime Local Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"datetime-local\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'time') {\r\n  <!-- Time Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"time\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.min]=\"field().min || null\"\r\n      [attr.max]=\"field().max || null\"\r\n      [attr.step]=\"field().step || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'password') {\r\n  <!-- Password Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"password\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.minlength]=\"field().minLength || null\"\r\n      [attr.maxlength]=\"field().maxLength || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"new-password\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'tel') {\r\n  <!-- Tel Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"tel\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.pattern]=\"field().pattern || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"tel\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'url') {\r\n  <!-- URL Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"url\" \r\n      [id]=\"fieldId\"\r\n      formControlName=\"value\"\r\n      [placeholder]=\"(field().placeholder || '') | abpLocalization\" \r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\"\r\n      autocomplete=\"url\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'radio') {\r\n  <!-- Radio Group -->\r\n  <div class=\"form-group mb-3\" role=\"radiogroup\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"radio-group\">\r\n      @for (option of options$ | async; track option.key) {\r\n      <div class=\"form-check\">\r\n        <input \r\n          type=\"radio\" \r\n          [id]=\"fieldId + '-' + option.key\"\r\n          [value]=\"option.key\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid\" \r\n          class=\"form-check-input\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid || null\"\r\n          [attr.aria-describedby]=\"isInvalid ? errorId : null\">\r\n        <label [for]=\"fieldId + '-' + option.key\" class=\"form-check-label\">\r\n          {{ option.value | abpLocalization }}\r\n        </label>\r\n      </div>\r\n      }\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'file') {\r\n  <!-- File Input -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <input \r\n      type=\"file\" \r\n      [id]=\"fieldId\"\r\n      (change)=\"onFileChange($event)\"\r\n      [class.is-invalid]=\"isInvalid\" \r\n      class=\"form-control\"\r\n      [attr.accept]=\"field().accept || null\"\r\n      [attr.multiple]=\"field().multiple || null\"\r\n      [attr.aria-required]=\"field().required || null\"\r\n      [attr.aria-invalid]=\"isInvalid || null\"\r\n      [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n      [attr.aria-label]=\"field().label | abpLocalization\">\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'range') {\r\n  <!-- Range Slider -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <input \r\n        type=\"range\" \r\n        [id]=\"fieldId\"\r\n        formControlName=\"value\"\r\n        [class.is-invalid]=\"isInvalid\" \r\n        class=\"form-range flex-grow-1\"\r\n        [attr.min]=\"field().min || 0\"\r\n        [attr.max]=\"field().max || 100\"\r\n        [attr.step]=\"field().step || 1\"\r\n        [attr.aria-required]=\"field().required || null\"\r\n        [attr.aria-invalid]=\"isInvalid || null\"\r\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n        [attr.aria-label]=\"field().label | abpLocalization\"\r\n        [attr.aria-valuenow]=\"value.value\"\r\n        [attr.aria-valuemin]=\"field().min || 0\"\r\n        [attr.aria-valuemax]=\"field().max || 100\">\r\n      <output [for]=\"fieldId\" class=\"badge bg-primary\">{{ value.value }}</output>\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  } @else if (field().type === 'color') {\r\n  <!-- Color Picker -->\r\n  <div class=\"form-group mb-3\">\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n    <div class=\"d-flex align-items-center gap-3\">\r\n      <input \r\n        type=\"color\" \r\n        [id]=\"fieldId\"\r\n        formControlName=\"value\"\r\n        [class.is-invalid]=\"isInvalid\" \r\n        class=\"form-control form-control-color\"\r\n        [attr.aria-required]=\"field().required || null\"\r\n        [attr.aria-invalid]=\"isInvalid || null\"\r\n        [attr.aria-describedby]=\"isInvalid ? errorId : null\"\r\n        [attr.aria-label]=\"field().label | abpLocalization\">\r\n      <code class=\"text-muted\">{{ value.value || '#000000' }}</code>\r\n    </div>\r\n    @if (isInvalid) {\r\n    <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n\r\n<ng-template #labelTemplate>\r\n  <label \r\n    [for]=\"fieldId\"\r\n    [id]=\"fieldId + '-label'\"\r\n    [class.required]=\"field().required\">\r\n    {{ field().label | abpLocalization }}\r\n    @if (field().required) {\r\n      <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n    }\r\n  </label>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n  <div \r\n    class=\"invalid-feedback\" \r\n    [id]=\"errorId\"\r\n    role=\"alert\"\r\n    aria-live=\"polite\"\r\n    aria-atomic=\"true\">\r\n    @for (error of errors; track error) {\r\n    <div>{{ error | abpLocalization }}</div>\r\n    }\r\n  </div>\r\n</ng-template>", styles: [".form-group{display:flex;flex-direction:column}.form-group .radio-group{display:flex;flex-direction:column;gap:.5rem}\n"] }]
+                    ], host: { class: 'abp-dynamic-form-field' }, exportAs: 'abpDynamicFormField', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        LocalizationPipe,
+                        ReactiveFormsModule,
+                        FormCheckboxComponent,
+                        AsyncPipe,
+                    ], template: "@if (visible()) {\r\n  <div [formGroup]=\"fieldFormGroup\" role=\"group\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n    <!-- NOTE: Group and Array types are NOT rendered here, they should be rendered at parent level -->\r\n    <!-- This component only handles leaf/primitive field types -->\r\n\r\n    @if (field().type === 'text') {\r\n      <!-- Text Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          [id]=\"fieldId\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'select') {\r\n      <!-- Select Dropdown -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <select\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        >\r\n          <option value=\"\">{{ '::Select' | abpLocalization }}</option>\r\n          @for (option of options$ | async; track option.key) {\r\n            <option [value]=\"option.key\">\r\n              {{ option.value | abpLocalization }}\r\n            </option>\r\n          }\r\n        </select>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'checkbox') {\r\n      <!-- Checkbox -->\r\n      <div class=\"form-group form-check mb-3\" role=\"group\">\r\n        <abp-checkbox\r\n          [label]=\"field().label | abpLocalization\"\r\n          formControlName=\"value\"\r\n          [checkboxId]=\"fieldId\"\r\n          [id]=\"fieldId\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'email') {\r\n      <!-- Email Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"email\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"email\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'textarea') {\r\n      <!-- Textarea -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <textarea\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          rows=\"4\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        >\r\n        </textarea>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'number') {\r\n      <!-- Number Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"number\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.step]=\"field().step || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'date') {\r\n      <!-- Date Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"date\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'datetime-local') {\r\n      <!-- DateTime Local Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"datetime-local\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'time') {\r\n      <!-- Time Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"time\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.min]=\"field().min || null\"\r\n          [attr.max]=\"field().max || null\"\r\n          [attr.step]=\"field().step || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'password') {\r\n      <!-- Password Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"password\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.minlength]=\"field().minLength || null\"\r\n          [attr.maxlength]=\"field().maxLength || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"new-password\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'tel') {\r\n      <!-- Tel Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"tel\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.pattern]=\"field().pattern || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"tel\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'url') {\r\n      <!-- URL Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"url\"\r\n          [id]=\"fieldId\"\r\n          formControlName=\"value\"\r\n          [placeholder]=\"field().placeholder || '' | abpLocalization\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n          autocomplete=\"url\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'radio') {\r\n      <!-- Radio Group -->\r\n      <div class=\"form-group mb-3\" role=\"radiogroup\" [attr.aria-labelledby]=\"fieldId + '-label'\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"radio-group\">\r\n          @for (option of options$ | async; track option.key) {\r\n            <div class=\"form-check\">\r\n              <input\r\n                type=\"radio\"\r\n                [id]=\"fieldId + '-' + option.key\"\r\n                [value]=\"option.key\"\r\n                formControlName=\"value\"\r\n                [class.is-invalid]=\"isInvalid()\"\r\n                class=\"form-check-input\"\r\n                [attr.aria-required]=\"field().required || null\"\r\n                [attr.aria-invalid]=\"isInvalid() || null\"\r\n                [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n              />\r\n              <label [for]=\"fieldId + '-' + option.key\" class=\"form-check-label\">\r\n                {{ option.value | abpLocalization }}\r\n              </label>\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'file') {\r\n      <!-- File Input -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <input\r\n          type=\"file\"\r\n          [id]=\"fieldId\"\r\n          (change)=\"onFileChange($event)\"\r\n          [class.is-invalid]=\"isInvalid()\"\r\n          class=\"form-control\"\r\n          [attr.accept]=\"field().accept || null\"\r\n          [attr.multiple]=\"field().multiple || null\"\r\n          [attr.aria-required]=\"field().required || null\"\r\n          [attr.aria-invalid]=\"isInvalid() || null\"\r\n          [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n          [attr.aria-label]=\"field().label | abpLocalization\"\r\n        />\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'range') {\r\n      <!-- Range Slider -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n          <input\r\n            type=\"range\"\r\n            [id]=\"fieldId\"\r\n            formControlName=\"value\"\r\n            [class.is-invalid]=\"isInvalid()\"\r\n            class=\"form-range flex-grow-1\"\r\n            [attr.min]=\"field().min || 0\"\r\n            [attr.max]=\"field().max || 100\"\r\n            [attr.step]=\"field().step || 1\"\r\n            [attr.aria-required]=\"field().required || null\"\r\n            [attr.aria-invalid]=\"isInvalid() || null\"\r\n            [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n            [attr.aria-label]=\"field().label | abpLocalization\"\r\n            [attr.aria-valuenow]=\"value.value\"\r\n            [attr.aria-valuemin]=\"field().min || 0\"\r\n            [attr.aria-valuemax]=\"field().max || 100\"\r\n          />\r\n          <output [for]=\"fieldId\" class=\"badge bg-primary\">{{ value.value }}</output>\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    } @else if (field().type === 'color') {\r\n      <!-- Color Picker -->\r\n      <div class=\"form-group mb-3\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\" />\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n          <input\r\n            type=\"color\"\r\n            [id]=\"fieldId\"\r\n            formControlName=\"value\"\r\n            [class.is-invalid]=\"isInvalid()\"\r\n            class=\"form-control form-control-color\"\r\n            [attr.aria-required]=\"field().required || null\"\r\n            [attr.aria-invalid]=\"isInvalid() || null\"\r\n            [attr.aria-describedby]=\"isInvalid() ? errorId : null\"\r\n            [attr.aria-label]=\"field().label | abpLocalization\"\r\n          />\r\n          <code class=\"text-muted\">{{ value.value || '#000000' }}</code>\r\n        </div>\r\n        @if (isInvalid()) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\" />\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n\r\n<ng-template #labelTemplate>\r\n  <label [for]=\"fieldId\" [id]=\"fieldId + '-label'\" [class.required]=\"field().required\">\r\n    {{ field().label | abpLocalization }}\r\n    @if (field().required) {\r\n      <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n    }\r\n  </label>\r\n</ng-template>\r\n\r\n<ng-template #errorTemplate>\r\n  <div class=\"invalid-feedback\" [id]=\"errorId\" role=\"alert\" aria-live=\"polite\" aria-atomic=\"true\">\r\n    @for (error of errors(); track error) {\r\n      <div>{{ error | abpLocalization }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n", styles: [".form-group{display:flex;flex-direction:column}.form-group .radio-group{display:flex;flex-direction:column;gap:.5rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
 
 class DynamicFieldHostComponent {
     constructor() {
-        this.component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : /* istanbul ignore next */ []));
-        this.inputs = input({}, ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
+        this.component = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "component" }] : /* istanbul ignore next */ []));
+        this.inputs = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
         this.viewContainerRef = viewChild.required('vcRef', { read: ViewContainerRef });
         this.disabled = false;
         // if child has not implemented ControlValueAccessor. Create form control
@@ -349,14 +365,14 @@ class DynamicFieldHostComponent {
             isDisabled ? inst.formControl.disable({ emitEvent: false }) : inst.formControl.enable({ emitEvent: false });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFieldHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DynamicFieldHostComponent, isStandalone: true, selector: "abp-dynamic-form-field-host", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFieldHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: DynamicFieldHostComponent, isStandalone: true, selector: "abp-dynamic-form-field-host", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DynamicFieldHostComponent),
                 multi: true
             }], viewQueries: [{ propertyName: "viewContainerRef", first: true, predicate: ["vcRef"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `<ng-template #vcRef></ng-template>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFieldHostComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFieldHostComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'abp-dynamic-form-field-host',
@@ -373,12 +389,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class DynamicFormArrayComponent {
     constructor() {
-        this.arrayConfig = input.required(...(ngDevMode ? [{ debugName: "arrayConfig" }] : /* istanbul ignore next */ []));
-        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
-        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.arrayConfig = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "arrayConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.visible = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
         this.fb = inject(FormBuilder);
         this.dynamicFormService = inject(DynamicFormService);
-        this.cdr = inject(ChangeDetectorRef);
+        this.formArrayVersion = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formArrayVersion" }] : /* istanbul ignore next */ []));
     }
     get formArray() {
         return this.formGroup().get(this.arrayConfig().key);
@@ -400,13 +420,13 @@ class DynamicFormArrayComponent {
             return;
         const itemGroup = this.dynamicFormService.createFormGroup(this.arrayConfig().children || []);
         this.formArray.push(itemGroup);
-        this.cdr.markForCheck();
+        this.formArrayVersion.update(version => version + 1);
     }
     removeItem(index) {
         if (!this.canRemoveItem)
             return;
         this.formArray.removeAt(index);
-        this.cdr.markForCheck();
+        this.formArrayVersion.update(version => version + 1);
     }
     getItemFormGroup(index) {
         return this.formArray.at(index);
@@ -417,10 +437,10 @@ class DynamicFormArrayComponent {
     trackByIndex(index) {
         return index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DynamicFormArrayComponent, isStandalone: true, selector: "abp-dynamic-form-array", inputs: { arrayConfig: { classPropertyName: "arrayConfig", publicName: "arrayConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n  <div class=\"form-array-container\" role=\"region\" [attr.aria-label]=\"arrayConfig().label | abpLocalization\">\r\n    \r\n    <!-- Header with Add Button -->\r\n    <div class=\"array-header d-flex justify-content-between align-items-center mb-3\">\r\n      <label class=\"form-array-label\">\r\n        {{ arrayConfig().label | abpLocalization }}\r\n        @if (arrayConfig().required) {\r\n          <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n        }\r\n      </label>\r\n      <button \r\n        type=\"button\" \r\n        class=\"btn btn-sm btn-primary\"\r\n        (click)=\"addItem()\"\r\n        [disabled]=\"!canAddItem\"\r\n        [attr.aria-label]=\"'Add ' + (arrayConfig().label | abpLocalization)\">\r\n        <i class=\"fa fa-plus me-1\"></i>\r\n        {{ '::Add' | abpLocalization }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Array Items -->\r\n    <div class=\"array-items\" role=\"list\">\r\n      @for (item of formArray.controls; track trackByIndex($index)) {\r\n        <div class=\"array-item border rounded p-3 mb-3\" role=\"listitem\" [formGroup]=\"getItemFormGroup($index)\">\r\n          \r\n          <!-- Item Header -->\r\n          <div class=\"item-header d-flex justify-content-between align-items-center mb-3\">\r\n            <strong class=\"item-title\">\r\n              {{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }}\r\n            </strong>\r\n            <button \r\n              type=\"button\" \r\n              class=\"btn btn-sm btn-danger\"\r\n              (click)=\"removeItem($index)\"\r\n              [disabled]=\"!canRemoveItem\"\r\n              [attr.aria-label]=\"'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)\">\r\n              <i class=\"fa fa-trash me-1\"></i>\r\n              {{ '::Remove' | abpLocalization }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Item Fields -->\r\n          <div class=\"row\">\r\n            @for (field of sortedChildren; track field.key) {\r\n              <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n                \r\n                <!-- Nested Group -->\r\n                @if (field.type === 'group') {\r\n                  <abp-dynamic-form-group\r\n                    [groupConfig]=\"field\"\r\n                    [formGroup]=\"getNestedFormGroup($index, field.key)\" />\r\n                }\r\n                \r\n                <!-- Nested Array (recursive) -->\r\n                @else if (field.type === 'array') {\r\n                  <abp-dynamic-form-array\r\n                    [arrayConfig]=\"field\"\r\n                    [formGroup]=\"getItemFormGroup($index)\" />\r\n                }\r\n                \r\n                <!-- Regular Field -->\r\n                @else {\r\n                  <abp-dynamic-form-field\r\n                    [field]=\"field\"\r\n                    [formControlName]=\"field.key\" />\r\n                }\r\n                \r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @empty {\r\n        <div class=\"alert alert-info\" role=\"status\">\r\n          <i class=\"fa fa-info-circle me-2\"></i>\r\n          {{ '::NoItemsAdded' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Item Count -->\r\n    <div class=\"array-footer text-muted small\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ formArray.length }} {{ '::Items' | abpLocalization }}\r\n      @if (arrayConfig().minItems) {\r\n        ({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }})\r\n      }\r\n      @if (arrayConfig().maxItems) {\r\n        ({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }})\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".form-array-container{margin-bottom:1.5rem}.array-header{border-bottom:2px solid var(--bs-primary, #007bff);padding-bottom:.5rem}.form-array-label{font-size:1.1rem;font-weight:600;color:var(--bs-dark, #212529);margin-bottom:0}.array-items{margin-top:1rem}.array-item{background-color:var(--bs-white, #fff);transition:all .2s ease;position:relative}.array-item:hover{box-shadow:0 .125rem .25rem #00000013;transform:translateY(-1px)}.array-item .array-item{background-color:var(--bs-light, #f8f9fa)}.item-header{border-bottom:1px solid var(--bs-border-color, #dee2e6);padding-bottom:.75rem}.item-title{color:var(--bs-primary, #007bff);font-size:.95rem}.array-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bs-border-color, #dee2e6)}button:focus-visible{outline:2px solid var(--bs-primary, #007bff);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.array-item{animation:slideIn .3s ease}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DynamicFormArrayComponent, isStandalone: true, selector: "abp-dynamic-form-array", inputs: { arrayConfig: { classPropertyName: "arrayConfig", publicName: "arrayConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n  <div class=\"form-array-container\" role=\"region\" [attr.aria-label]=\"arrayConfig().label | abpLocalization\">\r\n    \r\n    <!-- Header with Add Button -->\r\n    <div class=\"array-header d-flex justify-content-between align-items-center mb-3\">\r\n      <label class=\"form-array-label\">\r\n        {{ arrayConfig().label | abpLocalization }}\r\n        @if (arrayConfig().required) {\r\n          <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n        }\r\n      </label>\r\n      <button \r\n        type=\"button\" \r\n        class=\"btn btn-sm btn-primary\"\r\n        (click)=\"addItem()\"\r\n        [disabled]=\"!canAddItem\"\r\n        [attr.aria-label]=\"'Add ' + (arrayConfig().label | abpLocalization)\">\r\n        <i class=\"fa fa-plus me-1\"></i>\r\n        {{ '::Add' | abpLocalization }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Array Items -->\r\n    <div class=\"array-items\" role=\"list\">\r\n      @for (item of formArray.controls; track $index + '-' + formArrayVersion()) {\r\n        <div class=\"array-item border rounded p-3 mb-3\" role=\"listitem\" [formGroup]=\"getItemFormGroup($index)\">\r\n          \r\n          <!-- Item Header -->\r\n          <div class=\"item-header d-flex justify-content-between align-items-center mb-3\">\r\n            <strong class=\"item-title\">\r\n              {{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }}\r\n            </strong>\r\n            <button \r\n              type=\"button\" \r\n              class=\"btn btn-sm btn-danger\"\r\n              (click)=\"removeItem($index)\"\r\n              [disabled]=\"!canRemoveItem\"\r\n              [attr.aria-label]=\"'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)\">\r\n              <i class=\"fa fa-trash me-1\"></i>\r\n              {{ '::Remove' | abpLocalization }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Item Fields -->\r\n          <div class=\"row\">\r\n            @for (field of sortedChildren; track field.key) {\r\n              <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n                \r\n                <!-- Nested Group -->\r\n                @if (field.type === 'group') {\r\n                  <abp-dynamic-form-group\r\n                    [groupConfig]=\"field\"\r\n                    [formGroup]=\"getNestedFormGroup($index, field.key)\" />\r\n                }\r\n                \r\n                <!-- Nested Array (recursive) -->\r\n                @else if (field.type === 'array') {\r\n                  <abp-dynamic-form-array\r\n                    [arrayConfig]=\"field\"\r\n                    [formGroup]=\"getItemFormGroup($index)\" />\r\n                }\r\n                \r\n                <!-- Regular Field -->\r\n                @else {\r\n                  <abp-dynamic-form-field\r\n                    [field]=\"field\"\r\n                    [formControlName]=\"field.key\" />\r\n                }\r\n                \r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @empty {\r\n        <div class=\"alert alert-info\" role=\"status\">\r\n          <i class=\"fa fa-info-circle me-2\"></i>\r\n          {{ '::NoItemsAdded' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Item Count -->\r\n    <div class=\"array-footer text-muted small\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ formArray.length }} {{ '::Items' | abpLocalization }}\r\n      @if (arrayConfig().minItems) {\r\n        ({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }})\r\n      }\r\n      @if (arrayConfig().maxItems) {\r\n        ({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }})\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".form-array-container{margin-bottom:1.5rem}.array-header{border-bottom:2px solid var(--bs-primary, #007bff);padding-bottom:.5rem}.form-array-label{font-size:1.1rem;font-weight:600;color:var(--bs-dark, #212529);margin-bottom:0}.array-items{margin-top:1rem}.array-item{background-color:var(--bs-white, #fff);transition:all .2s ease;position:relative}.array-item:hover{box-shadow:0 .125rem .25rem #00000013;transform:translateY(-1px)}.array-item .array-item{background-color:var(--bs-light, #f8f9fa)}.item-header{border-bottom:1px solid var(--bs-border-color, #dee2e6);padding-bottom:.75rem}.item-title{color:var(--bs-primary, #007bff);font-size:.95rem}.array-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bs-border-color, #dee2e6)}button:focus-visible{outline:2px solid var(--bs-primary, #007bff);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.array-item{animation:slideIn .3s ease}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-dynamic-form-array', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -429,14 +449,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         DynamicFormFieldComponent,
                         DynamicFormGroupComponent,
                         forwardRef(() => DynamicFormArrayComponent), // Self reference for recursion
-                    ], template: "@if (visible()) {\r\n  <div class=\"form-array-container\" role=\"region\" [attr.aria-label]=\"arrayConfig().label | abpLocalization\">\r\n    \r\n    <!-- Header with Add Button -->\r\n    <div class=\"array-header d-flex justify-content-between align-items-center mb-3\">\r\n      <label class=\"form-array-label\">\r\n        {{ arrayConfig().label | abpLocalization }}\r\n        @if (arrayConfig().required) {\r\n          <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n        }\r\n      </label>\r\n      <button \r\n        type=\"button\" \r\n        class=\"btn btn-sm btn-primary\"\r\n        (click)=\"addItem()\"\r\n        [disabled]=\"!canAddItem\"\r\n        [attr.aria-label]=\"'Add ' + (arrayConfig().label | abpLocalization)\">\r\n        <i class=\"fa fa-plus me-1\"></i>\r\n        {{ '::Add' | abpLocalization }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Array Items -->\r\n    <div class=\"array-items\" role=\"list\">\r\n      @for (item of formArray.controls; track trackByIndex($index)) {\r\n        <div class=\"array-item border rounded p-3 mb-3\" role=\"listitem\" [formGroup]=\"getItemFormGroup($index)\">\r\n          \r\n          <!-- Item Header -->\r\n          <div class=\"item-header d-flex justify-content-between align-items-center mb-3\">\r\n            <strong class=\"item-title\">\r\n              {{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }}\r\n            </strong>\r\n            <button \r\n              type=\"button\" \r\n              class=\"btn btn-sm btn-danger\"\r\n              (click)=\"removeItem($index)\"\r\n              [disabled]=\"!canRemoveItem\"\r\n              [attr.aria-label]=\"'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)\">\r\n              <i class=\"fa fa-trash me-1\"></i>\r\n              {{ '::Remove' | abpLocalization }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Item Fields -->\r\n          <div class=\"row\">\r\n            @for (field of sortedChildren; track field.key) {\r\n              <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n                \r\n                <!-- Nested Group -->\r\n                @if (field.type === 'group') {\r\n                  <abp-dynamic-form-group\r\n                    [groupConfig]=\"field\"\r\n                    [formGroup]=\"getNestedFormGroup($index, field.key)\" />\r\n                }\r\n                \r\n                <!-- Nested Array (recursive) -->\r\n                @else if (field.type === 'array') {\r\n                  <abp-dynamic-form-array\r\n                    [arrayConfig]=\"field\"\r\n                    [formGroup]=\"getItemFormGroup($index)\" />\r\n                }\r\n                \r\n                <!-- Regular Field -->\r\n                @else {\r\n                  <abp-dynamic-form-field\r\n                    [field]=\"field\"\r\n                    [formControlName]=\"field.key\" />\r\n                }\r\n                \r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @empty {\r\n        <div class=\"alert alert-info\" role=\"status\">\r\n          <i class=\"fa fa-info-circle me-2\"></i>\r\n          {{ '::NoItemsAdded' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Item Count -->\r\n    <div class=\"array-footer text-muted small\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ formArray.length }} {{ '::Items' | abpLocalization }}\r\n      @if (arrayConfig().minItems) {\r\n        ({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }})\r\n      }\r\n      @if (arrayConfig().maxItems) {\r\n        ({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }})\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".form-array-container{margin-bottom:1.5rem}.array-header{border-bottom:2px solid var(--bs-primary, #007bff);padding-bottom:.5rem}.form-array-label{font-size:1.1rem;font-weight:600;color:var(--bs-dark, #212529);margin-bottom:0}.array-items{margin-top:1rem}.array-item{background-color:var(--bs-white, #fff);transition:all .2s ease;position:relative}.array-item:hover{box-shadow:0 .125rem .25rem #00000013;transform:translateY(-1px)}.array-item .array-item{background-color:var(--bs-light, #f8f9fa)}.item-header{border-bottom:1px solid var(--bs-border-color, #dee2e6);padding-bottom:.75rem}.item-title{color:var(--bs-primary, #007bff);font-size:.95rem}.array-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bs-border-color, #dee2e6)}button:focus-visible{outline:2px solid var(--bs-primary, #007bff);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.array-item{animation:slideIn .3s ease}\n"] }]
+                    ], template: "@if (visible()) {\r\n  <div class=\"form-array-container\" role=\"region\" [attr.aria-label]=\"arrayConfig().label | abpLocalization\">\r\n    \r\n    <!-- Header with Add Button -->\r\n    <div class=\"array-header d-flex justify-content-between align-items-center mb-3\">\r\n      <label class=\"form-array-label\">\r\n        {{ arrayConfig().label | abpLocalization }}\r\n        @if (arrayConfig().required) {\r\n          <span class=\"text-danger\" aria-label=\"required\">*</span>\r\n        }\r\n      </label>\r\n      <button \r\n        type=\"button\" \r\n        class=\"btn btn-sm btn-primary\"\r\n        (click)=\"addItem()\"\r\n        [disabled]=\"!canAddItem\"\r\n        [attr.aria-label]=\"'Add ' + (arrayConfig().label | abpLocalization)\">\r\n        <i class=\"fa fa-plus me-1\"></i>\r\n        {{ '::Add' | abpLocalization }}\r\n      </button>\r\n    </div>\r\n\r\n    <!-- Array Items -->\r\n    <div class=\"array-items\" role=\"list\">\r\n      @for (item of formArray.controls; track $index + '-' + formArrayVersion()) {\r\n        <div class=\"array-item border rounded p-3 mb-3\" role=\"listitem\" [formGroup]=\"getItemFormGroup($index)\">\r\n          \r\n          <!-- Item Header -->\r\n          <div class=\"item-header d-flex justify-content-between align-items-center mb-3\">\r\n            <strong class=\"item-title\">\r\n              {{ arrayConfig().label | abpLocalization }} #{{ $index + 1 }}\r\n            </strong>\r\n            <button \r\n              type=\"button\" \r\n              class=\"btn btn-sm btn-danger\"\r\n              (click)=\"removeItem($index)\"\r\n              [disabled]=\"!canRemoveItem\"\r\n              [attr.aria-label]=\"'Remove ' + (arrayConfig().label | abpLocalization) + ' #' + ($index + 1)\">\r\n              <i class=\"fa fa-trash me-1\"></i>\r\n              {{ '::Remove' | abpLocalization }}\r\n            </button>\r\n          </div>\r\n\r\n          <!-- Item Fields -->\r\n          <div class=\"row\">\r\n            @for (field of sortedChildren; track field.key) {\r\n              <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n                \r\n                <!-- Nested Group -->\r\n                @if (field.type === 'group') {\r\n                  <abp-dynamic-form-group\r\n                    [groupConfig]=\"field\"\r\n                    [formGroup]=\"getNestedFormGroup($index, field.key)\" />\r\n                }\r\n                \r\n                <!-- Nested Array (recursive) -->\r\n                @else if (field.type === 'array') {\r\n                  <abp-dynamic-form-array\r\n                    [arrayConfig]=\"field\"\r\n                    [formGroup]=\"getItemFormGroup($index)\" />\r\n                }\r\n                \r\n                <!-- Regular Field -->\r\n                @else {\r\n                  <abp-dynamic-form-field\r\n                    [field]=\"field\"\r\n                    [formControlName]=\"field.key\" />\r\n                }\r\n                \r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n      } @empty {\r\n        <div class=\"alert alert-info\" role=\"status\">\r\n          <i class=\"fa fa-info-circle me-2\"></i>\r\n          {{ '::NoItemsAdded' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <!-- Item Count -->\r\n    <div class=\"array-footer text-muted small\" aria-live=\"polite\" aria-atomic=\"true\">\r\n      {{ formArray.length }} {{ '::Items' | abpLocalization }}\r\n      @if (arrayConfig().minItems) {\r\n        ({{ '::Min' | abpLocalization }}: {{ arrayConfig().minItems }})\r\n      }\r\n      @if (arrayConfig().maxItems) {\r\n        ({{ '::Max' | abpLocalization }}: {{ arrayConfig().maxItems }})\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".form-array-container{margin-bottom:1.5rem}.array-header{border-bottom:2px solid var(--bs-primary, #007bff);padding-bottom:.5rem}.form-array-label{font-size:1.1rem;font-weight:600;color:var(--bs-dark, #212529);margin-bottom:0}.array-items{margin-top:1rem}.array-item{background-color:var(--bs-white, #fff);transition:all .2s ease;position:relative}.array-item:hover{box-shadow:0 .125rem .25rem #00000013;transform:translateY(-1px)}.array-item .array-item{background-color:var(--bs-light, #f8f9fa)}.item-header{border-bottom:1px solid var(--bs-border-color, #dee2e6);padding-bottom:.75rem}.item-title{color:var(--bs-primary, #007bff);font-size:.95rem}.array-footer{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bs-border-color, #dee2e6)}button:focus-visible{outline:2px solid var(--bs-primary, #007bff);outline-offset:2px}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.array-item{animation:slideIn .3s ease}\n"] }]
         }], propDecorators: { arrayConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrayConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
 
 class DynamicFormGroupComponent {
     constructor() {
-        this.groupConfig = input.required(...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
-        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
-        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.groupConfig = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupConfig" }] : /* istanbul ignore next */ []));
+        this.formGroup = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+        this.visible = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     }
     get sortedChildren() {
         const children = this.groupConfig().children || [];
@@ -448,10 +471,10 @@ class DynamicFormGroupComponent {
     getChildControl(key) {
         return this.formGroup().get(key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DynamicFormGroupComponent, isStandalone: true, selector: "abp-dynamic-form-group", inputs: { groupConfig: { classPropertyName: "groupConfig", publicName: "groupConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n  <fieldset class=\"form-group-container\" [formGroup]=\"formGroup()\" role=\"group\" [attr.aria-labelledby]=\"groupConfig().key + '-legend'\">\r\n    <legend [id]=\"groupConfig().key + '-legend'\" class=\"form-group-legend\">\r\n      {{ groupConfig().label | abpLocalization }}\r\n    </legend>\r\n    \r\n    <div class=\"row\">\r\n      @for (field of sortedChildren; track field.key) {\r\n        <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n          \r\n          <!-- Nested Group (Recursive) -->\r\n          @if (field.type === 'group') {\r\n            <abp-dynamic-form-group\r\n              [groupConfig]=\"field\"\r\n              [formGroup]=\"getChildFormGroup(field.key)\" />\r\n          }\r\n          \r\n          <!-- Nested Array -->\r\n          @else if (field.type === 'array') {\r\n            <abp-dynamic-form-array\r\n              [arrayConfig]=\"field\"\r\n              [formGroup]=\"formGroup()\" />\r\n          }\r\n          \r\n          <!-- Regular Field -->\r\n          @else {\r\n            <abp-dynamic-form-field\r\n              [field]=\"field\"\r\n              [formControlName]=\"field.key\" />\r\n          }\r\n          \r\n        </div>\r\n      }\r\n    </div>\r\n  </fieldset>\r\n}\r\n", styles: [".form-group-container{border-left:3px solid var(--bs-primary, #007bff);padding-left:1rem;margin-bottom:1.5rem;border:1px solid var(--bs-border-color, #dee2e6);border-radius:.375rem;padding:1rem;background-color:var(--bs-light, #f8f9fa)}.form-group-container .form-group-container{border-left-color:var(--bs-secondary, #6c757d);padding-left:.75rem;background-color:var(--bs-white, #fff)}.form-group-legend{font-size:1.1rem;font-weight:600;color:var(--bs-primary, #007bff);margin-bottom:1rem;padding:0 .5rem;float:none;width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DynamicFormGroupComponent, isStandalone: true, selector: "abp-dynamic-form-group", inputs: { groupConfig: { classPropertyName: "groupConfig", publicName: "groupConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visible()) {\r\n  <fieldset class=\"form-group-container\" [formGroup]=\"formGroup()\" role=\"group\" [attr.aria-labelledby]=\"groupConfig().key + '-legend'\">\r\n    <legend [id]=\"groupConfig().key + '-legend'\" class=\"form-group-legend\">\r\n      {{ groupConfig().label | abpLocalization }}\r\n    </legend>\r\n    \r\n    <div class=\"row\">\r\n      @for (field of sortedChildren; track field.key) {\r\n        <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n          \r\n          <!-- Nested Group (Recursive) -->\r\n          @if (field.type === 'group') {\r\n            <abp-dynamic-form-group\r\n              [groupConfig]=\"field\"\r\n              [formGroup]=\"getChildFormGroup(field.key)\" />\r\n          }\r\n          \r\n          <!-- Nested Array -->\r\n          @else if (field.type === 'array') {\r\n            <abp-dynamic-form-array\r\n              [arrayConfig]=\"field\"\r\n              [formGroup]=\"formGroup()\" />\r\n          }\r\n          \r\n          <!-- Regular Field -->\r\n          @else {\r\n            <abp-dynamic-form-field\r\n              [field]=\"field\"\r\n              [formControlName]=\"field.key\" />\r\n          }\r\n          \r\n        </div>\r\n      }\r\n    </div>\r\n  </fieldset>\r\n}\r\n", styles: [".form-group-container{border-left:3px solid var(--bs-primary, #007bff);padding-left:1rem;margin-bottom:1.5rem;border:1px solid var(--bs-border-color, #dee2e6);border-radius:.375rem;padding:1rem;background-color:var(--bs-light, #f8f9fa)}.form-group-container .form-group-container{border-left-color:var(--bs-secondary, #6c757d);padding-left:.75rem;background-color:var(--bs-white, #fff)}.form-group-legend{font-size:1.1rem;font-weight:600;color:var(--bs-primary, #007bff);margin-bottom:1rem;padding:0 .5rem;float:none;width:auto}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => DynamicFormGroupComponent), selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i2.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i2.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i2.FormControlName), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormFieldComponent), selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: i0.forwardRef(() => DynamicFormArrayComponent), selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "pipe", type: i0.forwardRef(() => LocalizationPipe), name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-dynamic-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -465,17 +488,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class DynamicFormComponent {
     constructor() {
-        this.fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
-        this.values = input(...(ngDevMode ? [undefined, { debugName: "values" }] : /* istanbul ignore next */ []));
-        this.submitButtonText = input('Submit', ...(ngDevMode ? [{ debugName: "submitButtonText" }] : /* istanbul ignore next */ []));
-        this.submitInProgress = input(false, ...(ngDevMode ? [{ debugName: "submitInProgress" }] : /* istanbul ignore next */ []));
-        this.showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : /* istanbul ignore next */ []));
+        this.fields = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        this.values = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "values" }] : /* istanbul ignore next */ []));
+        this.submitButtonText = input('Submit', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submitButtonText" }] : /* istanbul ignore next */ []));
+        this.submitInProgress = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "submitInProgress" }] : /* istanbul ignore next */ []));
+        this.showCancelButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showCancelButton" }] : /* istanbul ignore next */ []));
         this.onSubmit = output();
         this.formCancel = output();
         this.dynamicFormService = inject(DynamicFormService);
         this.destroyRef = inject(DestroyRef);
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.fieldVisibility = {};
+        this.fieldVisibility = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldVisibility" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.setupFormAndLogic();
@@ -499,7 +527,7 @@ class DynamicFormComponent {
         this.evaluateConditionalLogic(event.fieldKey);
     }
     isFieldVisible(field) {
-        return this.fieldVisibility[field.key] !== false;
+        return this.fieldVisibility()[field.key] !== false;
     }
     getChildFormGroup(key) {
         return this.dynamicForm.get(key);
@@ -509,15 +537,13 @@ class DynamicFormComponent {
         this.dynamicForm.reset({ ...initialValues });
         this.dynamicForm.markAsUntouched();
         this.dynamicForm.markAsPristine();
-        this.changeDetectorRef.markForCheck();
     }
     initializeFieldVisibility() {
+        const visibility = {};
         this.fields().forEach(field => {
-            this.fieldVisibility = {
-                ...this.fieldVisibility,
-                [field.key]: !field.conditionalLogic?.length,
-            };
+            visibility[field.key] = !field.conditionalLogic?.length;
         });
+        this.fieldVisibility.set(visibility);
     }
     setupConditionalLogic() {
         this.fields().forEach(field => {
@@ -566,10 +592,10 @@ class DynamicFormComponent {
         const control = this.dynamicForm.get(fieldKey);
         switch (action) {
             case ConditionalAction.SHOW:
-                this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: shouldApply };
+                this.fieldVisibility.update(visibility => ({ ...visibility, [fieldKey]: shouldApply }));
                 break;
             case ConditionalAction.HIDE:
-                this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: !shouldApply };
+                this.fieldVisibility.update(visibility => ({ ...visibility, [fieldKey]: !shouldApply }));
                 break;
             case ConditionalAction.ENABLE:
                 if (control) {
@@ -587,7 +613,6 @@ class DynamicFormComponent {
         this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields());
         this.initializeFieldVisibility();
         this.setupConditionalLogic();
-        this.changeDetectorRef.markForCheck();
     }
     markAllFieldsAsTouched() {
         Object.keys(this.dynamicForm.controls).forEach(key => {
@@ -610,10 +635,10 @@ class DynamicFormComponent {
             }, 100);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DynamicFormComponent, isStandalone: true, selector: "abp-dynamic-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, submitButtonText: { classPropertyName: "submitButtonText", publicName: "submitButtonText", isSignal: true, isRequired: false, transformFunction: null }, submitInProgress: { classPropertyName: "submitInProgress", publicName: "submitInProgress", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", formCancel: "formCancel" }, host: { classAttribute: "abp-dynamic-form" }, exportAs: ["abpDynamicForm"], ngImport: i0, template: "<div class=\"form-wrapper\">\r\n<form \r\n  [formGroup]=\"dynamicForm\" \r\n  (ngSubmit)=\"submit()\" \r\n  class=\"dynamic-form\"\r\n  role=\"form\"\r\n  [attr.aria-label]=\"'Dynamic Form'\">\r\n  <div class=\"row\" role=\"group\">\r\n    @for (field of sortedFields; track field.key) {\r\n        <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n          \r\n          <!-- Custom Component -->\r\n          @if (field.component) {\r\n            <abp-dynamic-form-field-host\r\n              [component]=\"field.component\"\r\n              [inputs]=\"{ field: field, visible: isFieldVisible(field) }\"\r\n              formControlName=\"{{ field.key }}\">\r\n            </abp-dynamic-form-field-host>\r\n          }\r\n          \r\n          <!-- Nested Group -->\r\n          @else if (field.type === 'group') {\r\n            <abp-dynamic-form-group\r\n              [groupConfig]=\"field\"\r\n              [formGroup]=\"getChildFormGroup(field.key)\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-group>\r\n          }\r\n          \r\n          <!-- Nested Array -->\r\n          @else if (field.type === 'array') {\r\n            <abp-dynamic-form-array\r\n              [arrayConfig]=\"field\"\r\n              [formGroup]=\"dynamicForm\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-array>\r\n          }\r\n          \r\n          <!-- Regular Field -->\r\n          @else {\r\n            <abp-dynamic-form-field\r\n              [field]=\"field\"\r\n              [formControlName]=\"field.key\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-field>\r\n          }\r\n          \r\n        </div>\r\n    }\r\n  </div>\r\n  <ng-content select=\"[actions]\">\r\n    <ng-container [ngTemplateOutlet]=\"defaultActions\"></ng-container>\r\n  </ng-content>\r\n\r\n</form>\r\n\r\n<ng-template #defaultActions>\r\n  <div class=\"form-actions\" role=\"group\" aria-label=\"Form actions\">\r\n    @if (showCancelButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"onCancel()\"\r\n        aria-label=\"Cancel form\">\r\n        Cancel\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      class=\"btn btn-primary\"\r\n      [disabled]=\"!dynamicForm.valid || submitInProgress()\"\r\n      [attr.aria-busy]=\"submitInProgress() || null\"\r\n      [attr.aria-label]=\"submitInProgress() ? 'Submitting form...' : submitButtonText()\">\r\n      {{ submitButtonText() }}\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n</div>\r\n", styles: [":host(.abp-dynamic-form) form{display:flex;flex-direction:column;gap:.5rem}:host(.abp-dynamic-form) .form-wrapper{text-align:left}.form-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: DynamicFormGroupComponent, selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "component", type: DynamicFormArrayComponent, selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DynamicFieldHostComponent, selector: "abp-dynamic-form-field-host", inputs: ["component", "inputs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DynamicFormComponent, isStandalone: true, selector: "abp-dynamic-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, submitButtonText: { classPropertyName: "submitButtonText", publicName: "submitButtonText", isSignal: true, isRequired: false, transformFunction: null }, submitInProgress: { classPropertyName: "submitInProgress", publicName: "submitInProgress", isSignal: true, isRequired: false, transformFunction: null }, showCancelButton: { classPropertyName: "showCancelButton", publicName: "showCancelButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", formCancel: "formCancel" }, host: { classAttribute: "abp-dynamic-form" }, exportAs: ["abpDynamicForm"], ngImport: i0, template: "<div class=\"form-wrapper\">\r\n<form \r\n  [formGroup]=\"dynamicForm\" \r\n  (ngSubmit)=\"submit()\" \r\n  class=\"dynamic-form\"\r\n  role=\"form\"\r\n  [attr.aria-label]=\"'Dynamic Form'\">\r\n  <div class=\"row\" role=\"group\">\r\n    @for (field of sortedFields; track field.key) {\r\n        <div [ngClass]=\"'col-md-' + (field.gridSize || 12)\">\r\n          \r\n          <!-- Custom Component -->\r\n          @if (field.component) {\r\n            <abp-dynamic-form-field-host\r\n              [component]=\"field.component\"\r\n              [inputs]=\"{ field: field, visible: isFieldVisible(field) }\"\r\n              formControlName=\"{{ field.key }}\">\r\n            </abp-dynamic-form-field-host>\r\n          }\r\n          \r\n          <!-- Nested Group -->\r\n          @else if (field.type === 'group') {\r\n            <abp-dynamic-form-group\r\n              [groupConfig]=\"field\"\r\n              [formGroup]=\"getChildFormGroup(field.key)\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-group>\r\n          }\r\n          \r\n          <!-- Nested Array -->\r\n          @else if (field.type === 'array') {\r\n            <abp-dynamic-form-array\r\n              [arrayConfig]=\"field\"\r\n              [formGroup]=\"dynamicForm\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-array>\r\n          }\r\n          \r\n          <!-- Regular Field -->\r\n          @else {\r\n            <abp-dynamic-form-field\r\n              [field]=\"field\"\r\n              [formControlName]=\"field.key\"\r\n              [visible]=\"isFieldVisible(field)\">\r\n            </abp-dynamic-form-field>\r\n          }\r\n          \r\n        </div>\r\n    }\r\n  </div>\r\n  <ng-content select=\"[actions]\">\r\n    <ng-container [ngTemplateOutlet]=\"defaultActions\"></ng-container>\r\n  </ng-content>\r\n\r\n</form>\r\n\r\n<ng-template #defaultActions>\r\n  <div class=\"form-actions\" role=\"group\" aria-label=\"Form actions\">\r\n    @if (showCancelButton()) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-secondary\"\r\n        (click)=\"onCancel()\"\r\n        aria-label=\"Cancel form\">\r\n        Cancel\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"submit\"\r\n      class=\"btn btn-primary\"\r\n      [disabled]=\"!dynamicForm.valid || submitInProgress()\"\r\n      [attr.aria-busy]=\"submitInProgress() || null\"\r\n      [attr.aria-label]=\"submitInProgress() ? 'Submitting form...' : submitButtonText()\">\r\n      {{ submitButtonText() }}\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n</div>\r\n", styles: [":host(.abp-dynamic-form) form{display:flex;flex-direction:column;gap:.5rem}:host(.abp-dynamic-form) .form-wrapper{text-align:left}.form-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "abp-dynamic-form-field", inputs: ["field", "visible"], exportAs: ["abpDynamicFormField"] }, { kind: "component", type: DynamicFormGroupComponent, selector: "abp-dynamic-form-group", inputs: ["groupConfig", "formGroup", "visible"] }, { kind: "component", type: DynamicFormArrayComponent, selector: "abp-dynamic-form-array", inputs: ["arrayConfig", "formGroup", "visible"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DynamicFieldHostComponent, selector: "abp-dynamic-form-field-host", inputs: ["component", "inputs"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-dynamic-form', host: { class: 'abp-dynamic-form' }, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'abpDynamicForm', imports: [
                         CommonModule,