@stemy/ngx-dynamic-form 19.1.14 → 19.2.1

package/fesm2022/stemy-ngx-dynamic-form.mjs

@@ -1,324 +1,174 @@
-import * as i1 from '@ng-dynamic-forms/core';
-import { DynamicInputControlModel, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, serializable, DynamicFormArrayGroupModel as DynamicFormArrayGroupModel$1, DynamicFormArrayModel as DynamicFormArrayModel$1, DynamicFormGroupModel as DynamicFormGroupModel$1, DynamicFormOption as DynamicFormOption$1, DynamicSelectModel as DynamicSelectModel$1, DynamicCheckboxModel, DynamicDatePickerModel, DynamicInputModel, DynamicTextAreaModel, DynamicFileUploadModel, DynamicFormService as DynamicFormService$1, DynamicRadioGroupModel, DynamicFormValueControlModel, isString, DynamicFormComponent, DynamicTemplateDirective, DynamicFormControlContainerComponent, DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormArrayComponent, DynamicFormControlComponent, DynamicFormGroupComponent, DYNAMIC_FORM_CONTROL_MAP_FN, DYNAMIC_VALIDATORS } from '@ng-dynamic-forms/core';
-export { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX, DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP, DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER, DYNAMIC_FORM_CONTROL_TYPE_EDITOR, DYNAMIC_FORM_CONTROL_TYPE_FILE_UPLOAD, DYNAMIC_FORM_CONTROL_TYPE_GROUP, DYNAMIC_FORM_CONTROL_TYPE_INPUT, DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP, DYNAMIC_FORM_CONTROL_TYPE_SELECT, DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA, DynamicCheckboxGroupModel, DynamicCheckboxModel, DynamicDatePickerModel, DynamicFileUploadModel, DynamicFormControlComponent, DynamicFormControlModel, DynamicFormsCoreModule, DynamicInputModel, DynamicListDirective, DynamicRadioGroupModel, DynamicTemplateDirective, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import * as i2 from '@stemy/ngx-utils';
-import { ObjectUtils, TimerUtils, cachedFactory, StringUtils, OpenApiService, ObservableUtils, TOASTER_SERVICE, EventsService, NgxUtilsModule } from '@stemy/ngx-utils';
-import { __decorate } from 'tslib';
-import { BehaviorSubject, isObservable, of, Subject, firstValueFrom, Subscription } from 'rxjs';
-import { map, debounceTime, first, groupBy, mergeMap } from 'rxjs/operators';
+import { cachedFactory, ReflectUtils, ObjectUtils, LANGUAGE_SERVICE, API_SERVICE, StringUtils, TOASTER_SERVICE, NgxUtilsModule } from '@stemy/ngx-utils';
 import * as i0 from '@angular/core';
-import { Injector, Injectable, Inject, EventEmitter, Directive, Input, Output, HostBinding, HostListener, QueryList, Component, ChangeDetectionStrategy, ContentChildren, ViewChildren, ViewContainerRef, ViewChild, forwardRef, Optional, makeEnvironmentProviders, NgModule } from '@angular/core';
-import { FormGroup, FormArray, FormsModule, ReactiveFormsModule, NG_VALIDATORS } from '@angular/forms';
+import { Inject, Injectable, input, output, inject, Renderer2, ElementRef, computed, signal, effect, HostListener, HostBinding, Directive, resource, Injector, ChangeDetectionStrategy, ViewEncapsulation, Component, makeEnvironmentProviders, NgModule } from '@angular/core';
+import { startWith, distinctUntilChanged, switchMap, first, from, isObservable, firstValueFrom } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { FormGroup as FormGroup$1, FormArray as FormArray$1, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { outputToObservable, rxResource } from '@angular/core/rxjs-interop';
+import { debounceTime } from 'rxjs/operators';
+import * as i3 from '@ngx-formly/core';
+import { FieldArrayType, FieldType, FieldWrapper, FormlyModule } from '@ngx-formly/core';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
-class DynamicEditorModel extends DynamicInputControlModel {
-    type = DYNAMIC_FORM_CONTROL_TYPE_EDITOR;
-    inputType;
-    convertObject;
-    constructor(config, layout) {
-        super(config, layout);
-        this.inputType = config.inputType || "javascript";
-        this.convertObject = config.convertObject !== false;
-    }
+// --- Basic frm constants ---
+const FORM_ROOT_KEY = "__root";
+
+function customizeFormField(...providers) {
+    const factory = cachedFactory(providers);
+    return async (property, schema, config, parent, options, injector) => {
+        const customizers = factory(injector);
+        const configs = [config];
+        for (const customizer of customizers) {
+            const index = configs.findIndex(m => customizer.acceptField(m, parent));
+            if (index >= 0) {
+                const custom = await customizer.customizeField(configs[index], property, schema, parent, options);
+                const result = Array.isArray(custom) ? custom : [custom];
+                configs.splice(index, 1, ...result);
+            }
+        }
+        return configs;
+    };
 }
-__decorate([
-    serializable()
-], DynamicEditorModel.prototype, "type", void 0);
 
-class DynamicFormArrayGroupModel extends DynamicFormArrayGroupModel$1 {
-    context;
-    get hidden() {
-        return this.isHidden;
-    }
-    set hidden(value) {
-        if (this.isHidden == value)
-            return;
-        this.isHidden = value || false;
-        this.context?.filterGroups();
-    }
-    isHidden;
-    constructor(context, group, index = -1) {
-        super(context, group, index);
-        this.context = context;
-        this.isHidden = false;
-    }
+function defineFormControl(target, propertyKey, cb) {
+    const fields = ReflectUtils.getMetadata("dynamicFormFields", target) || new Set();
+    const existing = ReflectUtils.getMetadata("dynamicFormField", target, propertyKey);
+    const builder = !ObjectUtils.isFunction(existing) ? cb : ((fb, opts, path) => {
+        const data = existing(fb, opts, path);
+        return ObjectUtils.assign(data || {}, cb(fb, opts, path) || {});
+    });
+    fields.add(propertyKey);
+    ReflectUtils.defineMetadata("dynamicFormField", builder, target, propertyKey);
+    ReflectUtils.defineMetadata("dynamicFormFields", fields, target);
 }
-class DynamicFormArrayModel extends DynamicFormArrayModel$1 {
-    config;
-    filteredGroups;
-    sortable;
-    useTabs;
-    saveTab;
-    restoreTab;
-    getTabLabel;
-    additional;
-    groups = [];
-    tabIndex = 0;
-    _sortBy;
-    _sortDescending;
-    _formArray;
-    _filteredGroups;
-    _filterTimer;
-    get addItem() {
-        return this.config.addItem !== false;
-    }
-    get insertItem() {
-        return !this._sortBy && this.config.insertItem !== false;
-    }
-    get cloneItem() {
-        return this.config.cloneItem !== false;
-    }
-    get moveItem() {
-        return !this._sortBy && this.config.moveItem !== false;
-    }
-    get removeItem() {
-        return this.config.removeItem !== false;
-    }
-    get clearItems() {
-        return this.config.clearItems !== false;
-    }
-    get sortBy() {
-        return this._sortBy;
-    }
-    set sortBy(value) {
-        if (!this.sortable)
-            return;
-        value = value || null;
-        if (this._sortBy !== value) {
-            this._sortBy = value;
-            this._sortDescending = false;
-        }
-        else if (this._sortDescending) {
-            this._sortBy = null;
-            this._sortDescending = false;
-        }
-        else {
-            this._sortDescending = true;
+function FormSerializable(serializer) {
+    return (target, key) => {
+        defineFormControl(target, key, () => ({ key, serializer, serialize: true }));
+    };
+}
+function FormInput(data) {
+    return (target, key) => {
+        const meta = ReflectUtils.getOwnMetadata("design:type", target, key);
+        const type = meta ? meta.name : "";
+        let inputType = key.indexOf("password") < 0 ? "text" : "password";
+        switch (type) {
+            case "Number":
+                inputType = "number";
+                break;
+            case "Boolean":
+                inputType = "checkbox";
+                break;
         }
-        this.filterGroups();
-    }
-    get sortDescending() {
-        return this._sortDescending;
-    }
-    get sortOrder() {
-        return this.sortDescending ? "desc" : "asc";
-    }
-    constructor(config, layout) {
-        super(config, layout);
-        this.config = config;
-        this.filteredGroups = new BehaviorSubject([]);
-        this.sortable = config.sortable || false;
-        this.useTabs = config.useTabs || false;
-        this.saveTab = ObjectUtils.isFunction(config.saveTab) ? config.saveTab : ((index, model, arrayModel) => {
-            arrayModel.tabIndex = index;
-        });
-        this.restoreTab = ObjectUtils.isFunction(config.restoreTab) ? config.restoreTab : ((model) => {
-            return model.tabIndex;
+        data.type = data.type || inputType;
+        defineFormControl(target, key, (fb, path, options) => fb.createFormInput(key, data, path, options));
+    };
+}
+function FormSelect(data) {
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => fb.createFormSelect(key, data, path, options));
+    };
+}
+function FormUpload(data) {
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => fb.createFormUpload(key, data, path, options));
+    };
+}
+function FormFile(data) {
+    console.warn(`@FormFile decorator is deprecated, use @FormUpload instead`);
+    return FormUpload(data);
+}
+function FormGroup(data) {
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => {
+            const targetType = ReflectUtils.getOwnMetadata("design:type", target, key);
+            return fb.resolveFormGroup(key, targetType, data, path, options);
         });
-        this.getTabLabel = ObjectUtils.isFunction(config.getTabLabel) ? config.getTabLabel : ((index) => {
-            return `${index + 1}`;
+    };
+}
+function FormArray(itemType, data) {
+    return (target, key) => {
+        defineFormControl(target, key, (fb, path, options) => {
+            return fb.resolveFormArray(key, itemType, data, path, options);
         });
-        this.additional = config.additional || {};
-        this.tabIndex = 0;
-        this._sortBy = null;
-        this._sortDescending = false;
-        this._formArray = null;
-    }
-    initialize(array) {
-        this._formArray = array || this._formArray;
-        this.filterGroups();
-    }
-    filterGroups() {
-        this._filterTimer = this._filterTimer || TimerUtils.createTimeout();
-        this._filterTimer.set(() => {
-            const filtered = this.groups.filter(g => !g.hidden);
-            if (this._sortBy && this._formArray) {
-                const compare = this._sortDescending
-                    ? (a, b) => this.compareModels(b, a)
-                    : (a, b) => this.compareModels(a, b);
-                filtered.sort(compare);
-            }
-            this._filteredGroups = filtered;
-            this.filteredGroups.next(filtered);
-        }, 100);
-    }
-    getFiltered(index) {
-        return !this._filteredGroups ? null : this._filteredGroups[index];
-    }
-    insertGroup(index) {
-        const group = new DynamicFormArrayGroupModel(this, this.groupFactory());
-        this.groups.splice(index, 0, group);
-        this.groups.forEach((g, index) => g.index = index);
-        this.filterGroups();
-        return group;
-    }
-    moveGroup(index, step) {
-        super.moveGroup(index, step);
-        this.filterGroups();
-    }
-    removeGroup(index) {
-        super.removeGroup(index);
-        this.filterGroups();
-    }
-    compareModels(a, b) {
-        const aGroup = this._formArray.at(a.index).get(this._sortBy)?.value || null;
-        const bGroup = this._formArray.at(b.index).get(this._sortBy)?.value || null;
-        return ObjectUtils.compare(aGroup, bGroup);
-    }
+    };
 }
-
-class DynamicFormGroupModel extends DynamicFormGroupModel$1 {
-    groups;
-    constructor(config, layout) {
-        super(config, layout);
-        const controls = [...config.group];
-        const groups = [];
-        const sets = config.fieldSets || [];
-        for (const fs of sets) {
-            const fields = [];
-            for (const f of fs.fields) {
-                const ix = controls.findIndex(c => c.id === f);
-                if (ix < 0)
-                    continue;
-                fields.push(controls.splice(ix, 1)[0]);
-            }
-            if (fields.length === 0)
-                continue;
-            groups.push({ id: fs.id, legend: fs.legend, fields });
-        }
-        if (controls.length > 0) {
-            groups.unshift({ id: "root-controls", legend: config.legend, fields: controls });
-        }
-        this.groups = groups;
-    }
+function FormModel(data) {
+    console.warn(`@FormModel decorator is deprecated, use @FormGroup instead`);
+    return FormGroup(data);
 }
 
-const ignoredKeys = ["disabled", "label", "value", "classes"];
-class DynamicFormOption extends DynamicFormOption$1 {
-    classes;
-    props;
-    constructor(config) {
-        super(config);
-        this.classes = config.classes || "";
-        this.props = Object.keys(config).reduce((res, k) => {
-            if (ignoredKeys.indexOf(k) >= 0)
-                return res;
-            res[k] = config[k];
-            return res;
-        }, {});
-    }
+function validationMessage(injector, key, labelPrefix) {
+    const language = injector.get(LANGUAGE_SERVICE);
+    return (_, field) => {
+        return language.getTranslationSync(labelPrefix ? `${labelPrefix}.error.${key}` : `error.${key}`, field);
+    };
 }
-class DynamicSelectModel extends DynamicSelectModel$1 {
-    groupBy;
-    inline;
-    getClasses;
-    allowEmpty;
-    options$ = null;
-    mOptions = [];
-    constructor(config, layout) {
-        super(config, layout);
-        this.groupBy = config.groupBy || null;
-        this.inline = config.inline || false;
-        this.getClasses = ObjectUtils.isFunction(config.getClasses) ? config.getClasses : (() => "");
-        this.allowEmpty = config.allowEmpty || false;
-        this.options = config.options;
-    }
-    set options(options) {
-        if (Array.isArray(options)) {
-            this.mOptions = options.map(optionConfig => new DynamicFormOption(optionConfig));
-            this.updateOptions();
-        }
-        else if (isObservable(options)) {
-            this.options$ = options.pipe(map(optionsConfig => {
-                this.mOptions = optionsConfig.map(optionConfig => new DynamicFormOption(optionConfig));
-                return this.mOptions;
-            }));
-        }
-        else {
-            this.updateOptions();
-        }
-    }
-    get options() {
-        return this.mOptions;
-    }
-    insert(index, optionConfig) {
-        const option = new DynamicFormOption(optionConfig);
-        this.mOptions.splice(index, 0, option);
-        this.updateOptions();
-        return option;
-    }
-    remove(...indices) {
-        indices.forEach(index => this.mOptions.splice(index, 1));
-        this.updateOptions();
-    }
-    updateOptions() {
-        this.options$ = of(this.mOptions);
-    }
+function withName(fn, name) {
+    fn.validatorName = name;
+    return fn;
 }
-
-function createFormConfig(id, config) {
-    const res = (config || { id });
-    res.id = id;
-    res.label = ObjectUtils.isNullOrUndefined(config.label) ? id : config.label;
-    res.disabled = config.disabled || false;
-    res.hidden = config.hidden || false;
-    res.additional = Object.assign({
-        // For material components
-        appearance: "fill",
-    }, res.additional || {});
-    return res;
+function validateEach(each, cb, name) {
+    return withName((control) => {
+        const value = control.value;
+        return each ? Array.isArray(value) && value.every(cb) : cb(value);
+    }, name);
 }
-function createFormCheckbox(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.indeterminate = config.indeterminate || false;
-    return new DynamicCheckboxModel(res, layout);
+function jsonValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return false;
+        try {
+            JSON.parse(value);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }, "json");
 }
-function createFormDate(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.autoFocus = config.autoFocus || false;
-    res.focusedDate = config.focusedDate || new Date();
-    res.inline = config.inline || false;
-    return new DynamicDatePickerModel(res, layout);
+function requiredValidation() {
+    return withName((control) => ObjectUtils.isString(control.value) ? control.value.length > 0 : ObjectUtils.isDefined(control.value), "required");
 }
-function createFormEditor(id, config, layout) {
-    const res = createFormConfig(id, config);
-    return new DynamicEditorModel(res, layout);
+function translationValidation(langs = ["de", "en"]) {
+    return withName((control) => {
+        const value = control.value;
+        if (!value || value.length == 0)
+            return false;
+        return value.findIndex(t => langs.includes(t.lang) && !t.translation) < 0;
+    }, "translation");
 }
-function createFormArray(id, config, layout) {
-    const res = createFormConfig(id, config);
-    return new DynamicFormArrayModel(res, layout);
+function phoneValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return true;
+        const phoneRegexp = /^\d{10,12}$/;
+        return phoneRegexp.test(value);
+    }, "phone");
 }
-function createFormGroup(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.name = config.name || "";
-    return new DynamicFormGroupModel(res, layout);
+function emailValidation() {
+    return withName((control) => {
+        const value = control.value;
+        if (!value)
+            return true;
+        const emailRegexp = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/g;
+        return emailRegexp.test(value);
+    }, "email");
 }
-function createFormInput(id, config, type = "text", layout) {
-    const res = createFormConfig(id, config);
-    res.inputType = config.inputType || type;
-    res.placeholder = config.placeholder || (config.inputType == "mask" ? "_" : "");
-    res.step = config.step || 1;
-    res.mask = config.mask || null;
-    return new DynamicInputModel(res, layout);
+function minLengthValidation(minLength, each) {
+    return validateEach(each, v => typeof v == "string" && v.length >= minLength, "minLength");
 }
-function createFormSelect(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.options = config.options || [];
-    return new DynamicSelectModel(res, layout);
+function maxLengthValidation(maxLength, each) {
+    return validateEach(each, v => typeof v == "string" && v.length <= maxLength, "maxLength");
 }
-function createFormTextarea(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.cols = config.cols || 10;
-    res.rows = config.rows || 3;
-    res.wrap = config.wrap || "soft";
-    return new DynamicTextAreaModel(res, layout);
+function minValueValidation(min, each) {
+    return validateEach(each, v => typeof v == "number" && v >= min, "minValue");
 }
-function createFormFile(id, config, layout) {
-    const res = createFormConfig(id, config);
-    res.accept = config.accept || ["jpg", "jpeg", "png"];
-    res.multiple = config.multiple || false;
-    res.url = ObjectUtils.isString(config.url) ? config.url : "assets";
-    return new DynamicFileUploadModel(res, layout);
+function maxValueValidation(max, each) {
+    return validateEach(each, v => typeof v == "number" && v <= max, "maxValue");
 }
 
 function isStringWithVal(val) {
@@ -333,11 +183,11 @@ function findRefs(property) {
 function replaceSpecialChars(str, to = "-") {
     return `${str}`.replace(/[&\/\\#, +()$~%.@'":*?<>{}]/g, to);
 }
-function mergeFormModels(formModels) {
+function mergeFormFields(formFields) {
     const res = [];
-    for (const formModel of formModels) {
+    for (const formModel of formFields) {
         for (const subModel of formModel) {
-            const index = res.findIndex(t => t.id == subModel.id);
+            const index = res.findIndex(t => t.key == subModel.key);
             if (index >= 0) {
                 res[index] = subModel;
                 continue;
@@ -347,176 +197,263 @@ function mergeFormModels(formModels) {
     }
     return res;
 }
-function collectPathAble(start, getter) {
-    if (!start || !getter(start))
-        return [];
-    const parts = [];
-    let currentPath = start;
-    while (currentPath) {
-        const val = getter(currentPath);
-        if (val) {
-            parts.unshift(val);
-        }
-        currentPath = currentPath.parent;
-    }
-    return parts;
-}
-function getDynamicPath(start) {
-    return collectPathAble(start, t => t.id).join(".");
-}
 const MIN_INPUT_NUM = -999999999;
 const MAX_INPUT_NUM = 999999999;
 const EDITOR_FORMATS = ["php", "json", "html", "css", "scss"];
 
-function getFormComponent(...providers) {
-    const factory = cachedFactory(providers);
-    return (model, injector) => {
-        const customizers = factory(injector);
-        for (const customizer of customizers) {
-            const component = customizer.acceptModel(model, getDynamicPath(model)) ? customizer.getFormComponent(model) : null;
-            if (component) {
-                return component;
+class DynamicFormBuilderService {
+    injector;
+    api;
+    language;
+    constructor(injector, api, language) {
+        this.injector = injector;
+        this.api = api;
+        this.language = language;
+    }
+    getLabel(key, label, parent, options) {
+        const labelPrefix = !ObjectUtils.isString(options.labelPrefix) ? `` : options.labelPrefix;
+        const pathPrefix = `${parent?.props?.label || labelPrefix}`;
+        const labelItems = ObjectUtils.isString(label)
+            ? (!label ? [] : [labelPrefix, label])
+            : [pathPrefix, `${key || ""}`];
+        return labelItems.filter(l => l.length > 0).join(".");
+    }
+    createFormField(key, type, data, props, parent, options) {
+        const validators = Array.isArray(data.validators)
+            ? data.validators.reduce((res, validator, ix) => {
+                res[validator.validatorName || `validator_${ix}`] = validator;
+                return res;
+            }, {})
+            : data.validators || {};
+        return {
+            key,
+            type,
+            validators,
+            parent,
+            className: Array.isArray(data.classes) ? data.classes.join(" ") : data.classes || "",
+            hide: data.hidden === true,
+            fieldSet: String(data.fieldSet || ""),
+            validation: {
+                messages: Object.keys(validators).reduce((res, key) => {
+                    res[key] = validationMessage(this.injector, key, options.labelPrefix);
+                    return res;
+                }, {})
+            },
+            props: {
+                ...props,
+                formCheck: "nolabel",
+                required: !!validators.required,
+                label: this.getLabel(key, data.label, parent, options),
             }
-        }
-        return null;
-    };
-}
-function customizeFormModel(...providers) {
-    const factory = cachedFactory(providers);
-    return async (property, schema, model, config, path, injector) => {
-        const customizers = factory(injector);
-        const models = [model];
-        for (const customizer of customizers) {
-            const index = models.findIndex(m => customizer.acceptModel(m, path));
-            if (index >= 0) {
-                const custom = await customizer.customizeModel(models[index], config, property, schema, path);
-                const result = Array.isArray(custom) ? custom : [custom];
-                models.splice(index, 1, ...result);
+        };
+    }
+    resolveFormFields(target, parent, options) {
+        const prototype = target?.prototype || {};
+        const fields = ReflectUtils.getMetadata("dynamicFormFields", target?.prototype || {}) || new Set();
+        const result = [];
+        for (const key of fields) {
+            const builder = ReflectUtils.getMetadata("dynamicFormField", prototype, key);
+            const field = builder(this, parent, options);
+            if (field) {
+                result.push(field);
             }
         }
-        return models;
-    };
-}
-
-function validateJSON(control) {
-    const value = control.value;
-    if (!value)
-        return null;
-    try {
-        JSON.parse(value);
-        return null;
-    }
-    catch (e) {
-        return { json: true };
-    }
-}
-function validateRequiredTranslation(control) {
-    const value = control.value;
-    if (!value || value.length == 0)
-        return { requiredTranslation: true };
-    return value.findIndex(t => (t.lang == "de" || t.lang == "en") && !t.translation) < 0
-        ? null
-        : { requiredTranslation: true };
-}
-function validatePhone(control) {
-    const value = control.value;
-    if (!value)
-        return Promise.resolve(null);
-    const phoneRegexp = /^(?:\d){10,12}$/;
-    return phoneRegexp.test(value) ? null : { phone: true };
-}
-function validateItemsMinLength(minLength) {
-    return (control) => {
-        const value = control.value;
-        return (Array.isArray(value) && value.every(v => typeof v == "string" && v.length >= minLength))
-            ? null : { itemsMinLength: minLength };
-    };
-}
-function validateItemsMaxLength(maxLength) {
-    return (control) => {
-        const value = control.value;
-        return (Array.isArray(value) && value.every(v => typeof v == "string" && v.length <= maxLength))
-            ? null : { itemsMaxLength: maxLength };
-    };
-}
-function validateItemsMinValue(min) {
-    return (control) => {
-        const value = control.value;
-        return (Array.isArray(value) && value.every(v => typeof v == "number" && v >= min))
-            ? null : { itemsMinValue: min };
-    };
-}
-function validateItemsMaxValue(max) {
-    return (control) => {
-        const value = control.value;
-        return (Array.isArray(value) && value.every(v => typeof v == "number" && v <= max))
-            ? null : { itemsMaxValue: max };
-    };
-}
-
-const indexLabels = ["$ix", "$pix"];
-class FormSubject extends Subject {
-    notifyCallback;
-    constructor(notifyCallback) {
-        super();
-        this.notifyCallback = notifyCallback;
+        return this.createFieldSets(result, parent, options);
     }
-    handleNotifiedValue(controlModel, control, val) {
-        val.then(v => this.next(v));
+    resolveFormGroup(key, target, data, parent = null, options = {}) {
+        return this.createFormGroup(key, sp => this.resolveFormFields(target, sp, options), data, parent, options);
     }
-    notify(controlModel, control, root) {
-        const indexes = {};
-        let path = controlModel;
-        let ix = 0;
-        while (path) {
-            if (!isNaN(path.index)) {
-                const key = indexLabels[ix++] || `$pix${ix}`;
-                indexes[key] = path.index;
-            }
-            path = path.parent;
-        }
-        let value = this.notifyCallback(controlModel, control, root, indexes);
-        if (!(value instanceof Promise)) {
-            value = Promise.resolve(value);
-        }
-        this.handleNotifiedValue(controlModel, control, value);
+    resolveFormArray(key, itemType, data, parent = null, options = {}) {
+        return this.createFormArray(key, sp => {
+            return typeof itemType === "function" ? this.resolveFormFields(itemType, sp, options) : this.createFormInput("", typeof itemType === "string" ? { type: `${itemType}` } : itemType, null, options);
+        }, data, parent, options);
     }
-}
-
-class FormSelectSubject extends FormSubject {
-    handleNotifiedValue(controlModel, control, val) {
-        val.then(options => {
-            if (options.length == 0) {
-                this.next(options);
-                return;
+    createFieldSets(fields, parent, options) {
+        const others = [];
+        const groups = {};
+        for (const field of fields) {
+            const fsName = field.hide ? null : String(field.fieldSet || "");
+            // If we have a fieldset name defined and have actual fields for it
+            // then push the property fields into a group
+            if (fsName) {
+                const group = groups[fsName] || [];
+                groups[fsName] = group;
+                group.push(field);
+                continue;
             }
-            const currentVal = control.value;
-            if (controlModel.multiple) {
-                const correctVal = (currentVal || []).filter(t => options.findIndex(o => o.value == t) >= 0);
-                if (correctVal.length !== currentVal?.length) {
-                    control.setValue(correctVal, { onlySelf: true, emitEvent: false });
+            // Otherwise just push the fields to the others
+            others.push(field);
+        }
+        // Create a field-set wrapper for each group and concat the other fields to the end
+        return Object.keys(groups).map(group => {
+            return {
+                fieldGroup: groups[group],
+                wrappers: ["form-fieldset"],
+                id: !parent ? group : `${parent.props?.label}.${group}`,
+                props: {
+                    label: this.getLabel(group, group, parent, options),
+                    hidden: false
                 }
+            };
+        }).concat(others);
+    }
+    createFormInput(key, data, parent, options) {
+        data = data || {};
+        return this.createFormField(key, data.type === "checkbox" ? "checkbox" : "input", data, {
+            type: `${data.type || "text"}`,
+            pattern: ObjectUtils.isString(data.pattern) ? data.pattern : "",
+            step: data.step,
+            cols: data.cols || null,
+            rows: data.rows || 10,
+            min: isNaN(data.min) ? MIN_INPUT_NUM : data.min,
+            max: isNaN(data.max) ? MAX_INPUT_NUM : data.max,
+            minLength: isNaN(data.minLength) ? 0 : data.minLength,
+            maxLength: isNaN(data.maxLength) ? MAX_INPUT_NUM : data.maxLength,
+            placeholder: data.placeholder || "",
+            attributes: {
+                autocomplete: data.autocomplete || "off"
+            },
+        }, parent, options);
+    }
+    createFormSelect(key, data, parent, options) {
+        data = data || { options: () => [] };
+        const select = this.createFormField(key, data.type === "radio" ? "radio" : "select", data, {
+            multiple: data.multiple,
+            type: data.type,
+            groupBy: data.groupBy,
+            inline: data.inline,
+            allowEmpty: data.allowEmpty
+        }, parent, options);
+        select.hooks = {
+            onInit: field => {
+                const options = data.options(field);
+                const control = field.formControl.root;
+                field.props.options = options instanceof Promise ? control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(), switchMap(async () => {
+                    const results = await data.options(field);
+                    return this.fixSelectOptions(field, results);
+                })) : options;
             }
-            else {
-                const option = options.find(t => t.value == currentVal);
-                if (!option) {
-                    control.setValue(controlModel.allowEmpty ? null : options[0]?.value ?? null, { onlySelf: true, emitEvent: false });
-                }
+        };
+        return select;
+    }
+    createFormUpload(key, data, parent, options) {
+        data = data || {};
+        if (data.asFile) {
+            data.inline = true;
+            console.warn(`File upload property "asFile" is deprecated. Use "inline" instead.`);
+        }
+        if (data.multi) {
+            data.multiple = true;
+            console.warn(`File upload property "multi" is deprecated. Use "multiple" instead.`);
+        }
+        return this.createFormField(key, "upload", data, {
+            inline: data.inline === true,
+            multiple: data.multiple === true,
+            accept: data.accept || [".png", ".jpg"],
+            url: data.url?.startsWith("http") ? data.url : this.api.url(data.url || "assets"),
+            maxSize: isNaN(data.maxSize) ? MAX_INPUT_NUM : data.maxSize,
+            uploadOptions: data.uploadOptions || {},
+            createUploadData: data.createUploadData
+        }, parent, options);
+    }
+    createFormGroup(key, fields, data, parent, options) {
+        data = data || {};
+        const group = this.createFormField(key, undefined, data, {}, parent, options);
+        group.wrappers = ["form-group"];
+        const result = fields(group);
+        const handleGroup = (fieldGroup) => {
+            group.fieldGroup = fieldGroup;
+            return group;
+        };
+        return result instanceof Promise
+            ? result.then(handleGroup)
+            : handleGroup(result);
+    }
+    createFormArray(key, fields, data, parent, options) {
+        data = data || {};
+        const array = this.createFormField(key, "array", data, {
+            // initialCount: data.initialCount || 0,
+            // sortable: data.sortable || false,
+            useTabs: data.useTabs === true,
+            tabsLabel: `${data.tabsLabel || "label"}`,
+            addItem: data.addItem !== false,
+            insertItem: data.insertItem !== false,
+            cloneItem: data.cloneItem !== false,
+            moveItem: data.moveItem !== false,
+            removeItem: data.removeItem !== false,
+            clearItems: data.clearItems !== false
+        }, parent, options);
+        const result = fields(array);
+        const handleItems = (items) => {
+            if (Array.isArray(items)) {
+                array.fieldArray = {
+                    wrappers: ["form-group"],
+                    fieldGroup: items,
+                };
+                return array;
             }
-            this.next(options);
-        });
+            const props = items.props || {};
+            if (props.type === "text" || props.type === "number") {
+                array.type = "chips";
+                array.wrappers = ["form-field"];
+                array.props = {
+                    ...props,
+                    ...array.props,
+                    multiple: true
+                };
+                return array;
+            }
+            array.fieldArray = {
+                ...items,
+                props: {
+                    ...items.props,
+                    label: ""
+                }
+            };
+            return array;
+        };
+        return result instanceof Promise
+            ? result.then(handleItems)
+            : handleItems(result);
     }
+    async fixSelectOptions(field, options) {
+        if (!options)
+            return [];
+        for (const option of options) {
+            const classes = Array.isArray(option.classes) ? option.classes : [`${option.classes}`];
+            option.className = classes.filter(isStringWithVal).join(" ");
+            option.label = await this.language.getTranslation(option.label);
+            option.value = option.value ?? option.id;
+            option.id = option.id ?? option.value;
+        }
+        const control = field.formControl;
+        if (field.props.multiple || options.length === 0 || options.findIndex(o => o.value === control.value) >= 0)
+            return options;
+        control.setValue(options[0].value);
+        return options;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, deps: [{ token: i0.Injector }, { token: API_SERVICE }, { token: LANGUAGE_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormBuilderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_SERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LANGUAGE_SERVICE]
+                }] }] });
 
 function getFormValidationErrors(controls, parentPath = "") {
     const errors = [];
     Object.entries(controls).forEach(([name, control], ix) => {
         const path = !parentPath ? name : `${parentPath}.${name}`;
-        if (control instanceof FormGroup) {
+        if (control instanceof FormGroup$1) {
             getFormValidationErrors(control.controls, path).forEach(error => errors.push(error));
             return;
         }
-        if (control instanceof FormArray) {
+        if (control instanceof FormArray$1) {
             control.controls.forEach((control, ix) => {
                 getFormValidationErrors(control.controls, `${path}.${ix}`).forEach(error => errors.push(error));
             });
@@ -529,9 +466,10 @@ function getFormValidationErrors(controls, parentPath = "") {
     return errors;
 }
 
-class DynamicFormService extends DynamicFormService$1 {
+class DynamicFormService {
     openApi;
     injector;
+    builder;
     get api() {
         return this.openApi.api;
     }
@@ -539,183 +477,72 @@ class DynamicFormService extends DynamicFormService$1 {
         return this.api.language;
     }
     schemas;
-    constructor(cs, vs, openApi, injector) {
-        super(cs, vs);
+    constructor(openApi, injector, builder) {
         this.openApi = openApi;
         this.injector = injector;
+        this.builder = builder;
+    }
+    async getFormFieldsForSchema(name, customizeOrOptions) {
+        const group = await this.getFormFieldGroupForSchema(name, customizeOrOptions);
+        return group.fieldGroup;
     }
-    async serializeForm(form, validate) {
-        if (!form.group)
+    async serializeForm(form, validate = true) {
+        const fields = form.config();
+        if (!fields)
             return null;
         if (validate) {
             await this.validateForm(form);
         }
-        return this.serialize(form.model, form.group);
-    }
-    async getFormModelForSchema(name, customizeOrOptions) {
-        return (await this.getFormGroupModelForSchema(name, customizeOrOptions)).group;
-    }
-    getErrors(form) {
-        this.showErrors(form);
-        return new Promise(resolve => {
-            setTimeout(() => {
-                resolve(getFormValidationErrors(form.group.controls, ""));
-            }, 500);
-        });
-    }
-    createFormGroup(formModel, options, parent) {
-        const group = super.createFormGroup(formModel, options, parent);
-        if (!parent) {
-            group.valueChanges.pipe(debounceTime(500)).subscribe(() => {
-                this.notifyChanges(formModel, group, formModel);
-            });
-        }
-        return group;
+        return this.serialize(fields);
     }
-    patchGroup(value, formModel, formGroup) {
-        value = ObjectUtils.copy(value);
-        this.patchValues(value, formModel, formGroup);
-        formGroup.patchValue(value);
-        this.detectChanges();
-    }
-    patchForm(value, component) {
-        value = ObjectUtils.copy(value);
-        this.patchValues(value, component.model, component.group);
-        component.group.patchValue(value);
-        this.detectChanges(component);
-    }
-    validateForm(form, showErrors = true) {
-        if (!form.group)
+    async validateForm(form, showErrors = true) {
+        const group = form.group();
+        if (!group)
             return Promise.resolve();
         return new Promise((resolve, reject) => {
-            form.group.statusChanges.pipe(first(status => status == "VALID" || status == "INVALID")).subscribe(status => {
+            group.statusChanges
+                .pipe(first(status => status == "VALID" || status == "INVALID"))
+                .subscribe(status => {
                 if (showErrors) {
-                    this.showErrors(form);
+                    this.showErrorsForGroup(group);
                 }
                 if (status == "VALID") {
                     resolve(null);
                     return;
                 }
-                console.log(`Form errors:`, getFormValidationErrors(form.group.controls));
-                reject(null);
+                reject(getFormValidationErrors(group.controls));
             });
-            form.group.updateValueAndValidity();
+            group.updateValueAndValidity();
         });
     }
-    async serialize(formModel, formGroup) {
+    async serialize(fields) {
         const result = {};
-        if (!formModel || !formGroup || !formGroup.value)
+        if (!fields)
             return result;
-        for (const i in formModel) {
-            const subModel = formModel[i];
-            const subControl = this.findControlByModel(subModel, formGroup);
-            const serializer = subModel.additional?.serializer;
+        for (const field of fields) {
+            const serializer = field.serializer;
+            const key = `${field.key}`;
+            const props = field.props || {};
             if (ObjectUtils.isFunction(serializer)) {
-                result[subModel.id] = await serializer(subModel, subControl);
-                continue;
-            }
-            if (subModel.hidden && !subModel.additional?.serialize)
-                continue;
-            if (subModel instanceof DynamicFormArrayModel) {
-                const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
-                const subArray = subControl;
-                const resArray = [];
-                for (let i = 0; i < length; i++) {
-                    const itemModel = subModel.get(i);
-                    resArray.push(await this.serialize(itemModel.group, subArray.at(i)));
-                }
-                result[subModel.id] = resArray;
-                continue;
-            }
-            if (subModel instanceof DynamicInputModel && !ObjectUtils.isNullOrUndefined(subControl.value)) {
-                result[subModel.id] = subModel.inputType == "number"
-                    ? parseFloat((`${subControl.value}` || "0").replace(/,/gi, ".")) ?? null
-                    : subControl.value;
+                result[key] = await serializer(field, this.injector);
                 continue;
             }
-            if (subModel instanceof DynamicFormGroupModel) {
-                result[subModel.id] = await this.serialize(subModel.group, subControl);
+            if (field.hide && !field.serialize) {
                 continue;
             }
-            result[subModel.id] = subControl.value;
-        }
-        return result;
-    }
-    showErrors(form) {
-        this.showErrorsForGroup(form.group);
-        this.detectChanges(form);
-    }
-    notifyChanges(formModel, formGroup, root) {
-        if (!formModel || !formGroup)
-            return;
-        for (const i in formModel) {
-            const subModel = formModel[i];
-            const subControl = this.findControlByModel(subModel, formGroup);
-            if (subModel instanceof DynamicFormArrayModel) {
-                const length = Array.isArray(subControl.value) ? subControl.value.length : 0;
-                const subArray = subControl;
-                for (let i = 0; i < length; i++) {
-                    const itemModel = subModel.get(i);
-                    this.notifyChanges(itemModel.group, subArray.at(i), root);
+            const control = field.formControl;
+            if (field.fieldGroup) {
+                const group = await this.serialize(field.fieldGroup);
+                if (field.key) {
+                    result[key] = !field.fieldArray ? group : Object.values(group);
+                    continue;
                 }
+                Object.assign(result, group);
                 continue;
             }
-            if (subModel instanceof DynamicFormGroupModel) {
-                this.notifyChanges(subModel.group, subControl, root);
-                continue;
-            }
-            this.updateSelectOptions(subModel, subControl, root);
-        }
-    }
-    patchValues(value, formModel, formGroup) {
-        if (!value)
-            return;
-        formModel?.forEach(subModel => {
-            const key = subModel.id;
-            const subValue = value[key];
-            const subControl = this.findControlByModel(subModel, formGroup);
-            if ((subModel instanceof DynamicSelectModel || subModel instanceof DynamicRadioGroupModel) && ObjectUtils.isObject(subValue)) {
-                value[key] = subValue.id || subValue._id || subValue;
-                return;
-            }
-            if (subModel instanceof DynamicDatePickerModel) {
-                value[key] = this.convertToDate(subValue);
-                return;
-            }
-            if (subModel instanceof DynamicFormArrayModel) {
-                const length = Array.isArray(subValue) ? subValue.length : 0;
-                const subArray = subControl;
-                while (subModel.size > length) {
-                    this.removeFormArrayGroup(0, subArray, subModel);
-                }
-                while (subModel.size < length) {
-                    this.insertFormArrayGroup(subModel.size, subArray, subModel);
-                }
-                for (let i = 0; i < length; i++) {
-                    const itemModel = subModel.get(i);
-                    this.patchValues(subValue[i], itemModel.group, subArray.at(i));
-                }
-                return;
-            }
-            if (subModel instanceof DynamicFormGroupModel) {
-                this.patchValues(subValue, subModel.group, subControl);
-            }
-        });
-    }
-    updateSelectOptions(formControlModel, formControl, root) {
-        if (formControlModel instanceof DynamicSelectModel) {
-            let options = formControlModel.options$;
-            if (options instanceof FormSubject) {
-                options.notify(formControlModel, formControl, root);
-                return;
-            }
-            while (options instanceof Subject && options.source) {
-                options = options.source;
-                if (options instanceof FormSubject) {
-                    options.notify(formControlModel, formControl, root);
-                }
-            }
+            result[key] = control.value;
         }
+        return result;
     }
     showErrorsForGroup(formGroup) {
         if (!formGroup)
@@ -726,12 +553,12 @@ class DynamicFormService extends DynamicFormService$1 {
     }
     showErrorsForControls(controls) {
         controls.forEach(control => {
-            if (control instanceof FormGroup) {
+            if (control instanceof FormGroup$1) {
                 this.showErrorsForGroup(control);
                 return;
             }
             control.markAsTouched({ onlySelf: true });
-            if (control instanceof FormArray) {
+            if (control instanceof FormArray$1) {
                 this.showErrorsForControls(control.controls);
             }
         });
@@ -744,326 +571,287 @@ class DynamicFormService extends DynamicFormService$1 {
             : new Date(value);
         return isNaN(date) ? new Date() : date;
     }
-    async getFormGroupModelForSchema(name, customizeOrOptions) {
-        this.api.cache = {};
+    async getFormFieldGroupForSchema(name, customizeOrOptions) {
         this.schemas = await this.openApi.getSchemas();
-        const fieldSets = [];
         const schemaOptions = ObjectUtils.isObject(customizeOrOptions) ? customizeOrOptions : {};
-        const customizeModel = ObjectUtils.isFunction(customizeOrOptions) ? customizeOrOptions : schemaOptions.customizer;
+        const customizeConfig = ObjectUtils.isFunction(customizeOrOptions) ? customizeOrOptions : schemaOptions.customizer;
         const schema = this.schemas[name];
         const wrapOptions = {
             ...schemaOptions,
             schema,
-            customizer: async (property, options, modelType, config, path) => {
-                const pathPrefix = !path ? `` : `${path}.`;
-                config.label = !config.label || !options.labelPrefix
-                    ? config.label || ""
-                    : await this.language.getTranslation(`${options.labelPrefix}.${pathPrefix}${config.label}`);
-                const model = new modelType(config);
-                if (model instanceof DynamicFormValueControlModel) {
-                    model.value = (model instanceof DynamicDatePickerModel)
-                        ? this.convertToDate(property.default) : property.default;
-                }
-                const modelPath = `${pathPrefix}${model.id}`;
-                const layout = modelPath.toLowerCase().replace(/\./g, "-");
-                model.layout = {
-                    grid: {
-                        host: `${layout} control-${model.id}`,
-                        container: `${layout}-container`
-                    }
-                };
-                if (!ObjectUtils.isFunction(customizeModel))
-                    return [model];
-                let res = customizeModel(property, schema, model, config, modelPath, this.injector);
+            injector: this.injector,
+            customizer: async (property, options, config, parent) => {
+                config.defaultValue = `${config.type}`.startsWith("date")
+                    ? this.convertToDate(property.default) : property.default;
+                if (!ObjectUtils.isFunction(customizeConfig))
+                    return [config];
+                let res = customizeConfig(property, schema, config, parent, options, this.injector);
                 if (!res)
-                    return [model];
+                    return [config];
                 if (res instanceof Promise) {
                     res = await res;
                 }
                 return Array.isArray(res) ? res : [res];
             }
         };
-        const controls = await this.getFormModelForSchemaDef(schema, fieldSets, wrapOptions, "");
-        const group = [...controls];
+        const config = {
+            key: FORM_ROOT_KEY,
+            wrappers: ["form-group"]
+        };
+        const fields = await this.getFormFieldsForSchemaDef(schema, config, wrapOptions);
+        const fieldGroup = [...fields];
         // Add id fields if necessary
-        if (controls.length > 0) {
+        if (fields.length > 0) {
             const idFields = [
-                createFormInput("id", { hidden: true }),
-                createFormInput("_id", { hidden: true })
-            ].filter(t => !controls.some(c => c.id == t.id));
-            group.unshift(...idFields);
+                { key: "id", props: { hidden: true } },
+                { key: "_id", props: { hidden: true } },
+            ];
+            fieldGroup.unshift(...idFields
+                .filter(t => !fields.some(c => c.key == t.key)));
         }
-        const config = {
-            id: "root",
-            group,
-            fieldSets
-        };
+        config.fieldGroup = fieldGroup;
         const root = await wrapOptions.customizer({
-            id: "root",
+            id: FORM_ROOT_KEY,
             type: "object",
             properties: schema?.properties || {}
-        }, wrapOptions, DynamicFormGroupModel, config, "");
+        }, wrapOptions, config, null);
         // Check if the customized root wrapper returned an array
-        controls.length = 0;
+        fields.length = 0;
         for (const model of root) {
-            if (model instanceof DynamicFormGroupModel && model.id === "root") {
+            if (model.key === FORM_ROOT_KEY) {
                 return model;
             }
             else {
-                controls.push(model);
+                fields.push(model);
             }
         }
-        return new DynamicFormGroupModel({
+        return {
             ...config,
-            group: controls
-        });
+            fieldGroup: fields
+        };
     }
-    async getFormModelForSchemaDef(schema, fieldSets, options, path) {
+    async getFormFieldsForSchemaDef(schema, parent, options) {
         if (!schema)
             return [];
         const keys = Object.keys(schema.properties || {});
-        const controls = [];
-        for (const p of keys) {
-            const property = schema.properties[p];
-            const fsName = property.hidden ? null : String(property.fieldSet || "");
-            if (fsName) {
-                const fs = fieldSets.find(t => t.id === fsName);
-                if (fs) {
-                    fs.fields.push(p);
-                }
-                else {
-                    fieldSets.push({ id: fsName, legend: `legend.${fsName}`, fields: [p] });
-                }
-            }
-            const models = await this.getFormControlModels(property, options, path);
-            controls.push(...models);
+        const fields = [];
+        // Collect all properties of this schema def
+        for (const key of keys) {
+            const property = schema.properties[key];
+            const propFields = await this.getFormFieldsForProp(property, options, parent);
+            fields.push(...propFields);
         }
-        return controls.filter(t => null !== t);
+        return this.builder.createFieldSets(fields.filter(f => null !== f), parent, options);
     }
-    checkIsEditorProperty(property) {
-        if (!property.format)
-            return false;
-        return EDITOR_FORMATS.indexOf(property.format) >= 0 || property.format.endsWith("script");
+    async getFormFieldsForProp(property, options, parent) {
+        const field = await this.getFormFieldForProp(property, options, parent);
+        return !field ? [] : options.customizer(property, options, field, parent);
     }
-    async getFormControlModels(property, options, path) {
+    async getFormFieldForProp(property, options, parent) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum) || isStringWithVal(property.optionsPath) || isStringWithVal(property.endpoint)) {
             if (property.format == "radio") {
-                return options.customizer(property, options, DynamicRadioGroupModel, this.getFormRadioConfig(property, options), path);
+                return this.getFormRadioConfig(property, options, parent);
             }
-            return options.customizer(property, options, DynamicSelectModel, this.getFormSelectConfig(property, options), path);
+            return this.getFormSelectConfig(property, options, parent);
         }
         switch (property.type) {
             case "string":
             case "number":
             case "integer":
             case "textarea":
-                if (this.checkIsEditorProperty(property)) {
-                    return options.customizer(property, options, DynamicEditorModel, this.getFormEditorConfig(property, options), path);
-                }
+                // if (this.checkIsEditorProperty(property)) {
+                //     return this.getFormEditorConfig(property, options, parent);
+                // }
                 if (property.format == "textarea") {
-                    return options.customizer(property, options, DynamicTextAreaModel, this.getFormTextareaConfig(property, options), path);
+                    return this.getFormTextareaConfig(property, options, parent);
                 }
                 if (property.format == "date" || property.format == "date-time") {
-                    return options.customizer(property, options, DynamicDatePickerModel, this.getFormDatepickerConfig(property, options), path);
+                    return this.getFormDatepickerConfig(property, options, parent);
                 }
-                return options.customizer(property, options, DynamicInputModel, this.getFormInputConfig(property, options), path);
-            case "object":
-                return options.customizer(property, options, DynamicEditorModel, this.getFormEditorConfig(property, options), path);
+                return this.getFormInputConfig(property, options, parent);
+            // case "object":
+            //     return this.getFormEditorConfig(property, options, parent);
             case "boolean":
-                return options.customizer(property, options, DynamicCheckboxModel, this.getFormCheckboxConfig(property, options), path);
+                return this.getFormCheckboxConfig(property, options, parent);
             case "array":
-                if (findRefs(property).length > 0) {
-                    return options.customizer(property, options, DynamicFormArrayModel, await this.getFormArrayConfig(property, options, path), path);
-                }
-                else {
-                    return options.customizer(property, options, DynamicInputModel, this.getFormInputConfig(property, options), path);
-                }
+                return this.getFormArrayConfig(property, options, parent);
             case "file":
-                return options.customizer(property, options, DynamicFileUploadModel, this.getFormUploadConfig(property, options), path);
+            case "upload":
+                return this.getFormUploadConfig(property, options, parent);
         }
         if (findRefs(property).length > 0) {
-            return options.customizer(property, options, DynamicFormGroupModel, await this.getFormGroupConfig(property, options, !path ? property.id : `${path}.${property.id}`), path);
+            return this.getFormGroupConfig(property, options, parent);
         }
-        return [];
+        return null;
     }
-    findModelByPath(parent, path) {
-        if (path.length == 0)
-            return parent;
-        const next = path.shift();
-        if (Array.isArray(parent)) {
-            return this.findModelByPath(parent.find(t => t.id == next), path);
-        }
-        if (parent instanceof DynamicFormGroupModel || parent instanceof DynamicFormArrayGroupModel) {
-            return this.findModelByPath(parent.group.find(t => t.id == next), path);
-        }
-        if (parent instanceof DynamicFormArrayModel) {
-            return this.findModelByPath(parent.groups.find(t => t.index == next), path);
+    getFormFieldData(property, options) {
+        const validators = {};
+        const schema = options.schema;
+        if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
+            validators.required = requiredValidation();
         }
-        return parent;
-    }
-    getFormControlConfig(property, options) {
-        const validators = this.getValidators(property, options);
-        const errorMessages = Object.keys(validators).reduce((res, key) => {
-            res[key] = options.labelPrefix
-                ? this.language.getTranslationSync(`${options.labelPrefix}.error.${key}`) : `error.${key}`;
-            return res;
-        }, {});
+        this.addPropertyValidators(validators, property);
+        this.addItemsValidators(validators, property.items);
         return {
-            id: property.id,
-            label: ObjectUtils.isString(property.label) ? property.label : property.id,
-            hidden: property.hidden,
-            disabled: property.disabled,
-            validators,
-            errorMessages,
-            additional: Object.assign({
-                // For material components
-                appearance: "fill"
-            }, property)
+            hidden: property.hidden === true,
+            fieldSet: property.fieldSet,
+            validators
         };
     }
-    async getFormArrayConfig(property, options, path) {
-        const fieldSets = [];
-        const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, options, path)));
-        return Object.assign(this.getFormControlConfig(property, options), {
-            groupFactory: () => mergeFormModels(ObjectUtils.copy(subModels)),
-            initialCount: property.initialCount || 0,
-            sortable: property.sortable || false,
-            useTabs: property.useTabs || false,
-            addItem: property.addItem !== false,
-            insertItem: property.insertItem !== false,
-            cloneItem: property.cloneItem !== false,
-            moveItem: property.moveItem !== false,
-            removeItem: property.removeItem !== false,
-            clearItems: property.clearItems !== false
-        });
-    }
-    async getFormGroupConfig(property, options, path) {
-        const fieldSets = [];
+    async getFormArrayConfig(property, options, parent) {
+        return this.builder.createFormArray(property.id, async (sp) => {
+            const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
+            if (subSchemas.length > 0) {
+                const subModels = await Promise.all(subSchemas.map(s => this.getFormFieldsForSchemaDef(s, sp, options)));
+                return mergeFormFields(ObjectUtils.copy(subModels));
+            }
+            return this.getFormFieldForProp(property.items, options, null);
+        }, {
+            ...this.getFormFieldData(property, options),
+            // initialCount: property.initialCount || 0,
+            // sortable: property.sortable || false,
+            useTabs: property.useTabs,
+            tabsLabel: property.tabsLabel,
+            addItem: property.addItem,
+            insertItem: property.insertItem,
+            cloneItem: property.cloneItem,
+            moveItem: property.moveItem,
+            removeItem: property.removeItem,
+            clearItems: property.clearItems
+        }, parent, options);
+    }
+    async getFormGroupConfig(property, options, parent) {
         const subSchemas = findRefs(property).map(ref => this.schemas[ref]);
-        const subModels = await Promise.all(subSchemas.map(s => this.getFormModelForSchemaDef(s, fieldSets, options, path)));
-        return Object.assign(this.getFormControlConfig(property, options), {
-            fieldSets,
-            group: mergeFormModels(subModels)
-        });
-    }
-    getFormInputConfig(property, options) {
-        let inputType = StringUtils.has(property.id, "password", "Password") ? "password" : (property.format || property.items?.type || property.type);
-        switch (inputType) {
+        return this.builder.createFormGroup(property.id, async (sp) => {
+            const subModels = await Promise.all(subSchemas.map(s => this.getFormFieldsForSchemaDef(s, sp, options)));
+            return mergeFormFields(subModels);
+        }, {
+            ...this.getFormFieldData(property, options),
+        }, parent, options);
+    }
+    getFormInputConfig(property, options, parent) {
+        let type = StringUtils.has(property.id || "", "password", "Password") ? "password" : (property.format || property.type);
+        switch (type) {
             case "string":
-                inputType = "text";
+                type = "text";
                 break;
             case "boolean":
-                inputType = "checkbox";
+                type = "checkbox";
                 break;
             case "textarea":
-                inputType = "textarea";
+                type = "textarea";
                 break;
             case "integer":
-                inputType = "number";
+                type = "number";
                 break;
         }
         const sub = property.type == "array" ? property.items || property : property;
-        return Object.assign(this.getFormControlConfig(property, options), {
-            inputType,
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array",
-            accept: ObjectUtils.isString(property.accept) ? property.accept : null,
-            mask: ObjectUtils.isString(property.mask) ? property.mask : null,
-            pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
-            step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
-            min: isNaN(sub.minimum) ? MIN_INPUT_NUM : sub.minimum,
-            max: isNaN(sub.maximum) ? MAX_INPUT_NUM : sub.maximum,
-            minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
-            maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
-            placeholder: property.placeholder || ""
-        });
-    }
-    getFormEditorConfig(property, options) {
-        const sub = property.type == "array" ? property.items || property : property;
-        return Object.assign(this.getFormControlConfig(property, options), {
-            inputType: property.format || "json",
-            convertObject: property.type !== "string",
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array",
-            accept: ObjectUtils.isString(property.accept) ? property.accept : null,
-            mask: ObjectUtils.isString(property.mask) ? property.mask : null,
-            pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
-            step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
-            minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
-            maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
-            placeholder: property.placeholder || ""
-        });
-    }
-    getFormTextareaConfig(property, options) {
-        return Object.assign(this.getFormControlConfig(property, options), {
+        return this.builder.createFormInput(property.id, {
+            ...this.getFormFieldData(property, options),
+            type,
+            autocomplete: property.autocomplete,
+            pattern: property.pattern,
+            step: isNaN(sub.step) ? property.step : sub.step,
+            min: sub.minimum,
+            max: sub.maximum,
+            minLength: sub.minLength,
+            maxLength: sub.maxLength,
+            placeholder: property.placeholder
+        }, parent, options);
+    }
+    getFormTextareaConfig(property, options, parent) {
+        return this.builder.createFormInput(property.id, {
+            ...this.getFormFieldData(property, options),
+            type: "textarea",
+            autocomplete: property.autoComplete,
             cols: property.cols || null,
             rows: property.rows || 10,
-            wrap: property.wrap || false,
-            autoComplete: property.autoComplete || "off",
-            multiple: property.type == "array",
-            minLength: isNaN(property.minLength) ? 0 : property.minLength,
-            maxLength: isNaN(property.maxLength) ? MAX_INPUT_NUM : property.maxLength,
+            minLength: property.minLength,
+            maxLength: property.maxLength,
             placeholder: property.placeholder || ""
-        });
-    }
-    getFormDatepickerConfig(property, options) {
-        return Object.assign(this.getFormControlConfig(property, options), {
-            format: property.dateFormat || "dd.MM.yyyy",
+        }, parent, options);
+    }
+    // getFormEditorConfig(property: IOpenApiSchemaProperty, options: ConfigForSchemaWrapOptions): DynamicEditorModelConfig {
+    //     const sub = property.type == "array" ? property.items || property : property;
+    //     return Object.assign(
+    //         this.getFormControlConfig(property, options),
+    //         {
+    //             inputType: property.format || "json",
+    //             convertObject: property.type !== "string",
+    //             autoComplete: property.autoComplete || "off",
+    //             multiple: property.type == "array",
+    //             accept: ObjectUtils.isString(property.accept) ? property.accept : null,
+    //             mask: ObjectUtils.isString(property.mask) ? property.mask : null,
+    //             pattern: ObjectUtils.isString(property.pattern) ? property.pattern : null,
+    //             step: isNaN(sub.step) ? (isNaN(property.step) ? 1 : property.step) : sub.step,
+    //             minLength: isNaN(sub.minLength) ? 0 : sub.minLength,
+    //             maxLength: isNaN(sub.maxLength) ? MAX_INPUT_NUM : sub.maxLength,
+    //             placeholder: property.placeholder || ""
+    //         }
+    //     );
+    // }
+    getFormDatepickerConfig(property, options, parent) {
+        return this.builder.createFormInput(property.id, {
+            ...this.getFormFieldData(property, options),
+            type: property.format == "date-time" ? "datetime-local" : "date",
+            // format: property.dateFormat || "dd.MM.yyyy",
             min: this.convertToDate(property.min),
             max: this.convertToDate(property.max),
-        });
+        }, parent, options);
     }
-    getFormSelectOptions(property, options) {
+    getFormRadioConfig(property, options, parent) {
+        return this.builder.createFormSelect(property.id, {
+            ...this.getFormFieldData(property, options),
+            options: field => this.getFormSelectOptions(property, options, field),
+            type: "radio",
+            multiple: property.type == "array",
+            groupBy: property.groupBy,
+            inline: property.inline,
+            allowEmpty: property.allowEmpty
+        }, parent, options);
+    }
+    getFormSelectConfig(property, options, parent) {
+        return this.builder.createFormSelect(property.id, {
+            ...this.getFormFieldData(property, options),
+            options: field => this.getFormSelectOptions(property, options, field),
+            type: "select",
+            multiple: property.type == "array",
+            groupBy: property.groupBy,
+            inline: property.inline,
+            allowEmpty: property.allowEmpty
+        }, parent, options);
+    }
+    getFormUploadConfig(property, options, parent) {
+        return this.builder.createFormUpload(property.id, {
+            ...this.getFormFieldData(property, options),
+            multiple: property.type === "array",
+            inline: property.inline,
+            accept: property.accept,
+            url: property.url,
+            maxSize: property.maxSize,
+            uploadOptions: property.uploadOptions
+        }, parent, options);
+    }
+    getFormCheckboxConfig(property, options, parent) {
+        return this.builder.createFormInput(property.id, {
+            ...this.getFormFieldData(property, options),
+            type: "checkbox",
+            indeterminate: property.indeterminate || false
+        }, parent, options);
+    }
+    getFormSelectOptions(property, options, field) {
         const $enum = property.items?.enum || property.enum;
         if (Array.isArray($enum)) {
-            return new FormSelectSubject((selectModel, formControl) => {
-                const selectOptions = $enum.map(value => {
-                    const label = options.labelPrefix
-                        ? this.language.getTranslationSync(`${options.labelPrefix}.${property.id}.${value}`)
-                        : `${property.id}.${value}`;
-                    return { value, label };
-                });
-                return this.fixSelectOptions(selectModel, formControl, selectOptions);
-            });
-        }
-        if (isStringWithVal(property.optionsPath)) {
-            return new FormSelectSubject(async (selectModel, control, root, indexes) => {
-                let path = property.optionsPath;
-                let target = control;
-                let model = selectModel;
-                if (path.startsWith("$root")) {
-                    path = path.substring(5);
-                    while (target.parent) {
-                        target = target.parent;
-                    }
-                    model = root;
-                }
-                while (path.startsWith(".")) {
-                    path = path.substring(1);
-                    if (target.parent) {
-                        target = target.parent;
-                    }
-                    model = model.parent || root;
-                }
-                Object.keys(indexes).forEach(key => {
-                    path = path.replace(key, indexes[key]);
-                });
-                model = this.findModelByPath(model, path.split("."));
-                const modelOptions = model instanceof DynamicSelectModel
-                    ? await firstValueFrom(model.options$) :
-                    [];
-                const value = ObjectUtils.getValue(target.value, path);
-                const options = (!ObjectUtils.isArray(value) ? [] : value).map(value => {
-                    const modelOption = modelOptions.find(t => t.value == value);
-                    return { value, label: modelOption?.label || value };
-                });
-                return this.fixSelectOptions(selectModel, control, options);
-            });
-        }
-        return new FormSelectSubject(async (selectModel, control) => {
-            const entries = Object.entries(control.root?.controls || {});
+            return from(this.builder.fixSelectOptions(field, $enum.map(value => {
+                const label = options.labelPrefix
+                    ? this.language.getTranslationSync(`${options.labelPrefix}.${property.id}.${value}`)
+                    : `${property.id}.${value}`;
+                return { value, label };
+            })));
+        }
+        if (isStringWithVal(property.endpoint)) {
+            const entries = Object.entries(field.formControl.root?.controls || {});
             const endpoint = entries.reduce((res, [key, control]) => {
                 return this.replaceOptionsEndpoint(res, key, control?.value);
             }, `${property.endpoint}`);
@@ -1080,46 +868,37 @@ class DynamicFormService extends DynamicFormService$1 {
                     };
                 });
             });
-            const options = (await this.api.cache[endpoint]).map(t => Object.assign({}, t));
-            return this.fixSelectOptions(selectModel, control, options);
-        });
-    }
-    getFormRadioConfig(property, options) {
-        return Object.assign(this.getFormControlConfig(property, options), {
-            options: this.getFormSelectOptions(property, options),
-        });
-    }
-    getFormSelectConfig(property, options) {
-        return Object.assign(this.getFormControlConfig(property, options), {
-            options: this.getFormSelectOptions(property, options),
-            multiple: property.type == "array",
-            groupBy: property.groupBy,
-            inline: property.inline,
-            allowEmpty: property.allowEmpty,
-        });
-    }
-    getFormUploadConfig(property, options) {
-        const url = this.api.url(property.url || "assets");
-        const { accept, autoUpload, maxSize, minSize, removeUrl, showFileList } = property;
-        return Object.assign(this.getFormControlConfig(property, options), {
-            url,
-            accept,
-            autoUpload,
-            maxSize,
-            minSize,
-            removeUrl,
-            showFileList
-        });
-    }
-    getFormCheckboxConfig(property, options) {
-        return Object.assign(this.getFormControlConfig(property, options), {
-            indeterminate: property.indeterminate || false
-        });
-    }
-    cloneFormArrayGroup(index, formArray, formArrayModel) {
-        this.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.patchGroup(formArray.at(index + 1).value, formArrayModel.groups[index].group, formArray.at(index));
-        formArrayModel.filterGroups();
+            const options = this.api.cache[endpoint];
+            return from(options.then(opts => {
+                return this.builder.fixSelectOptions(field, opts.map(o => Object.assign({}, o)));
+            }));
+        }
+        let path = property.optionsPath;
+        let control = field.formControl;
+        let current = field;
+        if (path.startsWith("$root")) {
+            path = path.substring(5);
+            control = control.root || control;
+            while (current.parent) {
+                current = current.parent;
+            }
+        }
+        while (path.startsWith(".")) {
+            path = path.substring(1);
+            control = control.parent || control;
+            current = current.parent || current;
+        }
+        control = !path ? control : control.get(path);
+        return control.valueChanges.pipe(startWith(control.value), distinctUntilChanged(), switchMap(async (controlVal) => {
+            const currentOpts = current.props.options;
+            const finalOpts = isObservable(currentOpts)
+                ? await firstValueFrom(currentOpts)
+                : (Array.isArray(currentOpts) ? currentOpts : []);
+            return this.builder.fixSelectOptions(field, (!Array.isArray(controlVal) ? [] : controlVal).map(value => {
+                const modelOption = finalOpts.find(t => t.value == value);
+                return { value, label: modelOption?.label || value };
+            }));
+        }));
     }
     replaceOptionsEndpoint(endpoint, key, value) {
         if (ObjectUtils.isObject(value)) {
@@ -1134,46 +913,27 @@ class DynamicFormService extends DynamicFormService$1 {
         }
         return endpoint.replace(new RegExp(`\\$${key}`, "gi"), `${value ?? ""}`);
     }
-    async fixSelectOptions(model, control, options) {
-        if (!options)
-            return [];
-        for (const option of options) {
-            option.classes = [option.classes, model.getClasses(option, model, control, this.injector)].filter(isStringWithVal).join(" ");
-            option.label = await this.language.getTranslation(option.label);
-        }
-        return options;
-    }
-    getValidators(property, options) {
-        const validators = {};
-        const schema = options.schema;
-        if (ObjectUtils.isArray(schema.required) && schema.required.indexOf(property.id) >= 0) {
-            validators.required = null;
-        }
-        this.addPropertyValidators(validators, property);
-        this.addItemsValidators(validators, property.items);
-        return validators;
-    }
     addPropertyValidators(validators, property) {
         if (!property)
             return;
         if (!isNaN(property.minLength)) {
-            validators.minLength = property.minLength;
+            validators.minLength = minLengthValidation(property.minLength);
         }
         if (!isNaN(property.maxLength)) {
-            validators.maxLength = property.maxLength;
+            validators.maxLength = maxLengthValidation(property.maxLength);
         }
         if (!isNaN(property.minimum)) {
-            validators.min = property.minimum;
+            validators.min = minValueValidation(property.minimum);
         }
         if (!isNaN(property.maximum)) {
-            validators.max = property.maximum;
-        }
-        if (isString(property.pattern) && property.pattern.length) {
-            validators.pattern = property.pattern;
+            validators.max = maxValueValidation(property.maximum);
         }
+        // if (isString(property.pattern) && property.pattern.length) {
+        //     validators.pattern = property.pattern;
+        // }
         switch (property.format) {
             case "email":
-                validators.email = null;
+                validators.email = emailValidation();
                 break;
         }
     }
@@ -1181,123 +941,89 @@ class DynamicFormService extends DynamicFormService$1 {
         if (!items)
             return;
         if (!isNaN(items.minLength)) {
-            validators.itemsMinLength = items.minLength;
+            validators.itemsMinLength = minLengthValidation(items.minLength, true);
         }
         if (!isNaN(items.maxLength)) {
-            validators.itemsMaxLength = items.maxLength;
+            validators.itemsMaxLength = maxLengthValidation(items.maxLength, true);
         }
         if (!isNaN(items.minimum)) {
-            validators.itemsMinValue = items.minimum;
+            validators.itemsMinValue = minValueValidation(items.minimum, true);
         }
         if (!isNaN(items.maximum)) {
-            validators.itemsMaxValue = items.maximum;
+            validators.itemsMaxValue = maxValueValidation(items.maximum, true);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicFormService, deps: [{ token: i1.DynamicFormComponentService }, { token: i1.DynamicFormValidationService }, { token: OpenApiService }, { token: Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicFormService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, deps: [{ token: i2.OpenApiService }, { token: i0.Injector }, { token: DynamicFormBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.DynamicFormComponentService }, { type: i1.DynamicFormValidationService }, { type: i2.OpenApiService, decorators: [{
-                    type: Inject,
-                    args: [OpenApiService]
-                }] }, { type: i0.Injector, decorators: [{
-                    type: Inject,
-                    args: [Injector]
-                }] }] });
+        }], ctorParameters: () => [{ type: i2.OpenApiService }, { type: i0.Injector }, { type: DynamicFormBuilderService }] });
 
 class AsyncSubmitDirective {
-    toaster;
-    cdr;
-    zone;
-    elem;
-    renderer;
-    method;
-    form;
-    context;
-    onSuccess;
-    onError;
-    loading;
-    disabled;
-    callback;
-    subscription;
+    method = input(null, { alias: "async-submit" });
+    form = input();
+    context = input();
+    onSuccess = output();
+    onError = output();
+    toaster = inject(TOASTER_SERVICE);
+    renderer = inject(Renderer2);
+    elem = inject(ElementRef);
+    status = computed(() => {
+        const form = this.form();
+        return form?.status() || null;
+    });
+    group = computed(() => {
+        const form = this.form();
+        return form?.group() || null;
+    });
+    loading = signal(false);
+    callback = signal(null);
     get isDisabled() {
-        return this.disabled;
-    }
-    set isDisabled(value) {
-        this.disabled = value;
-        if (value) {
-            this.renderer.setAttribute(this.elem.nativeElement, "disabled", "disabled");
-            return;
-        }
-        this.renderer.removeAttribute(this.elem.nativeElement, "disabled");
+        return this.status() !== "VALID";
     }
     get isLoading() {
-        return this.loading;
-    }
-    constructor(toaster, cdr, zone, elem, renderer) {
-        this.toaster = toaster;
-        this.cdr = cdr;
-        this.zone = zone;
-        this.elem = elem;
-        this.renderer = renderer;
-        this.onSuccess = new EventEmitter();
-        this.onError = new EventEmitter();
-        if (elem.nativeElement.tagName !== "BUTTON")
-            return;
-        renderer.setAttribute(elem.nativeElement, "type", "button");
+        return this.loading();
     }
-    ngOnChanges(changes) {
-        // Clear old subscription
-        this.subscription?.unsubscribe();
-        // Check if form changed
-        if (changes.form) {
-            const form = changes.form.currentValue;
-            if (!form)
-                return;
-            // Force form for checking changes after fields get autofilled by the browser
-            // setTimeout(() => {
-            //     console.log(
-            //         this.elem.nativeElement,
-            //         this.elem.nativeElement.focus
-            //     );
-            //     this.elem.nativeElement.focus?.();
-            // }, 1500);
-        }
-        // Handle other things if we have a form instance
-        if (!this.form)
-            return;
-        this.isDisabled = this.form.group?.status !== "VALID";
-        this.cdr.detectChanges();
-        this.subscription = ObservableUtils.multiSubscription(this.form.group?.statusChanges.subscribe(() => {
-            const status = this.form.group?.status;
-            this.isDisabled = status !== "VALID";
-            this.cdr.detectChanges();
-            if (!this.callback || status == "PENDING")
+    constructor() {
+        effect(() => {
+            if (this.elem.nativeElement.tagName === "BUTTON") {
+                this.renderer.setAttribute(this.elem.nativeElement, "type", "button");
+            }
+        });
+        effect(() => {
+            const status = this.status();
+            const cb = this.callback();
+            if (!cb || status == "PENDING")
                 return;
-            if (!this.disabled) {
-                this.callback();
+            if (status === "VALID") {
+                cb();
             }
-            this.callback = null;
-        }), this.form.onSubmit?.pipe(debounceTime(200)).subscribe(() => this.callMethod()));
-    }
-    ngOnDestroy() {
-        this.subscription?.unsubscribe();
+            this.callback.set(null);
+        });
+        effect(() => {
+            const form = this.form();
+            if (!form)
+                return;
+            const sub = outputToObservable(form.onSubmit)
+                .pipe(debounceTime(200)).subscribe(() => this.callMethod());
+            return () => sub.unsubscribe();
+        });
     }
     click() {
-        this.callback = () => this.callMethod();
-        const status = this.form.group?.status;
-        if (status !== "VALID" && status !== "INVALID")
+        const status = this.status();
+        if (status !== "VALID" && status !== "INVALID") {
+            this.callback.set(() => this.callMethod());
             return;
-        this.callback();
-        this.callback = null;
+        }
+        this.callMethod();
     }
     callMethod() {
-        if (this.loading)
+        if (this.loading())
             return;
-        this.loading = true;
-        this.method(this.form, this.context).then(result => {
-            this.loading = false;
+        this.loading.set(true);
+        this.method()(this.form(), this.context).then(result => {
+            this.loading.set(false);
             if (result) {
                 this.onSuccess.emit(result);
                 this.toaster.success(result.message, result.context);
@@ -1305,36 +1031,22 @@ class AsyncSubmitDirective {
         }, reason => {
             if (!reason || !reason.message)
                 throw new Error("Reason must implement IAsyncMessage interface");
-            this.loading = false;
+            this.loading.set(false);
             this.onError.emit(reason);
             this.toaster.error(reason.message, reason.context);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AsyncSubmitDirective, deps: [{ token: TOASTER_SERVICE }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.3", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: ["async-submit", "method"], form: "form", context: "context" }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: AsyncSubmitDirective, isStandalone: false, selector: "[async-submit]", inputs: { method: { classPropertyName: "method", publicName: "async-submit", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSuccess: "onSuccess", onError: "onError" }, host: { listeners: { "click": "click()" }, properties: { "class.disabled": "this.isDisabled", "class.loading": "this.isLoading" } }, exportAs: ["async-submit"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AsyncSubmitDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: false,
                     selector: "[async-submit]",
                     exportAs: "async-submit"
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [TOASTER_SERVICE]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { method: [{
-                type: Input,
-                args: ["async-submit"]
-            }], form: [{
-                type: Input
-            }], context: [{
-                type: Input
-            }], onSuccess: [{
-                type: Output
-            }], onError: [{
-                type: Output
-            }], isDisabled: [{
+        }], ctorParameters: () => [], propDecorators: { isDisabled: [{
                 type: HostBinding,
                 args: ["class.disabled"]
             }], isLoading: [{
@@ -1345,616 +1057,124 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                 args: ["click"]
             }] } });
 
-class DynamicBaseFormComponent extends DynamicFormComponent {
-    formService;
-    events;
-    group = null;
-    model = null;
-    layout = null;
-    blur = new EventEmitter();
-    change = new EventEmitter();
-    focus = new EventEmitter();
-    groupModel;
-    labelPrefix;
-    getComponentType;
-    contentTemplates;
-    viewTemplates;
-    get status() {
-        return !this.group ? null : this.group.status;
-    }
-    onValueChange;
-    onStatusChange;
-    onSubmit;
-    onDetectChanges;
-    subscription = new Subscription();
-    groupSubscription = new Subscription();
-    constructor(formService, events, changeDetectorRef, componentService) {
-        super(changeDetectorRef, componentService);
-        this.formService = formService;
-        this.events = events;
-        this.groupModel = undefined;
-        this.labelPrefix = "";
-        this.getComponentType = () => null;
-        this.templates = new QueryList();
-        this.onValueChange = new EventEmitter();
-        this.onStatusChange = new EventEmitter();
-        this.onSubmit = new EventEmitter();
-        this.onDetectChanges = new EventEmitter();
-    }
-    submit() {
-        this.onSubmit.emit(this);
-    }
-    ngOnChanges(changes) {
-        this.groupSubscription.unsubscribe();
-        if (this.group) {
-            this.groupSubscription = ObservableUtils.multiSubscription(this.group.statusChanges.subscribe(() => {
-                this.onStatusChange.emit(this);
-            }), this.change.pipe(groupBy(ev => ev.model))
-                .pipe(mergeMap(t => t.pipe(debounceTime(500))))
-                .subscribe(ev => {
-                this.onValueChange.emit({ ...ev, form: this });
-            }));
-        }
-        if (changes.groupModel) {
-            this.model = this.groupModel?.group;
-        }
-        if (changes.model) {
-            this.groupModel = new DynamicFormGroupModel({ id: "root", group: this.model || [] });
+class DynamicFormComponent {
+    builder = inject(DynamicFormBuilderService);
+    labelPrefix = input("label");
+    data = input({});
+    fields = input(null);
+    config$ = resource({
+        request: () => ({
+            fields: this.fields(),
+            labelPrefix: this.labelPrefix()
+        }),
+        loader: async (p) => {
+            const { fields, labelPrefix } = p.request;
+            return fields || this.builder.resolveFormFields(this.data()?.constructor, null, {
+                labelPrefix
+            });
         }
-    }
-    ngAfterViewInit() {
-        this.subscription = ObservableUtils.multiSubscription(ObservableUtils.subscribe({
-            subjects: [this.contentTemplates.changes, this.viewTemplates.changes],
-            cb: () => {
-                const templates = this.contentTemplates.toArray().concat(this.viewTemplates.toArray());
-                this.templates.reset(templates);
-            }
-        }), this.events.languageChanged.subscribe(() => {
-            this.formService.notifyChanges(this.model, this.group, this.model);
-            this.formService.detectChanges(this);
-        }));
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.subscription.unsubscribe();
-        this.groupSubscription.unsubscribe();
-    }
-    detectChanges() {
-        super.detectChanges();
-        this.onDetectChanges.emit(this);
-    }
-    insertFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.insertFormArrayGroup(index, formArray, formArrayModel);
-        this.detectChanges();
-    }
-    cloneFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.cloneFormArrayGroup(index, formArray, formArrayModel);
-        this.detectChanges();
-    }
-    removeFormArrayGroup(index, formArray, formArrayModel) {
-        this.formService.removeFormArrayGroup(index, formArray, formArrayModel);
-        this.detectChanges();
-    }
-    moveFormArrayGroup(index, step, formArray, formArrayModel) {
-        this.formService.moveFormArrayGroup(index, step, formArray, formArrayModel);
-        this.detectChanges();
-    }
-    clearFormArray(formArray, formArrayModel) {
-        this.formService.clearFormArray(formArray, formArrayModel);
-        this.detectChanges();
-    }
-    getClass(model) {
-        const parts = collectPathAble(model, p => p.id);
-        if (parts.length == 0)
-            return "";
-        if (model instanceof DynamicFormGroupModel) {
-            return `form-group-${parts.join("-")}`;
+    });
+    config = computed(() => this.config$.value());
+    group = computed(() => {
+        this.config();
+        return new FormGroup$1({});
+    });
+    status$ = rxResource({
+        request: () => this.group(),
+        loader: p => p.request.statusChanges
+    });
+    status = computed(() => this.status$.value());
+    onSubmit = output();
+    options = {
+        formState: {
+            injector: inject(Injector)
         }
-        return `form-control-${parts.join("-")}`;
+    };
+    submit() {
+        this.onSubmit.emit(this);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormComponent, deps: [{ token: DynamicFormService }, { token: EventsService }, { token: i0.ChangeDetectorRef }, { token: i1.DynamicFormComponentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseFormComponent, isStandalone: false, selector: "dynamic-base-form", inputs: { group: "group", model: "model", layout: "layout", groupModel: "groupModel", labelPrefix: "labelPrefix", getComponentType: "getComponentType" }, outputs: { blur: "blur", change: "change", focus: "focus", onValueChange: "onValueChange", onStatusChange: "onStatusChange", onSubmit: "onSubmit", onDetectChanges: "onDetectChanges" }, queries: [{ propertyName: "contentTemplates", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "viewTemplates", predicate: DynamicTemplateDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.Default });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormComponent, isStandalone: false, selector: "dynamic-form", inputs: { labelPrefix: { classPropertyName: "labelPrefix", publicName: "labelPrefix", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n", dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-form",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.Default
-                }]
-        }], ctorParameters: () => [{ type: DynamicFormService, decorators: [{
-                    type: Inject,
-                    args: [DynamicFormService]
-                }] }, { type: i2.EventsService, decorators: [{
-                    type: Inject,
-                    args: [EventsService]
-                }] }, { type: i0.ChangeDetectorRef }, { type: i1.DynamicFormComponentService }], propDecorators: { group: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], groupModel: [{
-                type: Input
-            }], labelPrefix: [{
-                type: Input
-            }], getComponentType: [{
-                type: Input
-            }], contentTemplates: [{
-                type: ContentChildren,
-                args: [DynamicTemplateDirective]
-            }], viewTemplates: [{
-                type: ViewChildren,
-                args: [DynamicTemplateDirective]
-            }], onValueChange: [{
-                type: Output
-            }], onStatusChange: [{
-                type: Output
-            }], onSubmit: [{
-                type: Output
-            }], onDetectChanges: [{
-                type: Output
-            }] } });
+            args: [{ standalone: false, selector: "dynamic-form", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (config() && group()) {\n    <form [formGroup]=\"group()\" (ngSubmit)=\"submit()\">\n        <input type=\"submit\" [hidden]=\"true\" />\n        <formly-form [model]=\"data()\"\n                     [fields]=\"config()\"\n                     [form]=\"group()\"\n                     [options]=\"options\"></formly-form>\n        <ng-content></ng-content>\n    </form>\n}\n" }]
+        }] });
 
-class DynamicBaseFormControlContainerComponent extends DynamicFormControlContainerComponent {
-    form;
-    cdr;
-    injector;
-    contentTemplateList = null;
-    klass = null;
-    context = null;
-    group = null;
-    hostClass = null;
-    inputTemplateList = null;
-    layout = null;
-    model = null;
-    blur = new EventEmitter();
-    change = new EventEmitter();
-    focus = new EventEmitter();
-    componentViewContainerRef = null;
-    get componentType() {
-        return this.form.getComponentType?.(this.model, this.injector)
-            ?? this.componentService.getCustomComponentType(this.model);
-    }
-    get startTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_START")
-            : this.layoutService.getStartTemplate(this.model, this.templates);
-    }
-    get endTemplate() {
-        return (this.model.type == DYNAMIC_FORM_CONTROL_TYPE_ARRAY)
-            ? this.layoutService.getAlignedTemplate(this.model, this.templates, "ARRAY_END")
-            : this.layoutService.getEndTemplate(this.model, this.templates);
-    }
-    get formService() {
-        return this.form.formService;
-    }
-    onDetectChanges;
-    constructor(form, cdr, injector, cfr, layoutService, validationService, componentService, relationService) {
-        super(cdr, cfr, layoutService, validationService, componentService, relationService);
-        this.form = form;
-        this.cdr = cdr;
-        this.injector = injector;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.onDetectChanges = this.form.onDetectChanges.subscribe(() => {
-            this.changeDetectorRef.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.onDetectChanges.unsubscribe();
-    }
-    getLabel() {
-        if (this.form?.labelPrefix) {
-            const label = collectPathAble(this.model, p => p.id);
-            if (label.length == 0) {
-                return this.model.label;
-            }
-            label.unshift(this.form.labelPrefix);
-            return label.join(".");
+class DynamicFormArrayComponent extends FieldArrayType {
+    currentTab = signal(0);
+    clear() {
+        const control = this.formControl;
+        while (control.length > 0) {
+            this.remove(0);
         }
-        return this.model.label;
     }
-    getLabelIcon() {
-        if (this.context instanceof DynamicFormArrayGroupModel) {
-            const arrayModel = this.context.context;
-            if (arrayModel && arrayModel.sortBy == this.model.id) {
-                return arrayModel.sortOrder;
-            }
-        }
-        return null;
-    }
-    clickLabel() {
-        if (this.context instanceof DynamicFormArrayGroupModel) {
-            const arrayModel = this.context.context;
-            if (arrayModel) {
-                arrayModel.sortBy = this.model.id;
-            }
-        }
-    }
-    createFormControlComponent() {
-        super.createFormControlComponent();
-        const component = this.componentRef?.instance;
-        if (!component || !ObjectUtils.isFunction(component.initialize))
-            return;
-        component.initialize(this.changeDetectorRef);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormControlContainerComponent, deps: [{ token: DynamicBaseFormComponent }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ComponentFactoryResolver }, { token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: i1.DynamicFormComponentService }, { token: i1.DynamicFormRelationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseFormControlContainerComponent, isStandalone: false, selector: "dynamic-base-form-control", inputs: { context: "context", group: "group", hostClass: "hostClass", inputTemplateList: ["templates", "inputTemplateList"], layout: "layout", model: "model" }, outputs: { blur: "blur", change: "change", focus: "focus" }, host: { properties: { "class": "this.klass" } }, providers: [
-            { provide: DynamicFormControlContainerComponent, useExisting: DynamicBaseFormControlContainerComponent }
-        ], queries: [{ propertyName: "contentTemplateList", predicate: DynamicTemplateDirective }], viewQueries: [{ propertyName: "componentViewContainerRef", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DynamicFormArrayComponent, isStandalone: false, selector: "dynamic-form-array", usesInheritance: true, ngImport: i0, template: "<div class=\"ngx-dynamic-form-array\">\n    <label class=\"form-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-array-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </label>\n    <div class=\"ngx-dynamic-form-container\">\n        @if (props.useTabs) {\n            <ul class=\"form-array-tabs\">\n                @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                    <li>\n                        <a class=\"btn\" [ngClass]=\"[currentTab() === ix ? 'btn-primary' : 'btn-secondary']\"\n                           (click)=\"currentTab.set(ix)\">\n                            {{ (field.formControl.value | getValue : props.tabsLabel) || ix + 1 }}\n                        </a>\n                    </li>\n                }\n            </ul>\n        }\n        @for (field of field.fieldGroup; track field.key; let ix = $index) {\n            @if (!props.useTabs || ix === currentTab()) {\n                <div class=\"form-array-item\">\n                    <div class=\"form-array-buttons\">\n                        @if (props.removeItem) {\n                            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"remove(ix)\">\n                                <i icon=\"trash-outline\"></i>\n                            </button>\n                        }\n                        @if (props.insertItem) {\n                            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add(ix)\">\n                                <i icon=\"plus-outline\"></i>\n                            </button>\n                        }\n                    </div>\n                    <formly-field [field]=\"field\"></formly-field>\n                </div>\n            }\n        }\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"clear()\">\n                    <i icon=\"trash-outline\"></i>\n                    {{ 'button.clear-items' | translate }}\n                </button>\n            }\n            @if (props.addItem) {\n                <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add()\">\n                    <i icon=\"plus-outline\"></i>\n                    {{ 'button.insert-item' | translate }}\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[icon]", inputs: ["icon", "activeIcon", "active"], outputs: ["activeChange"] }, { kind: "component", type: i3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "pipe", type: i2.GetValuePipe, name: "getValue" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormControlContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormArrayComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-form-control",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [
-                        { provide: DynamicFormControlContainerComponent, useExisting: DynamicBaseFormControlContainerComponent }
-                    ]
-                }]
-        }], ctorParameters: () => [{ type: DynamicBaseFormComponent }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ComponentFactoryResolver }, { type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: i1.DynamicFormComponentService }, { type: i1.DynamicFormRelationService }], propDecorators: { contentTemplateList: [{
-                type: ContentChildren,
-                args: [DynamicTemplateDirective]
-            }], klass: [{
-                type: HostBinding,
-                args: ["class"]
-            }], context: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], hostClass: [{
-                type: Input
-            }], inputTemplateList: [{
-                type: Input,
-                args: ["templates"]
-            }], layout: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], componentViewContainerRef: [{
-                type: ViewChild,
-                args: ["componentViewContainer", {
-                        read: ViewContainerRef,
-                        static: true
-                    }]
-            }] } });
+            args: [{ standalone: false, selector: "dynamic-form-array", encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-dynamic-form-array\">\n    <label class=\"form-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-array-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </label>\n    <div class=\"ngx-dynamic-form-container\">\n        @if (props.useTabs) {\n            <ul class=\"form-array-tabs\">\n                @for (field of field.fieldGroup; track field.key; let ix = $index) {\n                    <li>\n                        <a class=\"btn\" [ngClass]=\"[currentTab() === ix ? 'btn-primary' : 'btn-secondary']\"\n                           (click)=\"currentTab.set(ix)\">\n                            {{ (field.formControl.value | getValue : props.tabsLabel) || ix + 1 }}\n                        </a>\n                    </li>\n                }\n            </ul>\n        }\n        @for (field of field.fieldGroup; track field.key; let ix = $index) {\n            @if (!props.useTabs || ix === currentTab()) {\n                <div class=\"form-array-item\">\n                    <div class=\"form-array-buttons\">\n                        @if (props.removeItem) {\n                            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"remove(ix)\">\n                                <i icon=\"trash-outline\"></i>\n                            </button>\n                        }\n                        @if (props.insertItem) {\n                            <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add(ix)\">\n                                <i icon=\"plus-outline\"></i>\n                            </button>\n                        }\n                    </div>\n                    <formly-field [field]=\"field\"></formly-field>\n                </div>\n            }\n        }\n        <div class=\"form-array-buttons\">\n            @if (props.clearItems) {\n                <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"clear()\">\n                    <i icon=\"trash-outline\"></i>\n                    {{ 'button.clear-items' | translate }}\n                </button>\n            }\n            @if (props.addItem) {\n                <button type=\"button\" class=\"btn btn-sm btn-primary\" (click)=\"add()\">\n                    <i icon=\"plus-outline\"></i>\n                    {{ 'button.insert-item' | translate }}\n                </button>\n            }\n        </div>\n    </div>\n</div>\n" }]
+        }] });
 
-class DynamicBaseFormArrayComponent extends DynamicFormArrayComponent {
-    form;
-    injector;
-    cdr;
-    formLayout = null;
-    group = null;
-    layout = null;
-    model = null;
-    templates = null;
-    blur = new EventEmitter();
-    change = new EventEmitter();
-    customEvent = new EventEmitter();
-    focus = new EventEmitter();
-    components = null;
-    get useTabs() {
-        return this.model?.useTabs;
-    }
-    subscription;
-    constructor(layoutService, validationService, form, injector, cdr) {
-        super(layoutService, validationService);
-        this.form = form;
-        this.injector = injector;
-        this.cdr = cdr;
-    }
-    initialize(cdr) {
-        this.subscription = this.model.filteredGroups.subscribe(filteredGroups => {
-            this.updateGroups(filteredGroups);
-        });
-        this.model.initialize(this.array);
-    }
-    ngOnDestroy() {
-        if (this.subscription)
-            this.subscription.unsubscribe();
-    }
-    saveTab(index) {
-        this.model.saveTab(index, this.model.getFiltered(index), this.model, this.injector);
-    }
-    restoreTab() {
-        return this.model.restoreTab(this.model, this.injector);
-    }
-    getTabLabel(index, model) {
-        return this.model.getTabLabel(index, model, this.model, this.array, this.injector);
-    }
-    getClass(context, place, model) {
-        return [
-            context == "element" ? this.getModelClass(model) : null,
-            context == "element" ? this.getAdditionalClass(model) : null,
-            super.getClass(context, place, model),
-            model instanceof DynamicFormValueControlModel ? model.additional?.classes : null
-        ].filter(cls => !!cls).join(" ");
-    }
-    getModelClass(model) {
-        const parts = collectPathAble(model, p => p.id);
-        if (parts.length == 0)
-            return "";
-        if (model instanceof DynamicFormGroupModel$1) {
-            return `form-group-${parts.join("-")}`;
-        }
-        return `form-control-${parts.join("-")}`;
-    }
-    getAdditionalClass(model) {
-        if (model instanceof DynamicFormArrayModel) {
-            return model.additional?.classes;
-        }
-        if (model instanceof DynamicFormValueControlModel) {
-            return model.additional?.classes;
-        }
-        return null;
-    }
-    updateGroups(filteredGroups) {
-        this.cdr.detectChanges();
-        this.components.forEach(t => t.cdr.detectChanges());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormArrayComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: DynamicBaseFormComponent }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseFormArrayComponent, isStandalone: false, selector: "dynamic-base-form-array", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model", templates: "templates" }, outputs: { blur: "blur", change: "change", customEvent: "customEvent", focus: "focus" }, viewQueries: [{ propertyName: "components", predicate: i0.forwardRef(() => DynamicBaseFormControlContainerComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class DynamicFormChipsComponent extends FieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormChipsComponent, isStandalone: false, selector: "dynamic-form-chips", usesInheritance: true, ngImport: i0, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.ChipsComponent, selector: "chips", inputs: ["value", "multiple", "disabled", "type", "min", "max", "minLength", "maxLength", "step", "placeholder", "unique", "options"], outputs: ["valueChange"] }, { kind: "directive", type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormChipsComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-form-array",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: () => [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: DynamicBaseFormComponent }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { formLayout: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], templates: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], customEvent: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], components: [{
-                type: ViewChildren,
-                args: [forwardRef(() => DynamicBaseFormControlContainerComponent)]
-            }] } });
+            args: [{ standalone: false, selector: "dynamic-form-chips", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<chips [formControl]=\"formControl\"\n       [type]=\"props.type\"\n       [step]=\"props.step\"\n       [minLength]=\"props.minLength\"\n       [maxLength]=\"props.maxLength\"\n       [min]=\"props.min\"\n       [max]=\"props.max\"\n       [multiple]=\"props.multiple\"\n       [formlyAttributes]=\"field\">\n</chips>\n" }]
+        }] });
 
-class DynamicBaseFormControlComponent extends DynamicFormControlComponent {
-    form;
-    injector;
-    cdr;
-    formLayout = null;
-    group = null;
-    layout = null;
-    model = null;
-    blur = new EventEmitter();
-    change = new EventEmitter();
-    focus = new EventEmitter();
-    subscription;
-    constructor(layoutService, validationService, form, injector, cdr) {
-        super(layoutService, validationService);
-        this.form = form;
-        this.injector = injector;
-        this.cdr = cdr;
-    }
-    ngAfterViewInit() {
-        this.subscription = this.control.valueChanges.pipe(debounceTime(500)).subscribe(value => {
-            this.onValueChanged(value);
-        });
-    }
-    ngOnDestroy() {
-        if (!this.subscription)
-            return;
-        this.subscription.unsubscribe();
-    }
-    submit() {
-        this.form?.submit();
-    }
-    onValueChanged(value) {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormControlComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }, { token: DynamicBaseFormComponent, optional: true }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseFormControlComponent, isStandalone: false, selector: "dynamic-base-form-control", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class DynamicFormFieldComponent extends FieldWrapper {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormFieldComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"['ngx-dynamic-form-field', 'ngx-dynamic-form-' + field.type]\">\n    <label class=\"control-label ng-star-inserted\" *ngIf=\"props.label\">\n        {{ props.label | translate }}\n        <span class=\"form-field-required\" *ngIf=\"props.required && props.hideRequiredMarker !== true\" aria-hidden=\"true\">*</span>\n        <p class=\"form-field-description\" *ngIf=\"props.description\">\n            {{ props.description | translate }}\n        </p>\n    </label>\n    <div class=\"ngx-dynamic-form-control\">\n        <ng-container #fieldComponent></ng-container>\n        <div *ngIf=\"showError\" class=\"invalid-feedback\">\n            <formly-validation-message\n                id=\"{{ id }}-formly-validation-error\"\n                [field]=\"field\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormControlComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-form-control",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: () => [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }, { type: DynamicBaseFormComponent, decorators: [{
-                    type: Optional
-                }] }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { formLayout: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }] } });
+            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"['ngx-dynamic-form-field', 'ngx-dynamic-form-' + field.type]\">\n    <label class=\"control-label ng-star-inserted\" *ngIf=\"props.label\">\n        {{ props.label | translate }}\n        <span class=\"form-field-required\" *ngIf=\"props.required && props.hideRequiredMarker !== true\" aria-hidden=\"true\">*</span>\n        <p class=\"form-field-description\" *ngIf=\"props.description\">\n            {{ props.description | translate }}\n        </p>\n    </label>\n    <div class=\"ngx-dynamic-form-control\">\n        <ng-container #fieldComponent></ng-container>\n        <div *ngIf=\"showError\" class=\"invalid-feedback\">\n            <formly-validation-message\n                id=\"{{ id }}-formly-validation-error\"\n                [field]=\"field\"\n                role=\"alert\"\n            ></formly-validation-message>\n        </div>\n    </div>\n</div>\n" }]
+        }] });
 
-class DynamicBaseFormGroupComponent extends DynamicFormGroupComponent {
-    layoutService;
-    validationService;
-    formLayout = null;
-    group = null;
-    layout = null;
-    model = null;
-    templates = [];
-    blur = new EventEmitter();
-    change = new EventEmitter();
-    customEvent = new EventEmitter();
-    focus = new EventEmitter();
-    components = null;
-    constructor(layoutService, validationService) {
-        super(layoutService, validationService);
-        this.layoutService = layoutService;
-        this.validationService = validationService;
-    }
-    getClass(context, place, model) {
-        return [
-            context == "element" ? this.getModelClass(model) : null,
-            context == "element" ? this.getAdditionalClass(model) : null,
-            super.getClass(context, place, model)
-        ].filter(cls => !!cls).join(" ");
-    }
-    getModelClass(model) {
-        const parts = collectPathAble(model, p => p.id);
-        if (parts.length == 0)
-            return "";
-        if (model instanceof DynamicFormGroupModel) {
-            return `form-group-${parts.join("-")}`;
-        }
-        return `form-control-${parts.join("-")}`;
-    }
-    getAdditionalClass(model) {
-        if (model instanceof DynamicFormArrayModel) {
-            return model.additional?.classes;
-        }
-        if (model instanceof DynamicFormValueControlModel) {
-            return model.additional?.classes;
-        }
-        return null;
+class DynamicFormFieldsetComponent extends FieldWrapper {
+    ngOnInit() {
+        // console.log(this.field.id, this.field.props?.label, this.options);
+        // console.log(this.field.parent);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormGroupComponent, deps: [{ token: i1.DynamicFormLayoutService }, { token: i1.DynamicFormValidationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseFormGroupComponent, isStandalone: false, selector: "dynamic-base-form-group", inputs: { formLayout: "formLayout", group: "group", layout: "layout", model: "model", templates: "templates" }, outputs: { blur: "blur", change: "change", customEvent: "customEvent", focus: "focus" }, viewQueries: [{ propertyName: "components", predicate: i0.forwardRef(() => DynamicFormControlContainerComponent), descendants: true }], usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormFieldsetComponent, isStandalone: false, selector: "dynamic-form-field", usesInheritance: true, ngImport: i0, template: "<div class=\"ngx-dynamic-form-fieldset\">\n    <legend class=\"form-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-group-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </legend>\n    <div class=\"ngx-dynamic-form-container\">\n        <ng-container #fieldComponent></ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseFormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormFieldsetComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-form-group",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: () => [{ type: i1.DynamicFormLayoutService }, { type: i1.DynamicFormValidationService }], propDecorators: { formLayout: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], model: [{
-                type: Input
-            }], templates: [{
-                type: Input
-            }], blur: [{
-                type: Output
-            }], change: [{
-                type: Output
-            }], customEvent: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], components: [{
-                type: ViewChildren,
-                args: [forwardRef(() => DynamicFormControlContainerComponent)]
-            }] } });
+            args: [{ standalone: false, selector: "dynamic-form-field", encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-dynamic-form-fieldset\">\n    <legend class=\"form-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-group-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </legend>\n    <div class=\"ngx-dynamic-form-container\">\n        <ng-container #fieldComponent></ng-container>\n    </div>\n</div>\n" }]
+        }] });
 
-class DynamicBaseSelectComponent extends DynamicBaseFormControlComponent {
-    groups$;
-    hasOptions;
-    ngOnInit() {
-        this.groups$ = new BehaviorSubject([]);
-        this.subscription = this.model.options$.subscribe(options => {
-            const groupBy = this.model.inline || !this.model.multiple ? this.model.groupBy : null;
-            const grouped = options.reduce((res, option) => {
-                const key = replaceSpecialChars(groupBy ? option.props[this.model.groupBy] || "default" : "default", "-");
-                res[key] = res[key] || [];
-                res[key].push(option);
-                return res;
-            }, {});
-            const groups = Object.keys(grouped).map(group => {
-                return {
-                    group,
-                    options: grouped[group]
-                };
-            });
-            this.hasOptions = groups.length > 0;
-            this.groups$.next(groups);
-            this.cdr.detectChanges();
-        });
-    }
-    ngOnDestroy() {
-        if (this.subscription)
-            this.subscription.unsubscribe();
-    }
-    isSelected(option) {
-        if (this.model.multiple) {
-            return this.control.value?.indexOf(option.value) >= 0;
-        }
-        return this.control.value == option.value;
-    }
-    selectToggle(option, state) {
-        if (this.model.multiple) {
-            const value = Array.from(this.control.value || []);
-            const index = value.indexOf(option.value);
-            if (index >= 0) {
-                value.splice(index, 1);
-            }
-            if (state) {
-                value.push(option.value);
-            }
-            this.control.setValue(value);
-            this.onChange(value);
-            return;
-        }
-        this.control.setValue(option.value);
-        this.onChange(option.value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DynamicBaseSelectComponent, isStandalone: false, selector: "dynamic-base-select", usesInheritance: true, ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+class DynamicFormGroupComponent extends FieldWrapper {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormGroupComponent, isStandalone: false, selector: "dynamic-form-group", usesInheritance: true, ngImport: i0, template: "<div class=\"ngx-dynamic-form-group\">\n    <label class=\"form-group-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-group-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </label>\n    <div class=\"ngx-dynamic-form-container\">\n        <ng-container #fieldComponent></ng-container>\n    </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DynamicBaseSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormGroupComponent, decorators: [{
             type: Component,
-            args: [{
-                    standalone: false,
-                    selector: "dynamic-base-select",
-                    template: "",
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
+            args: [{ standalone: false, selector: "dynamic-form-group", encapsulation: ViewEncapsulation.None, template: "<div class=\"ngx-dynamic-form-group\">\n    <label class=\"form-group-label\" *ngIf=\"props.label\">\n        {{ props.label }}\n        <p class=\"form-group-description\" *ngIf=\"props.description\">{{ props.description }}</p>\n    </label>\n    <div class=\"ngx-dynamic-form-container\">\n        <ng-container #fieldComponent></ng-container>\n    </div>\n</div>\n" }]
+        }] });
+
+class DynamicFormUploadComponent extends FieldType {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: DynamicFormUploadComponent, isStandalone: false, selector: "dynamic-form-upload", usesInheritance: true, ngImport: i0, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n", dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2.UploadComponent, selector: "upload", inputs: ["value", "disabled", "inline", "accept", "baseUrl", "message", "multiple", "buttonText", "makeUpload", "preProcess"], outputs: ["onUploaded", "onRemove"] }, { kind: "directive", type: i3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DynamicFormUploadComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "dynamic-form-upload", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<upload [formControl]=\"formControl\"\n        [multiple]=\"props.multiple\"\n        [inline]=\"props.inline\"\n        [accept]=\"props.accept\"\n        [baseUrl]=\"props.url\"\n        [makeUpload]=\"props.createUploadData\"\n        [formlyAttributes]=\"field\">\n</upload>\n" }]
         }] });
 
 // --- Components ---
 const components = [
-    DynamicBaseFormComponent,
-    DynamicBaseFormArrayComponent,
-    DynamicBaseFormControlComponent,
-    DynamicBaseFormControlContainerComponent,
-    DynamicBaseFormGroupComponent,
-    DynamicBaseSelectComponent
+    DynamicFormComponent,
+    DynamicFormArrayComponent,
+    DynamicFormChipsComponent,
+    DynamicFormFieldComponent,
+    DynamicFormFieldsetComponent,
+    DynamicFormGroupComponent,
+    DynamicFormUploadComponent
 ];
 // --- Directives ---
 const directives = [
@@ -1962,23 +1182,30 @@ const directives = [
 ];
 // --- Pipes ---
 const pipes = [];
-function defaultFormControlProvider() {
-    return () => null;
-}
 
 class NgxDynamicFormModule {
     static getProviders(config) {
+        const { providers } = FormlyModule.forRoot({
+            types: [
+                { name: "array", component: DynamicFormArrayComponent },
+                { name: "chips", component: DynamicFormChipsComponent },
+                { name: "upload", component: DynamicFormUploadComponent, wrappers: ["form-field"] },
+                { name: "file", extends: "upload" },
+                { name: "translation", extends: "array" },
+            ],
+            wrappers: [
+                { name: "form-field", component: DynamicFormFieldComponent },
+                { name: "form-fieldset", component: DynamicFormFieldsetComponent },
+                { name: "form-group", component: DynamicFormGroupComponent },
+            ],
+            extras: {
+                renderFormlyFieldElement: false
+            }
+        });
         return [
+            ...providers,
             DynamicFormService,
-            {
-                provide: DynamicFormService$1,
-                useExisting: DynamicFormService
-            },
-            {
-                provide: DYNAMIC_FORM_CONTROL_MAP_FN,
-                useFactory: (config?.controlProvider || defaultFormControlProvider),
-                deps: [Injector]
-            }
+            DynamicFormBuilderService
         ];
     }
     static forRoot(config) {
@@ -1990,41 +1217,27 @@ class NgxDynamicFormModule {
     static provideForms(config) {
         return makeEnvironmentProviders(NgxDynamicFormModule.getProviders(config));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicBaseFormComponent, DynamicBaseFormArrayComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, AsyncSubmitDirective], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, declarations: [DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgxUtilsModule], exports: [DynamicBaseFormComponent, DynamicBaseFormArrayComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, AsyncSubmitDirective, FormsModule,
+            NgxUtilsModule,
+            FormlyModule], exports: [DynamicFormComponent, DynamicFormArrayComponent, DynamicFormChipsComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormUploadComponent, AsyncSubmitDirective, FormsModule,
             ReactiveFormsModule,
-            NgxUtilsModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicFormModule, providers: [
-            ...pipes,
-            { provide: NG_VALIDATORS, useValue: validateJSON, multi: true },
-            { provide: NG_VALIDATORS, useValue: validateRequiredTranslation, multi: true },
-            { provide: NG_VALIDATORS, useValue: validateItemsMinLength, multi: true },
-            { provide: NG_VALIDATORS, useValue: validateItemsMaxLength, multi: true },
-            { provide: NG_VALIDATORS, useValue: validateItemsMinValue, multi: true },
-            { provide: NG_VALIDATORS, useValue: validateItemsMaxValue, multi: true },
-            {
-                provide: DYNAMIC_VALIDATORS,
-                useValue: new Map([
-                    ["json", validateJSON],
-                    ["requiredTranslation", validateRequiredTranslation],
-                    ["phone", validatePhone],
-                    ["itemsMinLength", validateItemsMinLength],
-                    ["itemsMaxLength", validateItemsMaxLength],
-                    ["itemsMinValue", validateItemsMinValue],
-                    ["itemsMaxValue", validateItemsMaxValue],
-                ])
-            }
+            NgxUtilsModule,
+            FormlyModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, providers: [
+            ...pipes
         ], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            NgxUtilsModule, FormsModule,
+            NgxUtilsModule,
+            FormlyModule, FormsModule,
             ReactiveFormsModule,
-            NgxUtilsModule] });
+            NgxUtilsModule,
+            FormlyModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxDynamicFormModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2036,7 +1249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
-                        NgxUtilsModule
+                        NgxUtilsModule,
+                        FormlyModule
                     ],
                     exports: [
                         ...components,
@@ -2044,28 +1258,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         ...pipes,
                         FormsModule,
                         ReactiveFormsModule,
-                        NgxUtilsModule
+                        NgxUtilsModule,
+                        FormlyModule
                     ],
                     providers: [
-                        ...pipes,
-                        { provide: NG_VALIDATORS, useValue: validateJSON, multi: true },
-                        { provide: NG_VALIDATORS, useValue: validateRequiredTranslation, multi: true },
-                        { provide: NG_VALIDATORS, useValue: validateItemsMinLength, multi: true },
-                        { provide: NG_VALIDATORS, useValue: validateItemsMaxLength, multi: true },
-                        { provide: NG_VALIDATORS, useValue: validateItemsMinValue, multi: true },
-                        { provide: NG_VALIDATORS, useValue: validateItemsMaxValue, multi: true },
-                        {
-                            provide: DYNAMIC_VALIDATORS,
-                            useValue: new Map([
-                                ["json", validateJSON],
-                                ["requiredTranslation", validateRequiredTranslation],
-                                ["phone", validatePhone],
-                                ["itemsMinLength", validateItemsMinLength],
-                                ["itemsMaxLength", validateItemsMaxLength],
-                                ["itemsMinValue", validateItemsMinValue],
-                                ["itemsMaxValue", validateItemsMaxValue],
-                            ])
-                        }
+                        ...pipes
                     ]
                 }]
         }] });
@@ -2074,5 +1271,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AsyncSubmitDirective, DynamicBaseFormArrayComponent, DynamicBaseFormComponent, DynamicBaseFormControlComponent, DynamicBaseFormControlContainerComponent, DynamicBaseFormGroupComponent, DynamicBaseSelectComponent, DynamicEditorModel, DynamicFormArrayGroupModel, DynamicFormArrayModel, DynamicFormGroupModel, DynamicFormOption, DynamicFormService, DynamicSelectModel, EDITOR_FORMATS, FormSelectSubject, FormSubject, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, collectPathAble, createFormArray, createFormCheckbox, createFormDate, createFormEditor, createFormFile, createFormGroup, createFormInput, createFormSelect, createFormTextarea, customizeFormModel, getDynamicPath, getFormComponent, mergeFormModels, replaceSpecialChars, validateItemsMaxLength, validateItemsMaxValue, validateItemsMinLength, validateItemsMinValue, validateJSON, validatePhone, validateRequiredTranslation };
+export { AsyncSubmitDirective, DynamicFormArrayComponent, DynamicFormBuilderService, DynamicFormChipsComponent, DynamicFormComponent, DynamicFormFieldComponent, DynamicFormFieldsetComponent, DynamicFormGroupComponent, DynamicFormService, DynamicFormUploadComponent, EDITOR_FORMATS, FORM_ROOT_KEY, FormFile, FormGroup, FormInput, FormModel, FormSelect, FormSerializable, FormUpload, MAX_INPUT_NUM, MIN_INPUT_NUM, NgxDynamicFormModule, customizeFormField, emailValidation, jsonValidation, maxLengthValidation, maxValueValidation, mergeFormFields, minLengthValidation, minValueValidation, phoneValidation, replaceSpecialChars, requiredValidation, translationValidation, validationMessage };
 //# sourceMappingURL=stemy-ngx-dynamic-form.mjs.map