@abp/ng.components 10.0.3 → 10.1.0-rc.2

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

@@ -0,0 +1,635 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, InjectionToken, forwardRef, input, ChangeDetectorRef, DestroyRef, Injector, ChangeDetectionStrategy, Component, effect, ViewContainerRef, ViewChild, 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 { FormCheckboxComponent } from '@abp/ng.theme.shared';
+import { of } from 'rxjs';
+
+class DynamicFormService {
+    constructor() {
+        this.formBuilder = inject(FormBuilder);
+        this.restService = inject(RestService);
+        this.apiName = 'DynamicFormService';
+    }
+    createFormGroup(fields) {
+        const group = {};
+        fields.forEach(field => {
+            // Nested Group
+            if (field.type === 'group') {
+                group[field.key] = this.createFormGroup(field.children || []);
+            }
+            // Nested Array
+            else if (field.type === 'array') {
+                group[field.key] = this.createFormArray(field);
+            }
+            // Regular Field
+            else {
+                const validators = this.buildValidators(field.validators || []);
+                const initialValue = this.getInitialValue(field);
+                group[field.key] = new FormControl({
+                    value: initialValue,
+                    disabled: field.disabled || false
+                }, validators);
+            }
+        });
+        return this.formBuilder.group(group);
+    }
+    createFormArray(arrayConfig) {
+        const items = [];
+        const minItems = arrayConfig.minItems || 0;
+        // Create minimum required items
+        for (let i = 0; i < minItems; i++) {
+            items.push(this.createFormGroup(arrayConfig.children || []));
+        }
+        return this.formBuilder.array(items);
+    }
+    getInitialValues(fields) {
+        const initialValues = {};
+        fields.forEach(field => {
+            if (field.type === 'group') {
+                initialValues[field.key] = this.getInitialValues(field.children || []);
+            }
+            else if (field.type === 'array') {
+                initialValues[field.key] = [];
+            }
+            else {
+                initialValues[field.key] = this.getInitialValue(field);
+            }
+        });
+        return initialValues;
+    }
+    getOptions(url, apiName) {
+        return this.restService.request({
+            method: 'GET',
+            url,
+        }, { apiName: apiName || this.apiName });
+    }
+    buildValidators(validatorConfigs) {
+        return validatorConfigs.map(config => {
+            switch (config.type) {
+                case 'required':
+                    return Validators.required;
+                case 'email':
+                    return Validators.email;
+                case 'minLength':
+                    return Validators.minLength(config.value);
+                case 'maxLength':
+                    return Validators.maxLength(config.value);
+                case 'pattern':
+                    return Validators.pattern(config.value);
+                case 'min':
+                    return Validators.min(config.value);
+                case 'max':
+                    return Validators.max(config.value);
+                case 'requiredTrue':
+                    return Validators.requiredTrue;
+                default:
+                    return Validators.nullValidator;
+            }
+        });
+    }
+    getInitialValue(field) {
+        if (field.value !== undefined) {
+            return field.value;
+        }
+        switch (field.type) {
+            case 'checkbox':
+                return false;
+            case 'number':
+                return 0;
+            case 'group':
+                return this.getInitialValues(field.children || []);
+            case 'array':
+                return [];
+            default:
+                return '';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+var ConditionalAction;
+(function (ConditionalAction) {
+    ConditionalAction["SHOW"] = "show";
+    ConditionalAction["HIDE"] = "hide";
+    ConditionalAction["ENABLE"] = "enable";
+    ConditionalAction["DISABLE"] = "disable";
+})(ConditionalAction || (ConditionalAction = {}));
+
+const ABP_DYNAMIC_FORM_FIELD = new InjectionToken('AbpDynamicFormField');
+const DYNAMIC_FORM_FIELD_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => DynamicFormFieldComponent),
+    multi: true,
+};
+class DynamicFormFieldComponent {
+    // Accessibility: Generate unique IDs for ARIA
+    get fieldId() {
+        return `field-${this.field().key}`;
+    }
+    get errorId() {
+        return `${this.fieldId}-error`;
+    }
+    get helpTextId() {
+        return `${this.fieldId}-help`;
+    }
+    constructor() {
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        this.formBuilder = inject(FormBuilder);
+        this.dynamicFormService = inject(DynamicFormService);
+        this.options$ = of([]);
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.fieldFormGroup = this.formBuilder.group({
+            value: [{ value: '' }],
+        });
+    }
+    ngOnInit() {
+        const ngControl = this.injector.get(NgControl, null);
+        if (ngControl) {
+            this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
+        }
+        this.value.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+            this.onChange(value);
+        });
+        const options = this.field().options;
+        if (options?.url) {
+            this.options$ = this.dynamicFormService.getOptions(options.url, options.apiName);
+        }
+        else if (options?.defaultValues?.length) {
+            this.options$ = of(options.defaultValues.map(item => {
+                return {
+                    key: item[options.valueProp || 'key'] || item,
+                    value: item[options.labelProp || 'value'] || item
+                };
+            }));
+        }
+        else {
+            this.options$ = of([]);
+        }
+    }
+    writeValue(value) {
+        this.value.setValue(value || '');
+        this.changeDetectorRef.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.value.disable();
+        }
+        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');
+    }
+    onFileChange(event) {
+        const input = event.target;
+        if (input.files) {
+            const files = Array.from(input.files);
+            const value = this.field().multiple ? files : files[0];
+            this.value.setValue(value);
+            this.onChange(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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"] }]
+        }], 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" }] : []));
+        this.inputs = input({}, ...(ngDevMode ? [{ debugName: "inputs" }] : []));
+        this.disabled = false;
+        // if child has not implemented ControlValueAccessor. Create form control
+        this.innerControl = new FormControl(null);
+        this.destroyRef = inject(DestroyRef);
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        effect(() => {
+            if (this.component()) {
+                this.createChild();
+            }
+            else if (this.componentRef && this.inputs()) {
+                this.applyInputs();
+            }
+        });
+    }
+    createChild() {
+        this.viewContainerRef.clear();
+        if (!this.component())
+            return;
+        this.componentRef = this.viewContainerRef.createComponent(this.component());
+        this.applyInputs();
+        const instance = this.componentRef.instance;
+        if (this.isCVA(instance)) {
+            // Child CVA ise wrapper -> child delege
+            instance.registerOnChange?.((v) => this.onChange(v));
+            instance.registerOnTouched?.(() => this.onTouched());
+            if (this.disabled && instance.setDisabledState) {
+                instance.setDisabledState(true);
+            }
+            // set initial value
+            if (this.value !== undefined) {
+                instance.writeValue?.(this.value);
+            }
+        }
+        else {
+            // No CVA -> use form control
+            if ('formControl' in instance) {
+                instance.formControl = this.innerControl;
+                // apply initial value/disabled state
+                if (this.value !== undefined) {
+                    this.innerControl.setValue(this.value, { emitEvent: false });
+                }
+                this.innerControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(v => this.onChange(v));
+                this.innerControl.disabled ? null : (this.disabled && this.innerControl.disable({ emitEvent: false }));
+            }
+        }
+    }
+    applyInputs() {
+        if (!this.componentRef)
+            return;
+        const inst = this.componentRef.instance;
+        for (const [k, v] of Object.entries(this.inputs ?? {})) {
+            inst[k] = v;
+        }
+        this.componentRef.changeDetectorRef?.markForCheck?.();
+    }
+    isCVA(obj) {
+        return obj && typeof obj.writeValue === 'function' && typeof obj.registerOnChange === 'function';
+    }
+    writeValue(obj) {
+        this.value = obj;
+        if (!this.componentRef)
+            return;
+        const inst = this.componentRef.instance;
+        if (this.isCVA(inst)) {
+            inst.writeValue?.(obj);
+        }
+        else if ('formControl' in inst && inst.formControl instanceof FormControl) {
+            inst.formControl.setValue(obj, { emitEvent: false });
+        }
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        if (!this.componentRef)
+            return;
+        const inst = this.componentRef.instance;
+        if (this.isCVA(inst) && inst.setDisabledState) {
+            inst.setDisabledState(isDisabled);
+        }
+        else if ('formControl' in inst && inst.formControl instanceof FormControl) {
+            isDisabled ? inst.formControl.disable({ emitEvent: false }) : inst.formControl.enable({ emitEvent: false });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFieldHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", 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, static: 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.0.9", ngImport: i0, type: DynamicFieldHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-dynamic-form-field-host',
+                    imports: [CommonModule, ReactiveFormsModule],
+                    template: `<ng-template #vcRef></ng-template>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DynamicFieldHostComponent),
+                            multi: true
+                        }]
+                }]
+        }], ctorParameters: () => [], propDecorators: { component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], viewContainerRef: [{
+                type: ViewChild,
+                args: ['vcRef', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class DynamicFormArrayComponent {
+    constructor() {
+        this.arrayConfig = input.required(...(ngDevMode ? [{ debugName: "arrayConfig" }] : []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+        this.fb = inject(FormBuilder);
+        this.dynamicFormService = inject(DynamicFormService);
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    get formArray() {
+        return this.formGroup().get(this.arrayConfig().key);
+    }
+    get sortedChildren() {
+        const children = this.arrayConfig().children || [];
+        return children.sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+    get canAddItem() {
+        const maxItems = this.arrayConfig().maxItems;
+        return maxItems ? this.formArray.length < maxItems : true;
+    }
+    get canRemoveItem() {
+        const minItems = this.arrayConfig().minItems || 0;
+        return this.formArray.length > minItems;
+    }
+    addItem() {
+        if (!this.canAddItem)
+            return;
+        const itemGroup = this.dynamicFormService.createFormGroup(this.arrayConfig().children || []);
+        this.formArray.push(itemGroup);
+        this.cdr.markForCheck();
+    }
+    removeItem(index) {
+        if (!this.canRemoveItem)
+            return;
+        this.formArray.removeAt(index);
+        this.cdr.markForCheck();
+    }
+    getItemFormGroup(index) {
+        return this.formArray.at(index);
+    }
+    getNestedFormGroup(index, key) {
+        return this.getItemFormGroup(index).get(key);
+    }
+    trackByIndex(index) {
+        return index;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-dynamic-form-array', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        LocalizationPipe,
+                        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"] }]
+        }], 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" }] : []));
+        this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
+        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    }
+    get sortedChildren() {
+        const children = this.groupConfig().children || [];
+        return children.sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+    getChildFormGroup(key) {
+        return this.formGroup().get(key);
+    }
+    getChildControl(key) {
+        return this.formGroup().get(key);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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.0.9", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-dynamic-form-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        LocalizationPipe,
+                        DynamicFormFieldComponent,
+                        forwardRef(() => DynamicFormArrayComponent),
+                        forwardRef(() => DynamicFormGroupComponent), // Self reference for recursion
+                    ], 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"] }]
+        }], propDecorators: { groupConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupConfig", 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 DynamicFormComponent {
+    constructor() {
+        this.fields = input([], ...(ngDevMode ? [{ debugName: "fields" }] : []));
+        this.values = input(...(ngDevMode ? [undefined, { debugName: "values" }] : []));
+        this.submitButtonText = input('Submit', ...(ngDevMode ? [{ debugName: "submitButtonText" }] : []));
+        this.submitInProgress = input(false, ...(ngDevMode ? [{ debugName: "submitInProgress" }] : []));
+        this.showCancelButton = input(false, ...(ngDevMode ? [{ debugName: "showCancelButton" }] : []));
+        this.onSubmit = output();
+        this.formCancel = output();
+        this.dynamicFormService = inject(DynamicFormService);
+        this.destroyRef = inject(DestroyRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.fieldVisibility = {};
+    }
+    ngOnInit() {
+        this.setupFormAndLogic();
+    }
+    get sortedFields() {
+        return this.fields().sort((a, b) => (a.order || 0) - (b.order || 0));
+    }
+    submit() {
+        if (this.dynamicForm.valid) {
+            this.onSubmit.emit(this.dynamicForm.getRawValue());
+        }
+        else {
+            this.markAllFieldsAsTouched();
+            this.focusFirstInvalidField();
+        }
+    }
+    onCancel() {
+        this.formCancel.emit();
+    }
+    onFieldChange(event) {
+        this.evaluateConditionalLogic(event.fieldKey);
+    }
+    isFieldVisible(field) {
+        return this.fieldVisibility[field.key] !== false;
+    }
+    getChildFormGroup(key) {
+        return this.dynamicForm.get(key);
+    }
+    resetForm() {
+        const initialValues = this.dynamicFormService.getInitialValues(this.fields());
+        this.dynamicForm.reset({ ...initialValues });
+        this.dynamicForm.markAsUntouched();
+        this.dynamicForm.markAsPristine();
+        this.changeDetectorRef.markForCheck();
+    }
+    initializeFieldVisibility() {
+        this.fields().forEach(field => {
+            this.fieldVisibility = {
+                ...this.fieldVisibility,
+                [field.key]: !field.conditionalLogic?.length,
+            };
+        });
+    }
+    setupConditionalLogic() {
+        this.fields().forEach(field => {
+            if (field.conditionalLogic) {
+                field.conditionalLogic.forEach(rule => {
+                    const dependentControl = this.dynamicForm.get(rule.dependsOn);
+                    if (dependentControl) {
+                        this.evaluateConditionalLogic(field.key);
+                        dependentControl.valueChanges
+                            .pipe(takeUntilDestroyed(this.destroyRef))
+                            .subscribe(() => {
+                            this.evaluateConditionalLogic(field.key);
+                        });
+                    }
+                });
+            }
+        });
+    }
+    evaluateConditionalLogic(fieldKey) {
+        const field = this.fields().find(f => f.key === fieldKey);
+        if (!field?.conditionalLogic)
+            return;
+        field.conditionalLogic.forEach(rule => {
+            const dependentValue = this.dynamicForm.get(rule.dependsOn)?.value;
+            const conditionMet = this.evaluateCondition(dependentValue, rule.condition, rule.value);
+            this.applyConditionalAction(fieldKey, rule.action, conditionMet);
+        });
+    }
+    evaluateCondition(fieldValue, condition, ruleValue) {
+        switch (condition) {
+            case 'equals':
+                return fieldValue === ruleValue;
+            case 'notEquals':
+                return fieldValue !== ruleValue;
+            case 'contains':
+                return fieldValue && fieldValue.includes && fieldValue.includes(ruleValue);
+            case 'greaterThan':
+                return Number(fieldValue) > Number(ruleValue);
+            case 'lessThan':
+                return Number(fieldValue) < Number(ruleValue);
+            default:
+                return false;
+        }
+    }
+    applyConditionalAction(fieldKey, action, shouldApply) {
+        const control = this.dynamicForm.get(fieldKey);
+        switch (action) {
+            case ConditionalAction.SHOW:
+                this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: shouldApply };
+                break;
+            case ConditionalAction.HIDE:
+                this.fieldVisibility = { ...this.fieldVisibility, [fieldKey]: !shouldApply };
+                break;
+            case ConditionalAction.ENABLE:
+                if (control) {
+                    shouldApply ? control.enable() : control.disable();
+                }
+                break;
+            case ConditionalAction.DISABLE:
+                if (control) {
+                    shouldApply ? control.disable() : control.enable();
+                }
+                break;
+        }
+    }
+    setupFormAndLogic() {
+        this.dynamicForm = this.dynamicFormService.createFormGroup(this.fields());
+        this.initializeFieldVisibility();
+        this.setupConditionalLogic();
+        this.changeDetectorRef.markForCheck();
+    }
+    markAllFieldsAsTouched() {
+        Object.keys(this.dynamicForm.controls).forEach(key => {
+            this.dynamicForm.get(key)?.markAsTouched();
+        });
+    }
+    focusFirstInvalidField() {
+        // Accessibility: Focus first invalid field for screen readers
+        const firstInvalidField = this.sortedFields.find(field => {
+            const control = this.dynamicForm.get(field.key);
+            return control && control.invalid && control.touched;
+        });
+        if (firstInvalidField) {
+            setTimeout(() => {
+                const element = document.getElementById(`field-${firstInvalidField.key}`);
+                if (element) {
+                    element.focus();
+                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }, 100);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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.0.9", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-dynamic-form', host: { class: 'abp-dynamic-form' }, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'abpDynamicForm', imports: [
+                        CommonModule,
+                        DynamicFormFieldComponent,
+                        DynamicFormGroupComponent,
+                        DynamicFormArrayComponent,
+                        ReactiveFormsModule,
+                        DynamicFieldHostComponent,
+                    ], 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"] }]
+        }], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], submitButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonText", required: false }] }], submitInProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitInProgress", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ABP_DYNAMIC_FORM_FIELD, ConditionalAction, DynamicFieldHostComponent, DynamicFormArrayComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormGroupComponent, DynamicFormService };
+//# sourceMappingURL=abp-ng.components-dynamic-form.mjs.map