@olafvv/ngx-dynamic-form 20.0.0 → 20.1.0

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

@@ -1,9 +1,9 @@
 import { AsyncPipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Output, Input, Component, signal, ViewChild, inject, Injector, ChangeDetectorRef, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Optional, signal, input, Component, viewChild, inject, Injector, ViewContainerRef, ChangeDetectorRef, 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 { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { BehaviorSubject, of, isObservable, map, startWith, distinctUntilChanged, Subscription } from 'rxjs';
 import * as i1$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$1 from '@angular/material/form-field';
@@ -27,7 +27,7 @@ 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');
+const DYNAMIC_FORM_FIELD_MAP$1 = new InjectionToken('DYNAMIC_FORM_FIELD_MAP');
 
 class DynamicFormValidationsService {
     /**
@@ -65,24 +65,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }] });
 
 class DynamicFormService {
-    constructor(DYNAMIC_FORM_FIELD_MAP_FN, fb, validatorsService) {
-        this.DYNAMIC_FORM_FIELD_MAP_FN = DYNAMIC_FORM_FIELD_MAP_FN;
+    constructor(customMap, fb, validatorsService) {
+        this.customMap = customMap;
         this.fb = fb;
         this.validatorsService = validatorsService;
     }
     /**
-     * Check if there is a function provided to use custom form controls
+     * Check if there is a mapping 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;
+        return this.customMap && this.customMap[model.type] ? this.customMap[model.type] : null;
     }
     /**
      * Create a FormGroup from the provided form configuration.
      * Returns a FormGroup.
      * @param {DynamicFormConfig} config Configuration object of a form
-     * @returns {UntypedFormGroup}
+     * @returns {FormGroup}
      */
     createFormGroup(config) {
         const group = this.fb.group({});
@@ -93,37 +93,13 @@ class DynamicFormService {
                     validators: this.validatorsService.getValidatorFns(controlConfig.validators)
                 };
                 const controlValueConfig = controlConfig;
-                const control = new UntypedFormControl({ value: controlValueConfig.value ?? controlValueConfig.defaultValue, disabled: controlValueConfig.disabled }, controlOptions);
+                const control = new FormControl({ 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).
-     * Possible to provide the method with Type definitions to define the provided list type and desired option value type:
-     *
-     * `dynamicFormService.toDynamicOptionList<T, K>(...)`
-     *
-     * Generic types:
-     *  - T = The type of the items in the provided list
-     *  - K = The type of the value inside an DynamicFormFieldOption. Default is 'string'
-     * @param listObs An Observable of a list of items of type T
-     * @param labelCb Callback to define the label of the options in the template
-     * @param valueCb Callback to define the value of the options. Must return a value of type K (default string)
-     * @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: "20.3.16", ngImport: i0, type: DynamicFormService, deps: [{ token: DYNAMIC_FORM_FIELD_MAP_FN, optional: true }, { token: i1.FormBuilder }, { token: DynamicFormValidationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormService, deps: [{ token: DYNAMIC_FORM_FIELD_MAP$1, optional: true }, { token: i1.FormBuilder }, { token: DynamicFormValidationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormService, decorators: [{
@@ -133,61 +109,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: [DYNAMIC_FORM_FIELD_MAP_FN]
+                    args: [DYNAMIC_FORM_FIELD_MAP$1]
                 }, {
                     type: Optional
                 }] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }] });
 
-/**
- * Base class for the DynamicFormField component classes
- */
-class DynamicFormFieldBase {
-    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;
-    }
-    onChange(event) {
-        this.change.emit(event);
-    }
-    resetControl() {
-        this.group.get(this.model.name)?.reset();
-    }
-    hasError(name) {
-        return this.control.hasError(name);
-    }
-}
-
-class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "dynamic-button-toggles", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mat-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: MatFormFieldModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatButtonToggleModule, ReactiveFormsModule, AsyncPipe, MatFormFieldModule], selector: 'dynamic-button-toggles', template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mat-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 /**
  * Base class for all DynamicFormFields
  */
@@ -242,6 +168,79 @@ class DynamicFormFieldValueModel extends DynamicFormFieldModel {
     }
 }
 
+/**
+ * Base class for the DynamicFormField component classes
+ */
+class DynamicFormFieldBase {
+    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;
+    }
+    resetControl() {
+        this.group().get(this.model().name)?.reset();
+    }
+    hasError(name) {
+        return this.control.hasError(name);
+    }
+}
+
+class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "dynamic-button-toggles", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group()\">\n  <mat-button-toggle-group\n    [id]=\"id\"\n    [formControlName]=\"model().name\"\n    [multiple]=\"model().multiple\"\n    [vertical]=\"model().vertical\">\n    @for (option of model().options$ | async; track option.value) {\n      <mat-button-toggle [value]=\"option.value\">{{ option.label }}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>\n", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mat-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { 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: MatFormFieldModule }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatButtonToggleModule, ReactiveFormsModule, AsyncPipe, MatFormFieldModule], selector: 'dynamic-button-toggles', template: "<div\n  class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group()\">\n  <mat-button-toggle-group\n    [id]=\"id\"\n    [formControlName]=\"model().name\"\n    [multiple]=\"model().multiple\"\n    [vertical]=\"model().vertical\">\n    @for (option of model().options$ | async; track option.value) {\n      <mat-button-toggle [value]=\"option.value\">{{ option.label }}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>\n", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mat-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicButtonComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    onClick() {
+        this.model().clicked();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n  <button\n    mat-button\n    [id]=\"id\"\n    [disabled]=\"model().disabled\"\n    (click)=\"onClick()\">\n    <span>{{ model().label }}</span>\n  </button>\n</div>\n", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n  <button\n    mat-button\n    [id]=\"id\"\n    [disabled]=\"model().disabled\"\n    (click)=\"onClick()\">\n    <span>{{ model().label }}</span>\n  </button>\n</div>\n", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicCheckboxComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"group()\">\n  <mat-checkbox\n    [checked]=\"model().checked\"\n    [formControlName]=\"model().name\"\n    [indeterminate]=\"model().indeterminate\"\n    [labelPosition]=\"model().labelPosition\"\n    [name]=\"model().name\"\n    [id]=\"id\">\n    <span class=\"checkbox-label\">{{ model().label }}</span>\n  </mat-checkbox>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dynamic-checkbox', imports: [ReactiveFormsModule, MatCheckboxModule], template: "<ng-container [formGroup]=\"group()\">\n  <mat-checkbox\n    [checked]=\"model().checked\"\n    [formControlName]=\"model().name\"\n    [indeterminate]=\"model().indeterminate\"\n    [labelPosition]=\"model().labelPosition\"\n    [name]=\"model().name\"\n    [id]=\"id\">\n    <span class=\"checkbox-label\">{{ model().label }}</span>\n  </mat-checkbox>\n</ng-container>\n" }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
 /**
  * Base class for any DynamicFormField with options (e.g. DynamicSelect or DynamicAutocomplete)
  */
@@ -298,50 +297,15 @@ class DynamicButtonToggles extends DynamicFormFieldOptionModel {
     }
 }
 
-class DynamicButtonComponent extends DynamicFormFieldBase {
-    onClick() {
-        this.model.onClick();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n  <button mat-button\n    [id]=\"id\"\n    [disabled]=\"model.disabled\"\n    (click)=\"onClick()\">\n    <span>{{model.label}}</span>\n  </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicButtonComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n  <button mat-button\n    [id]=\"id\"\n    [disabled]=\"model.disabled\"\n    (click)=\"onClick()\">\n    <span>{{model.label}}</span>\n  </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }] } });
-
 const DYNAMIC_FORM_FIELD_BUTTON = 'button';
 class DynamicButton extends DynamicFormFieldModel {
     constructor(config) {
         super(config);
         this.type = DYNAMIC_FORM_FIELD_BUTTON;
         this.label = config.label ?? null;
-        this.onClick = config.onClick;
-    }
-}
-
-class DynamicCheckboxComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
+        this.clicked = config.clicked;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, 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    (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: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dynamic-checkbox', 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    (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
-            }], change: [{
-                type: Output
-            }] } });
 
 const DYNAMIC_FORM_FIELD_CHECKBOX = 'checkbox';
 class DynamicCheckbox extends DynamicFormFieldValueModel {
@@ -363,25 +327,6 @@ class DynamicCheckbox extends DynamicFormFieldValueModel {
     }
 }
 
-class DynamicDatepickerComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"model.id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  <input\n    matInput\n    [min]=\"model.min\"\n    [max]=\"model.max\"\n    [matDatepicker]=\"picker\" />\n\n  @if (model.hint) {\n    <mat-hint>{{ model.hint }}</mat-hint>\n  }\n\n  <mat-datepicker-toggle\n    matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker\n    #picker\n    [startAt]=\"model.startAt\"\n    [startView]=\"model.startView\"></mat-datepicker>\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"model.id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  <input\n    matInput\n    [min]=\"model.min\"\n    [max]=\"model.max\"\n    [matDatepicker]=\"picker\" />\n\n  @if (model.hint) {\n    <mat-hint>{{ model.hint }}</mat-hint>\n  }\n\n  <mat-datepicker-toggle\n    matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker\n    #picker\n    [startAt]=\"model.startAt\"\n    [startView]=\"model.startView\"></mat-datepicker>\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 const DYNAMIC_FORM_FIELD_DATEPICKER = 'datepicker';
 class DynamicDatepicker extends DynamicFormFieldValueModel {
     constructor(config) {
@@ -394,44 +339,6 @@ class DynamicDatepicker extends DynamicFormFieldValueModel {
     }
 }
 
-class DynamicInputComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = 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 && !this.model.showLoader;
-    }
-    onChange(event) {
-        // Ignore the native HTML 5 change event
-        if (event instanceof Event) {
-            event.stopPropagation();
-        }
-        this.change.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  @if (model.prefix) {\n    <span matTextPrefix>{{ model.prefix }}</span>\n  }\n\n  <input\n    matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [placeholder]=\"model.placeholder\"\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    (change)=\"onChange($event)\" />\n\n  @if (showClear) {\n    <button\n      matSuffix\n      mat-icon-button\n      (click)=\"resetControl()\">\n      <mat-icon fontIcon=\"clear\"></mat-icon>\n    </button>\n  }\n\n  @if (model.showLoader()) {\n    <div\n      matSuffix\n      class=\"loader-icon\">\n      <mat-spinner\n        diameter=\"16\"\n        color=\"primary\"></mat-spinner>\n    </div>\n  }\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @if (model.maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  @if (model.prefix) {\n    <span matTextPrefix>{{ model.prefix }}</span>\n  }\n\n  <input\n    matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [placeholder]=\"model.placeholder\"\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    (change)=\"onChange($event)\" />\n\n  @if (showClear) {\n    <button\n      matSuffix\n      mat-icon-button\n      (click)=\"resetControl()\">\n      <mat-icon fontIcon=\"clear\"></mat-icon>\n    </button>\n  }\n\n  @if (model.showLoader()) {\n    <div\n      matSuffix\n      class=\"loader-icon\">\n      <mat-spinner\n        diameter=\"16\"\n        color=\"primary\"></mat-spinner>\n    </div>\n  }\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @if (model.maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\n"] }]
-        }], propDecorators: { input: [{
-                type: ViewChild,
-                args: [MatInput, { static: true }]
-            }], model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 const DYNAMIC_FORM_FIELD_INPUT = 'input';
 class DynamicInput extends DynamicFormFieldValueModel {
     constructor(config) {
@@ -452,25 +359,6 @@ class DynamicInput extends DynamicFormFieldValueModel {
     }
 }
 
-class DymamicRadioGroupComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group\">\n  @if (model.label) {\n    <label>{{ model.label }}</label>\n  }\n  <mat-radio-group\n    [formControlName]=\"model.name\"\n    class=\"radio-group\"\n    [ngClass]=\"{ inline: model.inline }\"\n    (change)=\"onChange($event)\">\n    @for (option of model.options$ | async; track option.value) {\n      <mat-radio-button\n        [value]=\"option.value\"\n        [labelPosition]=\"model.labelPosition\">\n        {{ option.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [NgClass, ReactiveFormsModule, MatRadioModule, AsyncPipe], selector: 'dynamic-radio-group', template: "<div\n  class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group\">\n  @if (model.label) {\n    <label>{{ model.label }}</label>\n  }\n  <mat-radio-group\n    [formControlName]=\"model.name\"\n    class=\"radio-group\"\n    [ngClass]=\"{ inline: model.inline }\"\n    (change)=\"onChange($event)\">\n    @for (option of model.options$ | async; track option.value) {\n      <mat-radio-button\n        [value]=\"option.value\"\n        [labelPosition]=\"model.labelPosition\">\n        {{ option.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 const DYNAMIC_FORM_FIELD_RADIO_GROUP = 'radio-group';
 class DynamicRadioGroup extends DynamicFormFieldOptionModel {
     constructor(config) {
@@ -481,19 +369,6 @@ class DynamicRadioGroup extends DynamicFormFieldOptionModel {
     }
 }
 
-class DynamicReadonlyComponent extends DynamicFormFieldBase {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-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: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
-            type: Component,
-            args: [{ 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(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-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) {
@@ -502,25 +377,6 @@ class DynamicReadonly extends DynamicFormFieldValueModel {
     }
 }
 
-class DynamicSelectComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{ model.label }}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  @if (model.options$ | async; as options) {\n    @if (!model.native) {\n      <mat-select\n        [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\"\n        (selectionChange)=\"onChange($event)\">\n        @for (option of options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{ option.label }}\n          </mat-option>\n        }\n      </mat-select>\n    } @else {\n      <select\n        matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for (option of options; track option.value) {\n          <option [value]=\"option.value\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n    }\n  }\n\n  <!-- Template for select with grouped options -->\n  @if (model.groupedOptions$ | async; as groupedOptions) {\n    @if (!model.native) {\n      <mat-select\n        [formControlName]=\"model.name\"\n        (selectionChange)=\"onChange($event)\">\n        @for (group of groupedOptions; track group.name) {\n          <mat-optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        }\n      </mat-select>\n    } @else {\n      <select\n        matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for (group of groupedOptions; track group.name) {\n          =\n          <optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </optgroup>\n        }\n      </select>\n    }\n  }\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{ model.label }}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  @if (model.options$ | async; as options) {\n    @if (!model.native) {\n      <mat-select\n        [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\"\n        (selectionChange)=\"onChange($event)\">\n        @for (option of options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{ option.label }}\n          </mat-option>\n        }\n      </mat-select>\n    } @else {\n      <select\n        matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for (option of options; track option.value) {\n          <option [value]=\"option.value\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n    }\n  }\n\n  <!-- Template for select with grouped options -->\n  @if (model.groupedOptions$ | async; as groupedOptions) {\n    @if (!model.native) {\n      <mat-select\n        [formControlName]=\"model.name\"\n        (selectionChange)=\"onChange($event)\">\n        @for (group of groupedOptions; track group.name) {\n          <mat-optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        }\n      </mat-select>\n    } @else {\n      <select\n        matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for (group of groupedOptions; track group.name) {\n          =\n          <optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </optgroup>\n        }\n      </select>\n    }\n  }\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
-        }], propDecorators: { model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 const DYNAMIC_FORM_FIELD_SELECT = 'select';
 class DynamicSelect extends DynamicFormFieldOptionModel {
     constructor(config) {
@@ -531,41 +387,6 @@ class DynamicSelect extends DynamicFormFieldOptionModel {
     }
 }
 
-class DynamicTextareaComponent extends DynamicFormFieldBase {
-    constructor() {
-        super(...arguments);
-        this.change = new EventEmitter();
-    }
-    get valueCount() {
-        return this.textarea?.value ? this.textarea.value.length : 0;
-    }
-    get maxCountText() {
-        return `${this.valueCount} / ${this.model.maxLength}`;
-    }
-    onChange(event) {
-        // Ignore the native HTML 5 change event
-        if (event instanceof Event) {
-            event.stopPropagation();
-        }
-        this.change.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  <textarea\n    matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [placeholder]=\"model.placeholder\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @if (model.maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], 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: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field\n  [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model.label) {\n    <mat-label>{{ model.label }}</mat-label>\n  }\n\n  <textarea\n    matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [placeholder]=\"model.placeholder\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  @if (model.hint) {\n    <mat-hint align=\"start\">{{ model.hint }}</mat-hint>\n  }\n\n  @if (model.maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model.validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
-        }], propDecorators: { textarea: [{
-                type: ViewChild,
-                args: [MatInput, { static: true }]
-            }], model: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], change: [{
-                type: Output
-            }] } });
-
 const DYNAMIC_FORM_FIELD_TEXTAREA = 'textarea';
 class DynamicTextarea extends DynamicFormFieldValueModel {
     constructor(config) {
@@ -581,6 +402,119 @@ class DynamicTextarea extends DynamicFormFieldValueModel {
     }
 }
 
+class DynamicDatepickerComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"model().id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  <input\n    matInput\n    [min]=\"model().min\"\n    [max]=\"model().max\"\n    [matDatepicker]=\"picker\" />\n\n  @if (model().hint) {\n    <mat-hint>{{ model().hint }}</mat-hint>\n  }\n\n  <mat-datepicker-toggle\n    matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker\n    #picker\n    [startAt]=\"model().startAt\"\n    [startView]=\"model().startView\"></mat-datepicker>\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\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"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"model().id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  <input\n    matInput\n    [min]=\"model().min\"\n    [max]=\"model().max\"\n    [matDatepicker]=\"picker\" />\n\n  @if (model().hint) {\n    <mat-hint>{{ model().hint }}</mat-hint>\n  }\n\n  <mat-datepicker-toggle\n    matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker\n    #picker\n    [startAt]=\"model().startAt\"\n    [startView]=\"model().startView\"></mat-datepicker>\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicInputComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.input = viewChild.required(MatInput);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    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 && !this.model().showLoader;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  @if (model().prefix) {\n    <span matTextPrefix>{{ model().prefix }}</span>\n  }\n\n  <input\n    matInput\n    [type]=\"model().inputType\"\n    [formControlName]=\"model().name\"\n    [placeholder]=\"model().placeholder\"\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  @if (showClear) {\n    <button\n      matSuffix\n      mat-icon-button\n      (click)=\"resetControl()\">\n      <mat-icon fontIcon=\"clear\"></mat-icon>\n    </button>\n  }\n\n  @if (model().showLoader()) {\n    <div\n      matSuffix\n      class=\"loader-icon\">\n      <mat-spinner\n        diameter=\"16\"\n        color=\"primary\"></mat-spinner>\n    </div>\n  }\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @if (model().maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicInputComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  @if (model().prefix) {\n    <span matTextPrefix>{{ model().prefix }}</span>\n  }\n\n  <input\n    matInput\n    [type]=\"model().inputType\"\n    [formControlName]=\"model().name\"\n    [placeholder]=\"model().placeholder\"\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  @if (showClear) {\n    <button\n      matSuffix\n      mat-icon-button\n      (click)=\"resetControl()\">\n      <mat-icon fontIcon=\"clear\"></mat-icon>\n    </button>\n  }\n\n  @if (model().showLoader()) {\n    <div\n      matSuffix\n      class=\"loader-icon\">\n      <mat-spinner\n        diameter=\"16\"\n        color=\"primary\"></mat-spinner>\n    </div>\n  }\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @if (model().maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-form-field .loader-icon{padding:8px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]{appearance:textfield}\n"] }]
+        }], propDecorators: { input: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DymamicRadioGroupComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group()\">\n  @if (model().label) {\n    <label>{{ model().label }}</label>\n  }\n  <mat-radio-group\n    [formControlName]=\"model().name\"\n    class=\"radio-group\"\n    [class.inlint]=\"model().inline\">\n    @for (option of model().options$ | async; track option.value) {\n      <mat-radio-button\n        [value]=\"option.value\"\n        [labelPosition]=\"model().labelPosition\">\n        {{ option.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ReactiveFormsModule, MatRadioModule, AsyncPipe], selector: 'dynamic-radio-group', template: "<div\n  class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group()\">\n  @if (model().label) {\n    <label>{{ model().label }}</label>\n  }\n  <mat-radio-group\n    [formControlName]=\"model().name\"\n    class=\"radio-group\"\n    [class.inlint]=\"model().inline\">\n    @for (option of model().options$ | async; track option.value) {\n      <mat-radio-button\n        [value]=\"option.value\"\n        [labelPosition]=\"model().labelPosition\">\n        {{ option.label }}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>\n", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mat-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicReadonlyComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DynamicReadonlyComponent, isStandalone: true, selector: "dynamic-readonly", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div\n  class=\"dynamic-form-field-readonly\"\n  [formGroup]=\"group()\"\n  [id]=\"model().id\">\n  <div class=\"label\">{{ model().label }}</div>\n  <span>{{ model().value }}</span>\n</div>\n", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-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: "20.3.16", ngImport: i0, type: DynamicReadonlyComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [ReactiveFormsModule], selector: 'dynamic-readonly', template: "<div\n  class=\"dynamic-form-field-readonly\"\n  [formGroup]=\"group()\"\n  [id]=\"model().id\">\n  <div class=\"label\">{{ model().label }}</div>\n  <span>{{ model().value }}</span>\n</div>\n", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mat-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mat-typography-body2-font-size, 14px);line-height:var(--mat-typography-body2-line-height, 20px);margin-bottom:8px}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicSelectComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"model().id\"\n  color=\"primary\">\n  <mat-label>{{ model().label }}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  @if (model().options$ | async; as options) {\n    @if (!model().native) {\n      <mat-select\n        [formControlName]=\"model().name\"\n        [multiple]=\"model().multiple\">\n        @for (option of options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{ option.label }}\n          </mat-option>\n        }\n      </mat-select>\n    } @else {\n      <select matNativeControl>\n        @for (option of options; track option.value) {\n          <option [value]=\"option.value\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n    }\n  }\n\n  <!-- Template for select with grouped options -->\n  @if (model().groupedOptions$ | async; as groupedOptions) {\n    @if (!model().native) {\n      <mat-select [formControlName]=\"model().name\">\n        @for (group of groupedOptions; track group.name) {\n          <mat-optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        }\n      </mat-select>\n    } @else {\n      <select matNativeControl>\n        @for (group of groupedOptions; track group.name) {\n          =\n          <optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </optgroup>\n        }\n      </select>\n    }\n  }\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicSelectComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"model().id\"\n  color=\"primary\">\n  <mat-label>{{ model().label }}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  @if (model().options$ | async; as options) {\n    @if (!model().native) {\n      <mat-select\n        [formControlName]=\"model().name\"\n        [multiple]=\"model().multiple\">\n        @for (option of options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{ option.label }}\n          </mat-option>\n        }\n      </mat-select>\n    } @else {\n      <select matNativeControl>\n        @for (option of options; track option.value) {\n          <option [value]=\"option.value\">\n            {{ option.label }}\n          </option>\n        }\n      </select>\n    }\n  }\n\n  <!-- Template for select with grouped options -->\n  @if (model().groupedOptions$ | async; as groupedOptions) {\n    @if (!model().native) {\n      <mat-select [formControlName]=\"model().name\">\n        @for (group of groupedOptions; track group.name) {\n          <mat-optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <mat-option [value]=\"option.value\">\n                {{ option.label }}\n              </mat-option>\n            }\n          </mat-optgroup>\n        }\n      </mat-select>\n    } @else {\n      <select matNativeControl>\n        @for (group of groupedOptions; track group.name) {\n          =\n          <optgroup [label]=\"group.name\">\n            @for (option of group.options; track option.value) {\n              <option [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            }\n          </optgroup>\n        }\n      </select>\n    }\n  }\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+class DynamicTextareaComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.textarea = viewChild.required(MatInput);
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    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: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  <textarea\n    matInput\n    [cdkTextareaAutosize]=\"model().resize\"\n    [cdkAutosizeMinRows]=\"model().rows\"\n    [cdkAutosizeMaxRows]=\"model().resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model().name\"\n    [placeholder]=\"model().placeholder\"\n    [attr.minLength]=\"model().minLength\"\n    [attr.maxLength]=\"model().maxLength\"\n    [rows]=\"model().rows\"\n    [autocomplete]=\"model().autocomplete\">\n  </textarea>\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @if (model().maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.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", "disabledInteractive"], 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: "20.3.16", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field\n  [formGroup]=\"group()\"\n  [id]=\"id\"\n  color=\"primary\">\n  @if (model().label) {\n    <mat-label>{{ model().label }}</mat-label>\n  }\n\n  <textarea\n    matInput\n    [cdkTextareaAutosize]=\"model().resize\"\n    [cdkAutosizeMinRows]=\"model().rows\"\n    [cdkAutosizeMaxRows]=\"model().resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model().name\"\n    [placeholder]=\"model().placeholder\"\n    [attr.minLength]=\"model().minLength\"\n    [attr.maxLength]=\"model().maxLength\"\n    [rows]=\"model().rows\"\n    [autocomplete]=\"model().autocomplete\">\n  </textarea>\n\n  @if (model().hint) {\n    <mat-hint align=\"start\">{{ model().hint }}</mat-hint>\n  }\n\n  @if (model().maxLength) {\n    <mat-hint align=\"end\">{{ maxCountText }}</mat-hint>\n  }\n\n  @for (validator of model().validators; track validator.name) {\n    <ng-container ngProjectAs=\"mat-error\">\n      @if (hasError(validator.name)) {\n        <mat-error>{{ validator.message }}</mat-error>\n      }\n    </ng-container>\n  }\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { textarea: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatInput), { isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
+
+const DYNAMIC_FORM_FIELD_MAP = {
+    [DYNAMIC_FORM_FIELD_BUTTON]: DynamicButtonComponent,
+    [DYNAMIC_FORM_FIELD_BUTTON_TOGGLES]: DynamicButtonTogglesComponent,
+    [DYNAMIC_FORM_FIELD_CHECKBOX]: DynamicCheckboxComponent,
+    [DYNAMIC_FORM_FIELD_DATEPICKER]: DynamicDatepickerComponent,
+    [DYNAMIC_FORM_FIELD_INPUT]: DynamicInputComponent,
+    [DYNAMIC_FORM_FIELD_RADIO_GROUP]: DymamicRadioGroupComponent,
+    [DYNAMIC_FORM_FIELD_READONLY]: DynamicReadonlyComponent,
+    [DYNAMIC_FORM_FIELD_SELECT]: DynamicSelectComponent,
+    [DYNAMIC_FORM_FIELD_TEXTAREA]: DynamicTextareaComponent
+};
+
 class DynamicFormValidators {
     /**
      * Default email validator, the value of the control has to be a valid email address
@@ -729,9 +663,7 @@ class DynamicFormRelationsService {
         const conditionReducer = (controls, condition) => {
             const fieldName = condition.path ?? condition.fieldName;
             // Get the control using the provided path or fieldName
-            const control = condition.path
-                ? group.root.get(condition.path)
-                : group.get(condition.fieldName);
+            const control = condition.path ? group.root.get(condition.path) : group.get(condition.fieldName);
             if (!control) {
                 console.warn(`No related form control with the name ${fieldName} found`);
                 return controls;
@@ -820,19 +752,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class DynamicFormFieldComponent {
     constructor() {
-        this.change = new EventEmitter();
+        this.componentViewContainer = viewChild.required('componentViewContainer', { read: ViewContainerRef });
+        this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
         this.dynamicFormService = inject(DynamicFormService);
         this.relationService = inject(DynamicFormRelationsService);
         this.cdRef = inject(ChangeDetectorRef);
         this._subs = new Subscription();
     }
-    /** Get the instance of a control component using the injected custom method or local method */
+    /**
+     * 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();
+        return this.dynamicFormService.getCustomControlComponentType(this.model()) || this.getControlComponentType();
     }
     ngOnInit() {
-        if (this.group) {
-            this._control = this.group.get(this.model.name);
+        if (this.group()) {
+            this._control = this.group().get(this.model().name);
             this.createFormControlComponent();
             this.setSubscriptions();
         }
@@ -845,51 +781,32 @@ class DynamicFormFieldComponent {
      * @returns
      */
     getControlComponentType() {
-        switch (this.model.type) {
-            case DYNAMIC_FORM_FIELD_BUTTON:
-                return DynamicButtonComponent;
-            case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
-                return DynamicButtonTogglesComponent;
-            case DYNAMIC_FORM_FIELD_CHECKBOX:
-                return DynamicCheckboxComponent;
-            case DYNAMIC_FORM_FIELD_DATEPICKER:
-                return DynamicDatepickerComponent;
-            case DYNAMIC_FORM_FIELD_INPUT:
-                return DynamicInputComponent;
-            case DYNAMIC_FORM_FIELD_RADIO_GROUP:
-                return DymamicRadioGroupComponent;
-            case DYNAMIC_FORM_FIELD_READONLY:
-                return DynamicReadonlyComponent;
-            case DYNAMIC_FORM_FIELD_SELECT:
-                return DynamicSelectComponent;
-            case DYNAMIC_FORM_FIELD_TEXTAREA:
-                return DynamicTextareaComponent;
-            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;
+        const field = DYNAMIC_FORM_FIELD_MAP[this.model().type];
+        if (!field) {
+            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;
         }
+        return field;
     }
     createFormControlComponent() {
         const component = this.componentType;
         if (component != null) {
-            let componentRef = this.componentViewContainer.createComponent(component);
-            const componentInstance = componentRef.instance;
-            this._subs.add(componentInstance.change?.subscribe((event) => this.onChange(event)));
-            componentInstance.group = this.group;
-            componentInstance.model = this.model;
+            let componentRef = this.componentViewContainer().createComponent(component);
+            componentRef.setInput('group', this.group());
+            componentRef.setInput('model', this.model());
         }
     }
     /**
      * Setup all necessary subscriptions of the FormControl
      */
     setSubscriptions() {
-        const model = this.model;
+        const model = this.model();
         // Subscribe to the value change inside the control to change 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) {
+        if (this.model().relations?.length) {
             this.setUpRelations();
         }
     }
@@ -898,8 +815,8 @@ class DynamicFormFieldComponent {
      */
     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);
+        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));
     }
@@ -908,8 +825,8 @@ class DynamicFormFieldComponent {
      * @param value
      */
     onValueChange(value) {
-        if (this.model instanceof DynamicFormFieldValueModel && this.model.value !== value) {
-            this.model.value = value;
+        if (this.model() instanceof DynamicFormFieldValueModel && this.model().value !== value) {
+            this.model().value = value;
         }
     }
     /**
@@ -921,45 +838,31 @@ class DynamicFormFieldComponent {
         disabled ? this._control.disable() : this._control.enable();
         this.cdRef.markForCheck();
     }
-    onChange(ev) {
-        this.change.emit(this.createDynamicFormEvent(ev, 'change'));
-    }
-    createDynamicFormEvent(event, type) {
-        return { event, type, control: this._control, form: this.group, model: this.model };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "componentViewContainer", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  [formGroup]=\"group()\"\n  [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model().type]\">\n  <ng-container #componentViewContainer></ng-container>\n</div>\n", 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: "20.3.16", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ 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
-            }], change: [{
-                type: Output
-            }] } });
+            args: [{ imports: [NgClass, ReactiveFormsModule], selector: 'dynamic-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [formGroup]=\"group()\"\n  [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model().type]\">\n  <ng-container #componentViewContainer></ng-container>\n</div>\n" }]
+        }], propDecorators: { componentViewContainer: [{ type: i0.ViewChild, args: ['componentViewContainer', { ...{ read: ViewContainerRef }, isSignal: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }] } });
 
 class DynamicFormComponent {
     constructor() {
-        this.change = new EventEmitter();
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.formConfig = input.required(...(ngDevMode ? [{ debugName: "formConfig" }] : []));
     }
     /**
      * Get the formConfig as flat array.
      */
     get flatFormConfig() {
-        return this.formConfig.reduce((acc, curr) => acc.concat(curr), []);
+        return this.formConfig().reduce((acc, curr) => acc.concat(curr), []);
     }
     /**
      * 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;
+        const formValue = includeDisabledFields ? this.group().getRawValue() : this.group().value;
         return formValue;
     }
     /**
@@ -969,30 +872,59 @@ class DynamicFormComponent {
      * @returns Observable<unknown>
      */
     onControlChange(name) {
-        const field = this.group.get(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;
     }
-    onChange(event) {
-        this.change.emit(event);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { group: "group", formConfig: "formConfig" }, outputs: { change: "change" }, providers: [DynamicFormService], ngImport: i0, template: "@for(row of formConfig; track $index) {\n<div class=\"dynamic-form-row\">\n  @for(field of row; track field.id) {\n  <dynamic-form-field 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    (change)=\"onChange($event)\">\n  </dynamic-form-field>\n  }\n</div>\n}", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%}.dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, formConfig: { classPropertyName: "formConfig", publicName: "formConfig", isSignal: true, isRequired: true, transformFunction: null } }, providers: [DynamicFormService], ngImport: i0, template: "@for (row of formConfig(); track $index) {\n  <div class=\"dynamic-form-row\">\n    @for (field of row; track field.id) {\n      <dynamic-form-field\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    }\n  </div>\n}\n", styles: [".dynamic-form-row{display:flex;gap:var(--form-field-spacing, 1rem)}.dynamic-form-row .dynamic-form-field{width:100%}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ imports: [NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for(row of formConfig; track $index) {\n<div class=\"dynamic-form-row\">\n  @for(field of row; track field.id) {\n  <dynamic-form-field 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    (change)=\"onChange($event)\">\n  </dynamic-form-field>\n  }\n</div>\n}", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%}.dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-100{width:100%}\n"] }]
-        }], propDecorators: { group: [{
-                type: Input,
-                args: [{ required: true }]
-            }], formConfig: [{
-                type: Input,
-                args: [{ required: true }]
-            }], change: [{
-                type: Output
-            }] } });
+            args: [{ imports: [NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (row of formConfig(); track $index) {\n  <div class=\"dynamic-form-row\">\n    @for (field of row; track field.id) {\n      <dynamic-form-field\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    }\n  </div>\n}\n", styles: [".dynamic-form-row{display:flex;gap:var(--form-field-spacing, 1rem)}.dynamic-form-row .dynamic-form-field{width:100%}.dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-100{width:100%}\n"] }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], formConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formConfig", required: true }] }] } });
+
+/**
+ * Transform any list to a list of DynamicFormFieldOption which is used in any Dynamic Form Field with options (e.g. DynamicSelect).
+ * Possible to provide the method with type definitions to define the provided list type `<T>` and desired option value type `<K>`:
+ *
+ * `dynamicFormService.toDynamicOptionList<T, K>(...)`
+ *
+ * Generic types:
+ *  - T = The type of the items in the provided list
+ *  - K = The type of the value inside an DynamicFormFieldOption. Default is 'string'
+ * @param arr An array of items of type T
+ * @param labelFn Callback to define the label of the options in the template
+ * @param valueFn Callback to define the value of the options. Must return a value of type K (default string)
+ * @returns
+ */
+function arrToDynamicFormOptions(arr, labelFn, valueFn) {
+    return arr.map((item) => {
+        return {
+            label: labelFn(item),
+            value: valueFn(item)
+        };
+    });
+}
+/**
+ * Transform any Observable of a list to a list of DynamicFormFieldOption which is used in any Dynamic Form Field with options (e.g. DynamicSelect).
+ * Possible to provide the method with type definitions to define the provided list type `<T>` and desired option value type `<K>`:
+ *
+ * `dynamicFormService.toDynamicOptionList<T, K>(...)`
+ *
+ * Generic types:
+ *  - T = The type of the items in the provided list
+ *  - K = The type of the value inside an DynamicFormFieldOption. Default is 'string'
+ * @param obs An Observable of a list of items of type T
+ * @param labelFn Callback to define the label of the options in the template
+ * @param valueFn Callback to define the value of the options. Must return a value of type K (default string)
+ * @returns
+ */
+function obsToDynamicFormOptions(obs, labelFn, valueFn) {
+    return obs.pipe(map((arr) => arrToDynamicFormOptions(arr, labelFn, valueFn)));
+}
 
 /*
  * Public API Surface of ngx-dynamic-form
@@ -1002,5 +934,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
+export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP$1 as DYNAMIC_FORM_FIELD_MAP, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator, arrToDynamicFormOptions, obsToDynamicFormOptions };
 //# sourceMappingURL=olafvv-ngx-dynamic-form.mjs.map