@olafvv/ngx-dynamic-form 0.0.2

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

@@ -0,0 +1,873 @@
+import { NgIf, NgFor, AsyncPipe, NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, Injectable, Inject, Optional, Component, Input, EventEmitter, Output, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { map, BehaviorSubject, of, isObservable, startWith, distinctUntilChanged, Subscription } from 'rxjs';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/input';
+import { MatInput, MatInputModule } from '@angular/material/input';
+import * as i4 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$2 from '@angular/cdk/text-field';
+
+const DYNAMIC_FORM_FIELD_MAP_FN = new InjectionToken('DYNAMIC_FORM_FIELD_MAP_FN');
+
+class DynamicFormValidationsService {
+    /**
+     * Get all Validator Functions from the validator configuration
+     * @param validatorConfig
+     * @returns
+     */
+    getValidatorFns(validatorConfig) {
+        return validatorConfig.map((v) => v.validator);
+    }
+    /**
+     * Update the validators on a FormControl based on the provided validator configuration.
+     * This will replace any existing validators on the control or removes all validators when none provided
+     * @param validatorConfig
+     * @param control
+     */
+    updateValidators(validatorConfig, control) {
+        if (!validatorConfig || validatorConfig.length === 0) {
+            control.clearValidators();
+        }
+        else {
+            const validatorFns = this.getValidatorFns(validatorConfig);
+            control.setValidators(validatorFns);
+        }
+        control.updateValueAndValidity();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormValidationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormValidationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormValidationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DynamicFormService {
+    constructor(DYNAMIC_FORM_FIELD_MAP_FN, fb, validatorsService) {
+        this.DYNAMIC_FORM_FIELD_MAP_FN = DYNAMIC_FORM_FIELD_MAP_FN;
+        this.fb = fb;
+        this.validatorsService = validatorsService;
+    }
+    /**
+     * Check if there is a function provided to use custom form controls
+     * @param model
+     * @returns
+     */
+    getCustomControlComponentType(model) {
+        return typeof this.DYNAMIC_FORM_FIELD_MAP_FN === 'function' ? this.DYNAMIC_FORM_FIELD_MAP_FN(model) : null;
+    }
+    /**
+     * Create a FormGroup from the provided form configuration.
+     * Returns a FormGroup.
+     * @param config
+     * @returns
+     */
+    createFormGroup(config) {
+        const group = this.fb.group({});
+        config.forEach((row) => {
+            row.forEach((controlConfig) => {
+                const controlValueConfig = controlConfig;
+                const controlOptions = {
+                    updateOn: controlConfig.updateOn,
+                    validators: this.validatorsService.getValidatorFns(controlConfig.validators)
+                };
+                const control = new UntypedFormControl({ value: controlValueConfig.value ?? controlValueConfig.defaultValue, disabled: controlValueConfig.disabled }, controlOptions);
+                group.addControl(controlConfig.name, control);
+            });
+        });
+        return group;
+    }
+    /**
+     * Transform any list (Observable) to a list of DynamicFormFieldOption which is used in any Dynamic Form Field with options (e.g. DynamicSelect).
+     * Generic types:
+     * T = The type of the items in the provided list
+     * K = The type of the value inside an DynamicFormFieldOption
+     * @param listObs
+     * @param labelCb
+     * @param valueCb
+     * @returns
+     */
+    toDynamicOptionListObs(listObs, labelCb, valueCb) {
+        return listObs.pipe(map((list) => {
+            return list.map((item) => {
+                return {
+                    label: labelCb(item),
+                    value: valueCb(item)
+                };
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormService, deps: [{ token: DYNAMIC_FORM_FIELD_MAP_FN, optional: true }, { token: i1.FormBuilder }, { token: DynamicFormValidationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DYNAMIC_FORM_FIELD_MAP_FN]
+                }, {
+                    type: Optional
+                }] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }]; } });
+
+class DynamicFormFieldBaseComponent {
+    get id() {
+        return this.model.id ?? this.model.name;
+    }
+    get control() {
+        const ctrl = this.group.get(this.model.name);
+        if (!ctrl) {
+            throw new Error(`Provided FormGroup does not contain a control with the name ${this.model.name}`);
+        }
+        return ctrl;
+    }
+    get isValid() {
+        return this.control.valid;
+    }
+    get isInvalid() {
+        return this.control.invalid;
+    }
+    onBlur(ev) {
+        this.blur.emit(ev);
+    }
+    onChange(ev) {
+        this.change.emit(ev);
+    }
+    onFocus(ev) {
+        this.focus.emit(ev);
+    }
+    resetControl() {
+        this.group.get(this.model.name)?.reset();
+    }
+    hasError(name) {
+        return this.control.hasError(name);
+    }
+}
+
+class DynamicButtonComponent extends DynamicFormFieldBaseComponent {
+    onClick() {
+        this.model.onClick();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
+
+class DynamicFormFieldModel {
+    constructor(config) {
+        this.hidden = config.hidden ?? false;
+        this.id = config.id ?? config.name;
+        this.width = config.width ?? 100;
+        this.label = config.label ?? null;
+        this.name = config.name;
+        this.hint = config.hint ?? null;
+        this.validators = config.validators ?? [];
+        this.updateOn = config.updateOn ?? 'change';
+        this.relations = config.relations ?? null;
+        // Create a disabled Subject and Observable to change the state of the FormControl inside DynamicFormFieldComponent by subscribing to disabledChange
+        this.disabled$ = new BehaviorSubject(config.disabled ?? false);
+        this.disabledChange = this.disabled$.asObservable();
+    }
+    get disabled() {
+        return this.disabled$.getValue();
+    }
+    set disabled(disable) {
+        this.disabled$.next(disable);
+    }
+}
+
+const DYNAMIC_FORM_FIELD_BUTTON = 'button';
+class DynamicButton extends DynamicFormFieldModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_BUTTON;
+        this.text = config.text ?? null;
+        this.raised = config.raised ?? false;
+        this.onClick = config.onClick;
+    }
+}
+
+class DynamicCheckboxComponent extends DynamicFormFieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"group\">\n  <mat-checkbox [checked]=\"model.checked\"\n    [formControlName]=\"model.name\"\n    [indeterminate]=\"model.indeterminate\"\n    [labelPosition]=\"model.labelPosition\"\n    [name]=\"model.name\"\n    [id]=\"id\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (change)=\"onChange($event)\">\n\n    <span class=\"checkbox-label\">{{model.label}}</span>\n  </mat-checkbox>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dynamic-checkbox', standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule], template: "<ng-container [formGroup]=\"group\">\n  <mat-checkbox [checked]=\"model.checked\"\n    [formControlName]=\"model.name\"\n    [indeterminate]=\"model.indeterminate\"\n    [labelPosition]=\"model.labelPosition\"\n    [name]=\"model.name\"\n    [id]=\"id\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (change)=\"onChange($event)\">\n\n    <span class=\"checkbox-label\">{{model.label}}</span>\n  </mat-checkbox>\n</ng-container>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+class DynamicFormFieldValueModel extends DynamicFormFieldModel {
+    constructor(config) {
+        super(config);
+        this._defaultValue = config.defaultValue ?? null;
+        this._value = config.value ?? null;
+        this._value$ = new BehaviorSubject(this._value);
+        this.valueChanges = this._value$.asObservable();
+    }
+    get defaultValue() {
+        return this._defaultValue;
+    }
+    set defaultValue(val) {
+        this._defaultValue = val;
+    }
+    get value() {
+        return this._value$.getValue();
+    }
+    set value(val) {
+        this._value$.next(val);
+    }
+}
+
+const DYNAMIC_FORM_FIELD_CHECKBOX = 'checkbox';
+class DynamicCheckbox extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_CHECKBOX;
+        this.value = config.value ?? false;
+        this.labelPosition = config.labelPosition ?? 'after';
+        this.indeterminate = config.indeterminate === true ? true : false;
+    }
+    get checked() {
+        return this.value ?? false;
+    }
+    set checked(checked) {
+        this.value = checked;
+    }
+    toggle() {
+        this.checked = !this.checked;
+    }
+}
+
+class DynamicInputComponent extends DynamicFormFieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    get valueCount() {
+        return this.input?.value ? this.input.value.length : 0;
+    }
+    get maxCountText() {
+        return `${this.valueCount} / ${this.model.maxLength}`;
+    }
+    get showClear() {
+        return !!this.control.value && !this.control.disabled;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf, NgFor, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { input: [{
+                type: ViewChild,
+                args: [MatInput, { static: true }]
+            }], model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+const DYNAMIC_FORM_FIELD_INPUT = 'input';
+class DynamicInput extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_INPUT;
+        this.inputType = config.inputType ?? 'text';
+        this.max = config.max ?? null;
+        this.min = config.min ?? null;
+        this.maxLength = typeof config.maxLength === 'number' ? config.maxLength : null;
+        this.minLength = typeof config.minLength === 'number' ? config.minLength : null;
+        this.step = config.step ?? null;
+        this.pattern = config.pattern ?? '';
+        this.autocomplete = config.autocomplete ?? 'off';
+        this.prefix = config.prefix ?? null;
+    }
+}
+
+class DynamicReadonlyComponent extends DynamicFormFieldBaseComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicReadonlyComponent, isStandalone: true, selector: "dynamic-readonly", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-field-readonly\"\n  [formGroup]=\"group\"\n  [id]=\"id\">\n  <div class=\"label\">{{model.label}}</div>\n  <span>{{model.value}}</span>\n</div>", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [ReactiveFormsModule], selector: 'dynamic-readonly', template: "<div class=\"dynamic-form-field-readonly\"\n  [formGroup]=\"group\"\n  [id]=\"id\">\n  <div class=\"label\">{{model.label}}</div>\n  <span>{{model.value}}</span>\n</div>", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);margin-bottom:8px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
+
+const DYNAMIC_FORM_FIELD_READONLY = 'readonly';
+class DynamicReadonly extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_READONLY;
+    }
+}
+
+class DynamicSelectComponent extends DynamicFormFieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    trackByFn(index, option) {
+        return option.value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl>\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl>\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicSelectComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl>\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl>\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+/**
+ * Base class for any DynamicFormField with options (e.g. DynamicSelect or DynamicAutocomplete)
+ */
+class DynamicFormFieldOptionModel extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this._options = [];
+        this._groupedOptions = [];
+        if (!config.options && !config.groupedOptions) {
+            console.error(`No options or groupedOptions provided for ${this.name}`);
+        }
+        if (config.options) {
+            this.options$ = this.setOptions(config.options);
+        }
+        else if (config.groupedOptions) {
+            this.groupedOptions$ = this.setGroupedOptions(config.groupedOptions);
+        }
+    }
+    setOptions(options) {
+        if (Array.isArray(options)) {
+            this._options = options;
+            return of(this._options);
+        }
+        if (isObservable(options)) {
+            return options.pipe(map((o) => {
+                this._options = o;
+                return this._options;
+            }));
+        }
+        return of([]);
+    }
+    setGroupedOptions(groupedOptions) {
+        if (Array.isArray(groupedOptions)) {
+            this._groupedOptions = groupedOptions;
+            return of(this._groupedOptions);
+        }
+        if (isObservable(groupedOptions)) {
+            return groupedOptions.pipe(map((o) => {
+                this._groupedOptions = o;
+                return this._groupedOptions;
+            }));
+        }
+        return of([]);
+    }
+}
+
+const DYNAMIC_FORM_FIELD_SELECT = 'select';
+class DynamicSelect extends DynamicFormFieldOptionModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_SELECT;
+        this.native = config.native ?? false;
+        this.multiple = config.multiple ?? false;
+    }
+}
+
+class DynamicTextareaComponent extends DynamicFormFieldBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.blur = new EventEmitter();
+        this.change = new EventEmitter();
+        this.focus = new EventEmitter();
+    }
+    get valueCount() {
+        return this.textarea?.value ? this.textarea.value.length : 0;
+    }
+    get maxCountText() {
+        return `${this.valueCount} / ${this.model.maxLength}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { textarea: [{
+                type: ViewChild,
+                args: [MatInput, { static: true }]
+            }], model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], blur: [{
+                type: Output
+            }], change: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }] } });
+
+const DYNAMIC_FORM_FIELD_TEXTAREA = 'textarea';
+class DynamicTextarea extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_TEXTAREA;
+        this.minLength = config.minLength ?? 0;
+        this.maxLength = config.minLength ?? null;
+        this.autocomplete = config.autocomplete ?? 'off';
+        this.rows = config.rows ?? 3;
+        this.resize = config.resize ?? true;
+        this.resizeMaxRows = config.resizeMaxRows ?? null;
+    }
+}
+
+class DynamicFormValidators {
+    /**
+     * Default required validator, the control must contain a value
+     * @param msg
+     */
+    static required(msg) {
+        const message = msg ?? 'Dit veld is verplicht';
+        return { name: 'required', validator: Validators.required, message };
+    }
+    /**
+     * Ddefault requiredTrue validator, the value of the control has to be true
+     * @param msg
+     */
+    static requiredTrue(msg) {
+        const message = msg ?? 'Dit veld is verplicht';
+        return { name: 'requiredTrue', validator: Validators.requiredTrue, message };
+    }
+    /**
+     * Default min validator, the value has to be greater or equal than the the provided number
+     * @param min number
+     * @param msg
+     */
+    static min(min, msg) {
+        const message = msg ?? `Minimum is ${min}`;
+        return { name: 'min', validator: Validators.min(min), message };
+    }
+    /**
+     * Default max validator, the value has to be less or equal than the the provided number
+     * @param max number
+     * @param msg
+     */
+    static max(max, msg) {
+        const message = msg ?? `Maximum is ${max}`;
+        return { name: 'max', validator: Validators.max(max), message };
+    }
+    /**
+     * Default minLength validator, the value has to contain a minimum amount of characters
+     * @param min number
+     * @param msg
+     */
+    static minLength(min, msg) {
+        const message = msg ?? `Minimaal ${min} tekens`;
+        return { name: 'minLength', validator: Validators.min(min), message };
+    }
+    /**
+     * Default maxLength validator, the value has to contain a maximum amount of characters
+     * @param max number
+     * @param msg
+     */
+    static maxLength(max, msg) {
+        const message = msg ?? `Maximaal ${max} tekens`;
+        return { name: 'maxLength', validator: Validators.max(max), message };
+    }
+    /**
+     * Ddefault email validator, the value of the control has to be a valid email address
+     * @param msg
+     */
+    static email(msg) {
+        const message = msg ?? 'Geen geldig emailadres';
+        return { name: 'email', validator: Validators.email, message };
+    }
+    /**
+     * Default pattern validator, the value of the control has to match the provided pattern
+     * @param pattern: string | RegExp
+     * @param msg
+     */
+    static pattern(pattern, msg) {
+        const message = msg ?? 'Geen geldige invoer';
+        return { name: 'pattern', validator: Validators.pattern(pattern), message };
+    }
+}
+
+var RelationActionType;
+(function (RelationActionType) {
+    RelationActionType["DISABLED"] = "DISABLED";
+    RelationActionType["ENABLED"] = "ENABLED";
+    RelationActionType["HIDDEN"] = "HIDDEN";
+    RelationActionType["VISIBLE"] = "VISIBLE";
+    RelationActionType["REQUIRED"] = "REQUIRED";
+    RelationActionType["OPTIONAL"] = "OPTIONAL";
+})(RelationActionType || (RelationActionType = {}));
+var RelationOperator;
+(function (RelationOperator) {
+    RelationOperator["AND"] = "AND";
+    RelationOperator["OR"] = "OR";
+})(RelationOperator || (RelationOperator = {}));
+const DISABLE_ACTION = {
+    type: RelationActionType.DISABLED,
+    reversedType: RelationActionType.ENABLED,
+    change(hasMatch, model) {
+        model.disabled = hasMatch;
+    }
+};
+const HIDDEN_ACTION = {
+    type: RelationActionType.HIDDEN,
+    reversedType: RelationActionType.VISIBLE,
+    change(hasMatch, model) {
+        model.hidden = hasMatch;
+    }
+};
+const REQUIRED_ACTION = {
+    type: RelationActionType.REQUIRED,
+    reversedType: RelationActionType.OPTIONAL,
+    change(hasMatch, model, control, injector) {
+        const hasRequiredValidation = !!model.validators.find((f) => f.name === 'required');
+        let validators;
+        if (hasMatch) {
+            validators = hasRequiredValidation ? model.validators : [...model.validators, DynamicFormValidators.required()];
+        }
+        else {
+            validators = model.validators.filter((f) => f.name === 'required');
+        }
+        injector.get(DynamicFormValidationsService).updateValidators(validators, control);
+    }
+};
+const RELATION_ACTIONS = [DISABLE_ACTION, HIDDEN_ACTION, REQUIRED_ACTION];
+
+class DynamicFormRelationsService {
+    constructor() {
+        this._injector = inject(Injector);
+    }
+    /**
+     * Get an object with all FormField the provided model has a relation with
+     * @param model
+     * @param group
+     * @returns
+     */
+    findRelatedFormField(model, group) {
+        const conditionReducer = (controls, condition) => {
+            const control = group.get(condition.fieldName);
+            if (!control) {
+                console.warn(`No related form control with the name ${condition.fieldName} found`);
+                return controls;
+            }
+            controls[condition.fieldName] = control;
+            return controls;
+        };
+        const relationsReducer = (controls, relation) => {
+            return relation.conditions.reduce(conditionReducer, controls);
+        };
+        return model.relations.reduce(relationsReducer, {});
+    }
+    getRelationSubscriptions(relatedFormControls, model, control) {
+        const subs = [];
+        // Subscribe to value changes of all FormControls, provide the current value inside the startWith
+        Object.values(relatedFormControls).forEach((relatedControl) => {
+            subs.push(relatedControl.valueChanges.pipe(startWith(relatedControl.value), distinctUntilChanged()).subscribe(() => {
+                model.relations.forEach((relation) => {
+                    // Find the RelationAction object based on the actionType passed inside the DynamicFormConfig
+                    const action = RELATION_ACTIONS.find((action) => relation.actionType === action.type || relation.actionType === action.reversedType);
+                    if (action) {
+                        const shouldTrigger = this.checkRelationCondition(relation, relatedFormControls, action);
+                        action.change(shouldTrigger, model, control, this._injector);
+                    }
+                });
+            }));
+        });
+        return subs;
+    }
+    /**
+     * Check the conditions inside the relations
+     * @param relation
+     * @param relatedControl
+     * @param action
+     * @returns
+     */
+    checkRelationCondition(relation, relatedControls, action) {
+        // Default operator is AND, meaning all conditions should return true before the provided action is triggered.
+        // In the case of a reversed type, the return value whould be false.
+        const operator = relation.operator ?? RelationOperator.AND;
+        // Use a reducer to map all conditions to a single boolean value to decide if we want to trigger the provided action type
+        const reducer = (isMatch, condition, index) => {
+            // Find the FormControl of the related field
+            let relatedControl;
+            for (const [fieldName, control] of Object.entries(relatedControls)) {
+                if (fieldName === condition.fieldName) {
+                    relatedControl = control;
+                    break;
+                }
+            }
+            if (!relatedControl)
+                return false;
+            // Using the 'normal' type should return true when the condition matches
+            if (relation.actionType === action.type) {
+                // Shortcut to false when a previous condition check was resolved as false
+                if (index > 0 && operator === RelationOperator.AND && !isMatch)
+                    return false;
+                // Shortcut to true when a previous condition check was resolved as true
+                if (index > 0 && operator === RelationOperator.OR && isMatch)
+                    return true;
+                return condition.value(relatedControl.value);
+            }
+            // Using the reversed type should return false when the condition matches, because we want to the opposite of the configured change Function
+            if (relation.actionType === action.reversedType) {
+                // Shortcut to true when a previous condition check was resolved as true
+                if (index > 0 && operator === RelationOperator.AND && isMatch)
+                    return true;
+                // Shortcut to false when a previous condition check was resolved as false
+                if (index > 0 && operator === RelationOperator.OR && !isMatch)
+                    return false;
+                return !condition.value(relatedControl.value);
+            }
+            return false;
+        };
+        return relation.conditions.reduce(reducer, false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormRelationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormRelationsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormRelationsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DynamicFormFieldComponent {
+    constructor() {
+        this._subs = new Subscription();
+        this.dynamicFormService = inject(DynamicFormService);
+        this.relationService = inject(DynamicFormRelationsService);
+    }
+    /** Get the instance of a control component using the injected custom method or local method */
+    get componentType() {
+        return this.dynamicFormService.getCustomControlComponentType(this.model) || this.getControlComponentType();
+    }
+    ngOnInit() {
+        if (this.group) {
+            this._control = this.group.get(this.model.name);
+            this.createFormControlComponent();
+            this.setSubscriptions();
+        }
+    }
+    ngOnDestroy() {
+        this._subs.unsubscribe();
+    }
+    /**
+     * Finds the instance of a control component by type
+     * @returns
+     */
+    getControlComponentType() {
+        switch (this.model.type) {
+            case DYNAMIC_FORM_FIELD_CHECKBOX:
+                return DynamicCheckboxComponent;
+            case DYNAMIC_FORM_FIELD_INPUT:
+                return DynamicInputComponent;
+            case DYNAMIC_FORM_FIELD_TEXTAREA:
+                return DynamicTextareaComponent;
+            case DYNAMIC_FORM_FIELD_READONLY:
+                return DynamicReadonlyComponent;
+            case DYNAMIC_FORM_FIELD_SELECT:
+                return DynamicSelectComponent;
+            case DYNAMIC_FORM_FIELD_BUTTON:
+                return DynamicButtonComponent;
+            default:
+                console.warn(`Model of type 'dynamic-${this.model.type}' is not implemented yet. Add this type to dynamic-form-field.component.ts to add support`);
+                return null;
+        }
+    }
+    createFormControlComponent() {
+        const component = this.componentType;
+        if (component != null) {
+            let componentRef = this.componentViewContainer.createComponent(component);
+            const componentInstance = componentRef.instance;
+            componentInstance.group = this.group;
+            componentInstance.model = this.model;
+        }
+    }
+    /**
+     * Setup all necessary subscriptions of the FormControl
+     */
+    setSubscriptions() {
+        const model = this.model;
+        // Subscribe to the value change inside the control to chagne the value inside the model as well
+        this._subs.add(this._control.valueChanges.subscribe((value) => this.onValueChange(value)));
+        // Subscribe to the disabled change inside the model to change the disabled state of the FormControl
+        this._subs.add(model.disabledChange.subscribe((disabled) => this.onDisabledChange(disabled)));
+        // Setup subscriptions for any possible relation
+        if (this.model.relations?.length) {
+            this.setUpRelations();
+        }
+    }
+    /**
+     * Set up all relations of the current model
+     */
+    setUpRelations() {
+        // Array of all FormControls the current model has a relation to
+        const relatedFormControls = this.relationService.findRelatedFormField(this.model, this.group);
+        const subs = this.relationService.getRelationSubscriptions(relatedFormControls, this.model, this._control);
+        // Add all relations as subscription to the main Subscription object
+        subs.forEach((sub) => this._subs.add(sub));
+    }
+    /**
+     * Fired when the value changes of the control and updates the value inside the model
+     * @param value
+     */
+    onValueChange(value) {
+        if (this.model instanceof DynamicFormFieldValueModel && this.model.value !== value) {
+            this.model.value = value;
+        }
+    }
+    /**
+     * Enables/disabled the control based on the provided parameter.
+     * Is fired when disabled state is changed inside the model and should not be directly used outside this component.
+     * @param disabled
+     */
+    onDisabledChange(disabled) {
+        disabled ? this._control.disable() : this._control.enable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: "model", group: "group" }, viewQueries: [{ propertyName: "componentViewContainer", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div [formGroup]=\"group\"\n  [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model.type]\">\n  <ng-container #componentViewContainer></ng-container>\n</div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgClass, ReactiveFormsModule], selector: 'dynamic-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [formGroup]=\"group\"\n  [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model.type]\">\n  <ng-container #componentViewContainer></ng-container>\n</div>" }]
+        }], propDecorators: { componentViewContainer: [{
+                type: ViewChild,
+                args: ['componentViewContainer', { read: ViewContainerRef, static: true }]
+            }], model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
+
+class DynamicFormComponent {
+    constructor() {
+        this.ready = new EventEmitter();
+        this.dynamicFormService = inject(DynamicFormService);
+    }
+    /**
+     * Get the formConfig as flat array.
+     */
+    get flatFormConfig() {
+        return this.formConfig.reduce((acc, curr) => acc.concat(curr), []);
+    }
+    ngOnInit() {
+        this.group = this.dynamicFormService.createFormGroup(this.formConfig);
+        this.ready.emit(this.group);
+    }
+    trackByFn(_index, field) {
+        return field.id;
+    }
+    /**
+     * Get the current value of the form.
+     * @param includeDisabledFields Include the disabled fields of the form, is enabled by default
+     */
+    getFormValue(includeDisabledFields = true) {
+        const formValue = includeDisabledFields ? this.group.getRawValue() : this.group.value;
+        return formValue;
+    }
+    /**
+     * Provides an Observable to listen to changes of a specific field in the form.
+     *
+     * @param name Name of the field
+     * @returns Observable<any>
+     */
+    onChange(name) {
+        const field = this.group.get(name);
+        if (!field) {
+            throw new Error(`Cannot find a field with the name ${name} in the FormGroup`);
+        }
+        return field.valueChanges;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { formConfig: "formConfig" }, outputs: { ready: "ready" }, providers: [DynamicFormService], ngImport: i0, template: "<form [formGroup]=\"group\"\n  class=\"dynamic-form\">\n  <div *ngFor=\"let row of formConfig\"\n    class=\"dynamic-form-row\">\n    <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n      class=\"dynamic-form-field\"\n      [id]=\"field.id\"\n      [hidden]=\"field.hidden\"\n      [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n      [group]=\"group\"\n      [model]=\"field\">\n    </dynamic-form-field>\n  </div>\n</form>", styles: [".dynamic-form{width:100%}.dynamic-form .dynamic-form-row{width:100%;display:flex}.dynamic-form .dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form .dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form .dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form .dynamic-form-row .form-field-width-1{width:1%}.dynamic-form .dynamic-form-row .form-field-width-2{width:2%}.dynamic-form .dynamic-form-row .form-field-width-3{width:3%}.dynamic-form .dynamic-form-row .form-field-width-4{width:4%}.dynamic-form .dynamic-form-row .form-field-width-5{width:5%}.dynamic-form .dynamic-form-row .form-field-width-6{width:6%}.dynamic-form .dynamic-form-row .form-field-width-7{width:7%}.dynamic-form .dynamic-form-row .form-field-width-8{width:8%}.dynamic-form .dynamic-form-row .form-field-width-9{width:9%}.dynamic-form .dynamic-form-row .form-field-width-10{width:10%}.dynamic-form .dynamic-form-row .form-field-width-11{width:11%}.dynamic-form .dynamic-form-row .form-field-width-12{width:12%}.dynamic-form .dynamic-form-row .form-field-width-13{width:13%}.dynamic-form .dynamic-form-row .form-field-width-14{width:14%}.dynamic-form .dynamic-form-row .form-field-width-15{width:15%}.dynamic-form .dynamic-form-row .form-field-width-16{width:16%}.dynamic-form .dynamic-form-row .form-field-width-17{width:17%}.dynamic-form .dynamic-form-row .form-field-width-18{width:18%}.dynamic-form .dynamic-form-row .form-field-width-19{width:19%}.dynamic-form .dynamic-form-row .form-field-width-20{width:20%}.dynamic-form .dynamic-form-row .form-field-width-21{width:21%}.dynamic-form .dynamic-form-row .form-field-width-22{width:22%}.dynamic-form .dynamic-form-row .form-field-width-23{width:23%}.dynamic-form .dynamic-form-row .form-field-width-24{width:24%}.dynamic-form .dynamic-form-row .form-field-width-25{width:25%}.dynamic-form .dynamic-form-row .form-field-width-26{width:26%}.dynamic-form .dynamic-form-row .form-field-width-27{width:27%}.dynamic-form .dynamic-form-row .form-field-width-28{width:28%}.dynamic-form .dynamic-form-row .form-field-width-29{width:29%}.dynamic-form .dynamic-form-row .form-field-width-30{width:30%}.dynamic-form .dynamic-form-row .form-field-width-31{width:31%}.dynamic-form .dynamic-form-row .form-field-width-32{width:32%}.dynamic-form .dynamic-form-row .form-field-width-33{width:33%}.dynamic-form .dynamic-form-row .form-field-width-34{width:34%}.dynamic-form .dynamic-form-row .form-field-width-35{width:35%}.dynamic-form .dynamic-form-row .form-field-width-36{width:36%}.dynamic-form .dynamic-form-row .form-field-width-37{width:37%}.dynamic-form .dynamic-form-row .form-field-width-38{width:38%}.dynamic-form .dynamic-form-row .form-field-width-39{width:39%}.dynamic-form .dynamic-form-row .form-field-width-40{width:40%}.dynamic-form .dynamic-form-row .form-field-width-41{width:41%}.dynamic-form .dynamic-form-row .form-field-width-42{width:42%}.dynamic-form .dynamic-form-row .form-field-width-43{width:43%}.dynamic-form .dynamic-form-row .form-field-width-44{width:44%}.dynamic-form .dynamic-form-row .form-field-width-45{width:45%}.dynamic-form .dynamic-form-row .form-field-width-46{width:46%}.dynamic-form .dynamic-form-row .form-field-width-47{width:47%}.dynamic-form .dynamic-form-row .form-field-width-48{width:48%}.dynamic-form .dynamic-form-row .form-field-width-49{width:49%}.dynamic-form .dynamic-form-row .form-field-width-50{width:50%}.dynamic-form .dynamic-form-row .form-field-width-51{width:51%}.dynamic-form .dynamic-form-row .form-field-width-52{width:52%}.dynamic-form .dynamic-form-row .form-field-width-53{width:53%}.dynamic-form .dynamic-form-row .form-field-width-54{width:54%}.dynamic-form .dynamic-form-row .form-field-width-55{width:55%}.dynamic-form .dynamic-form-row .form-field-width-56{width:56%}.dynamic-form .dynamic-form-row .form-field-width-57{width:57%}.dynamic-form .dynamic-form-row .form-field-width-58{width:58%}.dynamic-form .dynamic-form-row .form-field-width-59{width:59%}.dynamic-form .dynamic-form-row .form-field-width-60{width:60%}.dynamic-form .dynamic-form-row .form-field-width-61{width:61%}.dynamic-form .dynamic-form-row .form-field-width-62{width:62%}.dynamic-form .dynamic-form-row .form-field-width-63{width:63%}.dynamic-form .dynamic-form-row .form-field-width-64{width:64%}.dynamic-form .dynamic-form-row .form-field-width-65{width:65%}.dynamic-form .dynamic-form-row .form-field-width-66{width:66%}.dynamic-form .dynamic-form-row .form-field-width-67{width:67%}.dynamic-form .dynamic-form-row .form-field-width-68{width:68%}.dynamic-form .dynamic-form-row .form-field-width-69{width:69%}.dynamic-form .dynamic-form-row .form-field-width-70{width:70%}.dynamic-form .dynamic-form-row .form-field-width-71{width:71%}.dynamic-form .dynamic-form-row .form-field-width-72{width:72%}.dynamic-form .dynamic-form-row .form-field-width-73{width:73%}.dynamic-form .dynamic-form-row .form-field-width-74{width:74%}.dynamic-form .dynamic-form-row .form-field-width-75{width:75%}.dynamic-form .dynamic-form-row .form-field-width-76{width:76%}.dynamic-form .dynamic-form-row .form-field-width-77{width:77%}.dynamic-form .dynamic-form-row .form-field-width-78{width:78%}.dynamic-form .dynamic-form-row .form-field-width-79{width:79%}.dynamic-form .dynamic-form-row .form-field-width-80{width:80%}.dynamic-form .dynamic-form-row .form-field-width-81{width:81%}.dynamic-form .dynamic-form-row .form-field-width-82{width:82%}.dynamic-form .dynamic-form-row .form-field-width-83{width:83%}.dynamic-form .dynamic-form-row .form-field-width-84{width:84%}.dynamic-form .dynamic-form-row .form-field-width-85{width:85%}.dynamic-form .dynamic-form-row .form-field-width-86{width:86%}.dynamic-form .dynamic-form-row .form-field-width-87{width:87%}.dynamic-form .dynamic-form-row .form-field-width-88{width:88%}.dynamic-form .dynamic-form-row .form-field-width-89{width:89%}.dynamic-form .dynamic-form-row .form-field-width-90{width:90%}.dynamic-form .dynamic-form-row .form-field-width-91{width:91%}.dynamic-form .dynamic-form-row .form-field-width-92{width:92%}.dynamic-form .dynamic-form-row .form-field-width-93{width:93%}.dynamic-form .dynamic-form-row .form-field-width-94{width:94%}.dynamic-form .dynamic-form-row .form-field-width-95{width:95%}.dynamic-form .dynamic-form-row .form-field-width-96{width:96%}.dynamic-form .dynamic-form-row .form-field-width-97{width:97%}.dynamic-form .dynamic-form-row .form-field-width-98{width:98%}.dynamic-form .dynamic-form-row .form-field-width-99{width:99%}.dynamic-form .dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgFor, NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"group\"\n  class=\"dynamic-form\">\n  <div *ngFor=\"let row of formConfig\"\n    class=\"dynamic-form-row\">\n    <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n      class=\"dynamic-form-field\"\n      [id]=\"field.id\"\n      [hidden]=\"field.hidden\"\n      [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n      [group]=\"group\"\n      [model]=\"field\">\n    </dynamic-form-field>\n  </div>\n</form>", styles: [".dynamic-form{width:100%}.dynamic-form .dynamic-form-row{width:100%;display:flex}.dynamic-form .dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form .dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form .dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form .dynamic-form-row .form-field-width-1{width:1%}.dynamic-form .dynamic-form-row .form-field-width-2{width:2%}.dynamic-form .dynamic-form-row .form-field-width-3{width:3%}.dynamic-form .dynamic-form-row .form-field-width-4{width:4%}.dynamic-form .dynamic-form-row .form-field-width-5{width:5%}.dynamic-form .dynamic-form-row .form-field-width-6{width:6%}.dynamic-form .dynamic-form-row .form-field-width-7{width:7%}.dynamic-form .dynamic-form-row .form-field-width-8{width:8%}.dynamic-form .dynamic-form-row .form-field-width-9{width:9%}.dynamic-form .dynamic-form-row .form-field-width-10{width:10%}.dynamic-form .dynamic-form-row .form-field-width-11{width:11%}.dynamic-form .dynamic-form-row .form-field-width-12{width:12%}.dynamic-form .dynamic-form-row .form-field-width-13{width:13%}.dynamic-form .dynamic-form-row .form-field-width-14{width:14%}.dynamic-form .dynamic-form-row .form-field-width-15{width:15%}.dynamic-form .dynamic-form-row .form-field-width-16{width:16%}.dynamic-form .dynamic-form-row .form-field-width-17{width:17%}.dynamic-form .dynamic-form-row .form-field-width-18{width:18%}.dynamic-form .dynamic-form-row .form-field-width-19{width:19%}.dynamic-form .dynamic-form-row .form-field-width-20{width:20%}.dynamic-form .dynamic-form-row .form-field-width-21{width:21%}.dynamic-form .dynamic-form-row .form-field-width-22{width:22%}.dynamic-form .dynamic-form-row .form-field-width-23{width:23%}.dynamic-form .dynamic-form-row .form-field-width-24{width:24%}.dynamic-form .dynamic-form-row .form-field-width-25{width:25%}.dynamic-form .dynamic-form-row .form-field-width-26{width:26%}.dynamic-form .dynamic-form-row .form-field-width-27{width:27%}.dynamic-form .dynamic-form-row .form-field-width-28{width:28%}.dynamic-form .dynamic-form-row .form-field-width-29{width:29%}.dynamic-form .dynamic-form-row .form-field-width-30{width:30%}.dynamic-form .dynamic-form-row .form-field-width-31{width:31%}.dynamic-form .dynamic-form-row .form-field-width-32{width:32%}.dynamic-form .dynamic-form-row .form-field-width-33{width:33%}.dynamic-form .dynamic-form-row .form-field-width-34{width:34%}.dynamic-form .dynamic-form-row .form-field-width-35{width:35%}.dynamic-form .dynamic-form-row .form-field-width-36{width:36%}.dynamic-form .dynamic-form-row .form-field-width-37{width:37%}.dynamic-form .dynamic-form-row .form-field-width-38{width:38%}.dynamic-form .dynamic-form-row .form-field-width-39{width:39%}.dynamic-form .dynamic-form-row .form-field-width-40{width:40%}.dynamic-form .dynamic-form-row .form-field-width-41{width:41%}.dynamic-form .dynamic-form-row .form-field-width-42{width:42%}.dynamic-form .dynamic-form-row .form-field-width-43{width:43%}.dynamic-form .dynamic-form-row .form-field-width-44{width:44%}.dynamic-form .dynamic-form-row .form-field-width-45{width:45%}.dynamic-form .dynamic-form-row .form-field-width-46{width:46%}.dynamic-form .dynamic-form-row .form-field-width-47{width:47%}.dynamic-form .dynamic-form-row .form-field-width-48{width:48%}.dynamic-form .dynamic-form-row .form-field-width-49{width:49%}.dynamic-form .dynamic-form-row .form-field-width-50{width:50%}.dynamic-form .dynamic-form-row .form-field-width-51{width:51%}.dynamic-form .dynamic-form-row .form-field-width-52{width:52%}.dynamic-form .dynamic-form-row .form-field-width-53{width:53%}.dynamic-form .dynamic-form-row .form-field-width-54{width:54%}.dynamic-form .dynamic-form-row .form-field-width-55{width:55%}.dynamic-form .dynamic-form-row .form-field-width-56{width:56%}.dynamic-form .dynamic-form-row .form-field-width-57{width:57%}.dynamic-form .dynamic-form-row .form-field-width-58{width:58%}.dynamic-form .dynamic-form-row .form-field-width-59{width:59%}.dynamic-form .dynamic-form-row .form-field-width-60{width:60%}.dynamic-form .dynamic-form-row .form-field-width-61{width:61%}.dynamic-form .dynamic-form-row .form-field-width-62{width:62%}.dynamic-form .dynamic-form-row .form-field-width-63{width:63%}.dynamic-form .dynamic-form-row .form-field-width-64{width:64%}.dynamic-form .dynamic-form-row .form-field-width-65{width:65%}.dynamic-form .dynamic-form-row .form-field-width-66{width:66%}.dynamic-form .dynamic-form-row .form-field-width-67{width:67%}.dynamic-form .dynamic-form-row .form-field-width-68{width:68%}.dynamic-form .dynamic-form-row .form-field-width-69{width:69%}.dynamic-form .dynamic-form-row .form-field-width-70{width:70%}.dynamic-form .dynamic-form-row .form-field-width-71{width:71%}.dynamic-form .dynamic-form-row .form-field-width-72{width:72%}.dynamic-form .dynamic-form-row .form-field-width-73{width:73%}.dynamic-form .dynamic-form-row .form-field-width-74{width:74%}.dynamic-form .dynamic-form-row .form-field-width-75{width:75%}.dynamic-form .dynamic-form-row .form-field-width-76{width:76%}.dynamic-form .dynamic-form-row .form-field-width-77{width:77%}.dynamic-form .dynamic-form-row .form-field-width-78{width:78%}.dynamic-form .dynamic-form-row .form-field-width-79{width:79%}.dynamic-form .dynamic-form-row .form-field-width-80{width:80%}.dynamic-form .dynamic-form-row .form-field-width-81{width:81%}.dynamic-form .dynamic-form-row .form-field-width-82{width:82%}.dynamic-form .dynamic-form-row .form-field-width-83{width:83%}.dynamic-form .dynamic-form-row .form-field-width-84{width:84%}.dynamic-form .dynamic-form-row .form-field-width-85{width:85%}.dynamic-form .dynamic-form-row .form-field-width-86{width:86%}.dynamic-form .dynamic-form-row .form-field-width-87{width:87%}.dynamic-form .dynamic-form-row .form-field-width-88{width:88%}.dynamic-form .dynamic-form-row .form-field-width-89{width:89%}.dynamic-form .dynamic-form-row .form-field-width-90{width:90%}.dynamic-form .dynamic-form-row .form-field-width-91{width:91%}.dynamic-form .dynamic-form-row .form-field-width-92{width:92%}.dynamic-form .dynamic-form-row .form-field-width-93{width:93%}.dynamic-form .dynamic-form-row .form-field-width-94{width:94%}.dynamic-form .dynamic-form-row .form-field-width-95{width:95%}.dynamic-form .dynamic-form-row .form-field-width-96{width:96%}.dynamic-form .dynamic-form-row .form-field-width-97{width:97%}.dynamic-form .dynamic-form-row .form-field-width-98{width:98%}.dynamic-form .dynamic-form-row .form-field-width-99{width:99%}.dynamic-form .dynamic-form-row .form-field-width-100{width:100%}\n"] }]
+        }], propDecorators: { formConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], ready: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ngx-dynamic-form
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicCheckbox, DynamicFormComponent, DynamicFormFieldBaseComponent, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicReadonly, DynamicSelect, DynamicTextarea, RELATION_ACTIONS, RelationActionType, RelationOperator };
+//# sourceMappingURL=olafvv-ngx-dynamic-form.mjs.map