@olafvv/ngx-dynamic-form 0.0.2 → 0.1.0

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

@@ -1,14 +1,16 @@
-import { NgIf, NgFor, AsyncPipe, NgClass } from '@angular/common';
+import { NgFor, AsyncPipe, NgIf, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, Component, Input, EventEmitter, Output, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { map, BehaviorSubject, of, isObservable, startWith, distinctUntilChanged, Subscription } from 'rxjs';
-import * as i1$1 from '@angular/material/button';
+import * as i1$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i1$2 from '@angular/material/form-field';
+import * as i1$3 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
@@ -74,8 +76,8 @@ class DynamicFormService {
     /**
      * Create a FormGroup from the provided form configuration.
      * Returns a FormGroup.
-     * @param config
-     * @returns
+     * @param {DynamicFormConfig} config Configuration object of a form
+     * @returns {UntypedFormGroup}
      */
     createFormGroup(config) {
         const group = this.fb.group({});
@@ -94,12 +96,16 @@ class DynamicFormService {
     }
     /**
      * 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
-     * @param listObs
-     * @param labelCb
-     * @param valueCb
+     *  - 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) {
@@ -127,7 +133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type: Optional
                 }] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }]; } });
 
-class DynamicFormFieldBaseComponent {
+class DynamicFormFieldBase {
     get id() {
         return this.model.id ?? this.model.name;
     }
@@ -144,14 +150,8 @@ class DynamicFormFieldBaseComponent {
     get isInvalid() {
         return this.control.invalid;
     }
-    onBlur(ev) {
-        this.blur.emit(ev);
-    }
-    onChange(ev) {
-        this.change.emit(ev);
-    }
-    onFocus(ev) {
-        this.focus.emit(ev);
+    onChange(event) {
+        this.change.emit(event);
     }
     resetControl() {
         this.group.get(this.model.name)?.reset();
@@ -161,20 +161,23 @@ class DynamicFormFieldBaseComponent {
     }
 }
 
-class DynamicButtonComponent extends DynamicFormFieldBaseComponent {
-    onClick() {
-        this.model.onClick();
+class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.change = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "app-dynamic-button-toggles", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<ng-container [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    <mat-button-toggle *ngFor=\"let option of model.options$ | async\"\n      [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n  </mat-button-toggle-group>\n</ng-container>", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], 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: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>" }]
+            args: [{ standalone: true, imports: [NgFor, MatButtonToggleModule, ReactiveFormsModule, AsyncPipe], selector: 'app-dynamic-button-toggles', template: "<ng-container [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    <mat-button-toggle *ngFor=\"let option of model.options$ | async\"\n      [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n  </mat-button-toggle-group>\n</ng-container>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], group: [{
                 type: Input
+            }], change: [{
+                type: Output
             }] } });
 
 class DynamicFormFieldModel {
@@ -200,6 +203,100 @@ class DynamicFormFieldModel {
     }
 }
 
+class DynamicFormFieldValueModel extends DynamicFormFieldModel {
+    constructor(config) {
+        super(config);
+        this._defaultValue = config.defaultValue ?? null;
+        this._value = config.value ?? null;
+        this._value$ = new BehaviorSubject(this._value);
+        this.valueChanges = this._value$.asObservable();
+    }
+    get defaultValue() {
+        return this._defaultValue;
+    }
+    set defaultValue(val) {
+        this._defaultValue = val;
+    }
+    get value() {
+        return this._value$.getValue();
+    }
+    set value(val) {
+        this._value$.next(val);
+    }
+}
+
+/**
+ * Base class for any DynamicFormField with options (e.g. DynamicSelect or DynamicAutocomplete)
+ */
+class DynamicFormFieldOptionModel extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this._options = [];
+        this._groupedOptions = [];
+        if (!config.options && !config.groupedOptions) {
+            console.error(`No options or groupedOptions provided for ${this.name}`);
+        }
+        if (config.options) {
+            this.options$ = this.setOptions(config.options);
+        }
+        else if (config.groupedOptions) {
+            this.groupedOptions$ = this.setGroupedOptions(config.groupedOptions);
+        }
+    }
+    setOptions(options) {
+        if (Array.isArray(options)) {
+            this._options = options;
+            return of(this._options);
+        }
+        if (isObservable(options)) {
+            return options.pipe(map((o) => {
+                this._options = o;
+                return this._options;
+            }));
+        }
+        return of([]);
+    }
+    setGroupedOptions(groupedOptions) {
+        if (Array.isArray(groupedOptions)) {
+            this._groupedOptions = groupedOptions;
+            return of(this._groupedOptions);
+        }
+        if (isObservable(groupedOptions)) {
+            return groupedOptions.pipe(map((o) => {
+                this._groupedOptions = o;
+                return this._groupedOptions;
+            }));
+        }
+        return of([]);
+    }
+}
+
+const DYNAMIC_FORM_FIELD_BUTTON_TOGGLES = 'button-toggles';
+class DynamicButtonToggles extends DynamicFormFieldOptionModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_BUTTON_TOGGLES;
+        this.multiple = config.multiple ?? false;
+        this.vertical = config.vertical ?? false;
+    }
+}
+
+class DynamicButtonComponent extends DynamicFormFieldBase {
+    onClick() {
+        this.model.onClick();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicButtonComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<ng-container *ngIf=\"model.raised else stroked\">\n  <button mat-raised-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-container>\n\n<ng-template #stroked>\n  <button mat-stroked-button\n    color=\"primary\"\n    [id]=\"id\"\n    (click)=\"onClick()\">\n    <span>{{model.text}}</span>\n  </button>\n</ng-template>" }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }] } });
+
 const DYNAMIC_FORM_FIELD_BUTTON = 'button';
 class DynamicButton extends DynamicFormFieldModel {
     constructor(config) {
@@ -211,53 +308,25 @@ class DynamicButton extends DynamicFormFieldModel {
     }
 }
 
-class DynamicCheckboxComponent extends DynamicFormFieldBaseComponent {
+class DynamicCheckboxComponent extends DynamicFormFieldBase {
     constructor() {
         super(...arguments);
-        this.blur = new EventEmitter();
         this.change = new EventEmitter();
-        this.focus = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "<ng-container [formGroup]=\"group\">\n  <mat-checkbox [checked]=\"model.checked\"\n    [formControlName]=\"model.name\"\n    [indeterminate]=\"model.indeterminate\"\n    [labelPosition]=\"model.labelPosition\"\n    [name]=\"model.name\"\n    [id]=\"id\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (change)=\"onChange($event)\">\n\n    <span class=\"checkbox-label\">{{model.label}}</span>\n  </mat-checkbox>\n</ng-container>", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicCheckboxComponent, isStandalone: true, selector: "dynamic-checkbox", inputs: { model: "model", group: "group" }, outputs: { 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: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dynamic-checkbox', standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule], template: "<ng-container [formGroup]=\"group\">\n  <mat-checkbox [checked]=\"model.checked\"\n    [formControlName]=\"model.name\"\n    [indeterminate]=\"model.indeterminate\"\n    [labelPosition]=\"model.labelPosition\"\n    [name]=\"model.name\"\n    [id]=\"id\"\n    (blur)=\"onBlur($event)\"\n    (focus)=\"onFocus($event)\"\n    (change)=\"onChange($event)\">\n\n    <span class=\"checkbox-label\">{{model.label}}</span>\n  </mat-checkbox>\n</ng-container>" }]
+            args: [{ selector: 'dynamic-checkbox', standalone: true, imports: [ReactiveFormsModule, MatCheckboxModule], template: "<ng-container [formGroup]=\"group\">\n  <mat-checkbox [checked]=\"model.checked\"\n    [formControlName]=\"model.name\"\n    [indeterminate]=\"model.indeterminate\"\n    [labelPosition]=\"model.labelPosition\"\n    [name]=\"model.name\"\n    [id]=\"id\"\n    (change)=\"onChange($event)\">\n\n    <span class=\"checkbox-label\">{{model.label}}</span>\n  </mat-checkbox>\n</ng-container>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], group: [{
                 type: Input
-            }], blur: [{
-                type: Output
             }], change: [{
                 type: Output
-            }], focus: [{
-                type: Output
             }] } });
 
-class DynamicFormFieldValueModel extends DynamicFormFieldModel {
-    constructor(config) {
-        super(config);
-        this._defaultValue = config.defaultValue ?? null;
-        this._value = config.value ?? null;
-        this._value$ = new BehaviorSubject(this._value);
-        this.valueChanges = this._value$.asObservable();
-    }
-    get defaultValue() {
-        return this._defaultValue;
-    }
-    set defaultValue(val) {
-        this._defaultValue = val;
-    }
-    get value() {
-        return this._value$.getValue();
-    }
-    set value(val) {
-        this._value$.next(val);
-    }
-}
-
 const DYNAMIC_FORM_FIELD_CHECKBOX = 'checkbox';
 class DynamicCheckbox extends DynamicFormFieldValueModel {
     constructor(config) {
@@ -278,12 +347,10 @@ class DynamicCheckbox extends DynamicFormFieldValueModel {
     }
 }
 
-class DynamicInputComponent extends DynamicFormFieldBaseComponent {
+class DynamicInputComponent extends DynamicFormFieldBase {
     constructor() {
         super(...arguments);
-        this.blur = new EventEmitter();
         this.change = new EventEmitter();
-        this.focus = new EventEmitter();
     }
     get valueCount() {
         return this.input?.value ? this.input.value.length : 0;
@@ -294,12 +361,19 @@ class DynamicInputComponent extends DynamicFormFieldBaseComponent {
     get showClear() {
         return !!this.control.value && !this.control.disabled;
     }
+    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: "16.2.12", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicInputComponent, isStandalone: true, selector: "dynamic-input", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf, NgFor, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf, NgFor, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule], template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <span matTextPrefix\n    *ngIf=\"model.prefix\">{{model.prefix}}</span>\n\n  <input matInput\n    [type]=\"model.inputType\"\n    [formControlName]=\"model.name\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput, { static: true }]
@@ -307,12 +381,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], group: [{
                 type: Input
-            }], blur: [{
-                type: Output
             }], change: [{
                 type: Output
-            }], focus: [{
-                type: Output
             }] } });
 
 const DYNAMIC_FORM_FIELD_INPUT = 'input';
@@ -329,10 +399,11 @@ class DynamicInput extends DynamicFormFieldValueModel {
         this.pattern = config.pattern ?? '';
         this.autocomplete = config.autocomplete ?? 'off';
         this.prefix = config.prefix ?? null;
+        this.hideClearIcon = config.hideClearIcon ?? false;
     }
 }
 
-class DynamicReadonlyComponent extends DynamicFormFieldBaseComponent {
+class DynamicReadonlyComponent extends DynamicFormFieldBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicReadonlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicReadonlyComponent, isStandalone: true, selector: "dynamic-readonly", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-form-field-readonly\"\n  [formGroup]=\"group\"\n  [id]=\"id\">\n  <div class=\"label\">{{model.label}}</div>\n  <span>{{model.value}}</span>\n</div>", styles: [".dynamic-form-field-readonly{width:100%;margin:8px 0;color:var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, .87))}.dynamic-form-field-readonly .label{font-size:var(--mdc-typography-body2-font-size, 14px);line-height:var(--mdc-typography-body2-line-height, 20px);margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
 }
@@ -353,80 +424,28 @@ class DynamicReadonly extends DynamicFormFieldValueModel {
     }
 }
 
-class DynamicSelectComponent extends DynamicFormFieldBaseComponent {
+class DynamicSelectComponent extends DynamicFormFieldBase {
     constructor() {
         super(...arguments);
-        this.blur = new EventEmitter();
         this.change = new EventEmitter();
-        this.focus = new EventEmitter();
     }
     trackByFn(index, option) {
         return option.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl>\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl>\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicSelectComponent, isStandalone: true, selector: "dynamic-select", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\"\n        (selectionChange)=\"onChange($event)\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\"\n        (selectionChange)=\"onChange($event)\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicSelectComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl>\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl>\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
+            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, ReactiveFormsModule, MatSelectModule, MatOptionModule, AsyncPipe, MatInputModule], selector: 'dynamic-select', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label>{{model.label}}</mat-label>\n\n  <!-- Template for select without grouped options -->\n  <ng-container *ngIf=\"model.options$ | async as options\">\n    <ng-container *ngIf=\"!model.native else nativeSelect\">\n      <mat-select [formControlName]=\"model.name\"\n        [multiple]=\"model.multiple\"\n        (selectionChange)=\"onChange($event)\">\n        <mat-option *ngFor=\"let option of options; trackBy: trackByFn\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        <option *ngFor=\"let option of options\"\n          [value]=\"option.value\">\n          {{option.label}}\n        </option>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <!-- Template for select with grouped options -->\n  <ng-container *ngIf=\"model.groupedOptions$ | async as groupedOptions\">\n    <ng-container *ngIf=\"!model.native else nativeSelectGrouped\">\n      <mat-select [formControlName]=\"model.name\"\n        (selectionChange)=\"onChange($event)\">\n        <mat-optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <mat-option *ngFor=\"let option of group.options; trackBy: trackByFn\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n        </mat-optgroup>\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        <optgroup *ngFor=\"let group of groupedOptions\"\n          [label]=\"group.name\">\n          <option *ngFor=\"let option of group.options\"\n            [value]=\"option.value\">\n            {{option.label}}\n          </option>\n        </optgroup>\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-option{padding-top:8px;padding-bottom:8px}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], group: [{
                 type: Input
-            }], blur: [{
-                type: Output
             }], change: [{
                 type: Output
-            }], focus: [{
-                type: Output
             }] } });
 
-/**
- * Base class for any DynamicFormField with options (e.g. DynamicSelect or DynamicAutocomplete)
- */
-class DynamicFormFieldOptionModel extends DynamicFormFieldValueModel {
-    constructor(config) {
-        super(config);
-        this._options = [];
-        this._groupedOptions = [];
-        if (!config.options && !config.groupedOptions) {
-            console.error(`No options or groupedOptions provided for ${this.name}`);
-        }
-        if (config.options) {
-            this.options$ = this.setOptions(config.options);
-        }
-        else if (config.groupedOptions) {
-            this.groupedOptions$ = this.setGroupedOptions(config.groupedOptions);
-        }
-    }
-    setOptions(options) {
-        if (Array.isArray(options)) {
-            this._options = options;
-            return of(this._options);
-        }
-        if (isObservable(options)) {
-            return options.pipe(map((o) => {
-                this._options = o;
-                return this._options;
-            }));
-        }
-        return of([]);
-    }
-    setGroupedOptions(groupedOptions) {
-        if (Array.isArray(groupedOptions)) {
-            this._groupedOptions = groupedOptions;
-            return of(this._groupedOptions);
-        }
-        if (isObservable(groupedOptions)) {
-            return groupedOptions.pipe(map((o) => {
-                this._groupedOptions = o;
-                return this._groupedOptions;
-            }));
-        }
-        return of([]);
-    }
-}
-
 const DYNAMIC_FORM_FIELD_SELECT = 'select';
 class DynamicSelect extends DynamicFormFieldOptionModel {
     constructor(config) {
@@ -437,12 +456,10 @@ class DynamicSelect extends DynamicFormFieldOptionModel {
     }
 }
 
-class DynamicTextareaComponent extends DynamicFormFieldBaseComponent {
+class DynamicTextareaComponent extends DynamicFormFieldBase {
     constructor() {
         super(...arguments);
-        this.blur = new EventEmitter();
         this.change = new EventEmitter();
-        this.focus = new EventEmitter();
     }
     get valueCount() {
         return this.textarea?.value ? this.textarea.value.length : 0;
@@ -450,12 +467,19 @@ class DynamicTextareaComponent extends DynamicFormFieldBaseComponent {
     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: "16.2.12", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: "model", group: "group" }, outputs: { blur: "blur", change: "change", focus: "focus" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicTextareaComponent, isStandalone: true, selector: "dynamic-textarea", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: MatInput, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ standalone: true, imports: [NgIf, NgFor, MatFormFieldModule, MatInputModule, ReactiveFormsModule], selector: 'dynamic-textarea', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <textarea matInput\n    [cdkTextareaAutosize]=\"model.resize\"\n    [cdkAutosizeMinRows]=\"model.rows\"\n    [cdkAutosizeMaxRows]=\"model.resizeMaxRows\"\n    [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  <mat-hint *ngIf=\"model.maxLength\"\n    align=\"end\">{{maxCountText}}</mat-hint>\n\n  <ng-container *ngFor=\"let validator of model.validators\"\n    ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
         }], propDecorators: { textarea: [{
                 type: ViewChild,
                 args: [MatInput, { static: true }]
@@ -463,12 +487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], group: [{
                 type: Input
-            }], blur: [{
-                type: Output
             }], change: [{
                 type: Output
-            }], focus: [{
-                type: Output
             }] } });
 
 const DYNAMIC_FORM_FIELD_TEXTAREA = 'textarea';
@@ -571,6 +591,7 @@ var RelationOperator;
     RelationOperator["AND"] = "AND";
     RelationOperator["OR"] = "OR";
 })(RelationOperator || (RelationOperator = {}));
+
 const DISABLE_ACTION = {
     type: RelationActionType.DISABLED,
     reversedType: RelationActionType.ENABLED,
@@ -703,6 +724,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class DynamicFormFieldComponent {
     constructor() {
+        this.change = new EventEmitter();
         this._subs = new Subscription();
         this.dynamicFormService = inject(DynamicFormService);
         this.relationService = inject(DynamicFormRelationsService);
@@ -739,6 +761,8 @@ class DynamicFormFieldComponent {
                 return DynamicSelectComponent;
             case DYNAMIC_FORM_FIELD_BUTTON:
                 return DynamicButtonComponent;
+            case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
+                return DynamicButtonTogglesComponent;
             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;
@@ -749,6 +773,7 @@ class DynamicFormFieldComponent {
         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;
         }
@@ -794,8 +819,14 @@ class DynamicFormFieldComponent {
     onDisabledChange(disabled) {
         disabled ? this._control.disable() : this._control.enable();
     }
+    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: "16.2.12", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: "model", group: "group" }, viewQueries: [{ propertyName: "componentViewContainer", first: true, predicate: ["componentViewContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div [formGroup]=\"group\"\n  [ngClass]=\"['dynamic-form-field-container', 'dynamic-form-field-' + model.type]\">\n  <ng-container #componentViewContainer></ng-container>\n</div>", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormFieldComponent, isStandalone: true, selector: "dynamic-form-field", inputs: { model: "model", group: "group" }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
@@ -807,12 +838,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], group: [{
                 type: Input
+            }], change: [{
+                type: Output
             }] } });
 
 class DynamicFormComponent {
     constructor() {
-        this.ready = new EventEmitter();
-        this.dynamicFormService = inject(DynamicFormService);
+        this.change = new EventEmitter();
     }
     /**
      * Get the formConfig as flat array.
@@ -820,10 +852,12 @@ class DynamicFormComponent {
     get flatFormConfig() {
         return this.formConfig.reduce((acc, curr) => acc.concat(curr), []);
     }
-    ngOnInit() {
-        this.group = this.dynamicFormService.createFormGroup(this.formConfig);
-        this.ready.emit(this.group);
-    }
+    /**
+     * TrackBy Function for performance optimization
+     * @param _index
+     * @param field
+     * @returns
+     */
     trackByFn(_index, field) {
         return field.id;
     }
@@ -839,25 +873,31 @@ class DynamicFormComponent {
      * Provides an Observable to listen to changes of a specific field in the form.
      *
      * @param name Name of the field
-     * @returns Observable<any>
+     * @returns Observable<unknown>
      */
-    onChange(name) {
+    onControlChange(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: "16.2.12", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { formConfig: "formConfig" }, outputs: { ready: "ready" }, providers: [DynamicFormService], ngImport: i0, template: "<form [formGroup]=\"group\"\n  class=\"dynamic-form\">\n  <div *ngFor=\"let row of formConfig\"\n    class=\"dynamic-form-row\">\n    <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n      class=\"dynamic-form-field\"\n      [id]=\"field.id\"\n      [hidden]=\"field.hidden\"\n      [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n      [group]=\"group\"\n      [model]=\"field\">\n    </dynamic-form-field>\n  </div>\n</form>", styles: [".dynamic-form{width:100%}.dynamic-form .dynamic-form-row{width:100%;display:flex}.dynamic-form .dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form .dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form .dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form .dynamic-form-row .form-field-width-1{width:1%}.dynamic-form .dynamic-form-row .form-field-width-2{width:2%}.dynamic-form .dynamic-form-row .form-field-width-3{width:3%}.dynamic-form .dynamic-form-row .form-field-width-4{width:4%}.dynamic-form .dynamic-form-row .form-field-width-5{width:5%}.dynamic-form .dynamic-form-row .form-field-width-6{width:6%}.dynamic-form .dynamic-form-row .form-field-width-7{width:7%}.dynamic-form .dynamic-form-row .form-field-width-8{width:8%}.dynamic-form .dynamic-form-row .form-field-width-9{width:9%}.dynamic-form .dynamic-form-row .form-field-width-10{width:10%}.dynamic-form .dynamic-form-row .form-field-width-11{width:11%}.dynamic-form .dynamic-form-row .form-field-width-12{width:12%}.dynamic-form .dynamic-form-row .form-field-width-13{width:13%}.dynamic-form .dynamic-form-row .form-field-width-14{width:14%}.dynamic-form .dynamic-form-row .form-field-width-15{width:15%}.dynamic-form .dynamic-form-row .form-field-width-16{width:16%}.dynamic-form .dynamic-form-row .form-field-width-17{width:17%}.dynamic-form .dynamic-form-row .form-field-width-18{width:18%}.dynamic-form .dynamic-form-row .form-field-width-19{width:19%}.dynamic-form .dynamic-form-row .form-field-width-20{width:20%}.dynamic-form .dynamic-form-row .form-field-width-21{width:21%}.dynamic-form .dynamic-form-row .form-field-width-22{width:22%}.dynamic-form .dynamic-form-row .form-field-width-23{width:23%}.dynamic-form .dynamic-form-row .form-field-width-24{width:24%}.dynamic-form .dynamic-form-row .form-field-width-25{width:25%}.dynamic-form .dynamic-form-row .form-field-width-26{width:26%}.dynamic-form .dynamic-form-row .form-field-width-27{width:27%}.dynamic-form .dynamic-form-row .form-field-width-28{width:28%}.dynamic-form .dynamic-form-row .form-field-width-29{width:29%}.dynamic-form .dynamic-form-row .form-field-width-30{width:30%}.dynamic-form .dynamic-form-row .form-field-width-31{width:31%}.dynamic-form .dynamic-form-row .form-field-width-32{width:32%}.dynamic-form .dynamic-form-row .form-field-width-33{width:33%}.dynamic-form .dynamic-form-row .form-field-width-34{width:34%}.dynamic-form .dynamic-form-row .form-field-width-35{width:35%}.dynamic-form .dynamic-form-row .form-field-width-36{width:36%}.dynamic-form .dynamic-form-row .form-field-width-37{width:37%}.dynamic-form .dynamic-form-row .form-field-width-38{width:38%}.dynamic-form .dynamic-form-row .form-field-width-39{width:39%}.dynamic-form .dynamic-form-row .form-field-width-40{width:40%}.dynamic-form .dynamic-form-row .form-field-width-41{width:41%}.dynamic-form .dynamic-form-row .form-field-width-42{width:42%}.dynamic-form .dynamic-form-row .form-field-width-43{width:43%}.dynamic-form .dynamic-form-row .form-field-width-44{width:44%}.dynamic-form .dynamic-form-row .form-field-width-45{width:45%}.dynamic-form .dynamic-form-row .form-field-width-46{width:46%}.dynamic-form .dynamic-form-row .form-field-width-47{width:47%}.dynamic-form .dynamic-form-row .form-field-width-48{width:48%}.dynamic-form .dynamic-form-row .form-field-width-49{width:49%}.dynamic-form .dynamic-form-row .form-field-width-50{width:50%}.dynamic-form .dynamic-form-row .form-field-width-51{width:51%}.dynamic-form .dynamic-form-row .form-field-width-52{width:52%}.dynamic-form .dynamic-form-row .form-field-width-53{width:53%}.dynamic-form .dynamic-form-row .form-field-width-54{width:54%}.dynamic-form .dynamic-form-row .form-field-width-55{width:55%}.dynamic-form .dynamic-form-row .form-field-width-56{width:56%}.dynamic-form .dynamic-form-row .form-field-width-57{width:57%}.dynamic-form .dynamic-form-row .form-field-width-58{width:58%}.dynamic-form .dynamic-form-row .form-field-width-59{width:59%}.dynamic-form .dynamic-form-row .form-field-width-60{width:60%}.dynamic-form .dynamic-form-row .form-field-width-61{width:61%}.dynamic-form .dynamic-form-row .form-field-width-62{width:62%}.dynamic-form .dynamic-form-row .form-field-width-63{width:63%}.dynamic-form .dynamic-form-row .form-field-width-64{width:64%}.dynamic-form .dynamic-form-row .form-field-width-65{width:65%}.dynamic-form .dynamic-form-row .form-field-width-66{width:66%}.dynamic-form .dynamic-form-row .form-field-width-67{width:67%}.dynamic-form .dynamic-form-row .form-field-width-68{width:68%}.dynamic-form .dynamic-form-row .form-field-width-69{width:69%}.dynamic-form .dynamic-form-row .form-field-width-70{width:70%}.dynamic-form .dynamic-form-row .form-field-width-71{width:71%}.dynamic-form .dynamic-form-row .form-field-width-72{width:72%}.dynamic-form .dynamic-form-row .form-field-width-73{width:73%}.dynamic-form .dynamic-form-row .form-field-width-74{width:74%}.dynamic-form .dynamic-form-row .form-field-width-75{width:75%}.dynamic-form .dynamic-form-row .form-field-width-76{width:76%}.dynamic-form .dynamic-form-row .form-field-width-77{width:77%}.dynamic-form .dynamic-form-row .form-field-width-78{width:78%}.dynamic-form .dynamic-form-row .form-field-width-79{width:79%}.dynamic-form .dynamic-form-row .form-field-width-80{width:80%}.dynamic-form .dynamic-form-row .form-field-width-81{width:81%}.dynamic-form .dynamic-form-row .form-field-width-82{width:82%}.dynamic-form .dynamic-form-row .form-field-width-83{width:83%}.dynamic-form .dynamic-form-row .form-field-width-84{width:84%}.dynamic-form .dynamic-form-row .form-field-width-85{width:85%}.dynamic-form .dynamic-form-row .form-field-width-86{width:86%}.dynamic-form .dynamic-form-row .form-field-width-87{width:87%}.dynamic-form .dynamic-form-row .form-field-width-88{width:88%}.dynamic-form .dynamic-form-row .form-field-width-89{width:89%}.dynamic-form .dynamic-form-row .form-field-width-90{width:90%}.dynamic-form .dynamic-form-row .form-field-width-91{width:91%}.dynamic-form .dynamic-form-row .form-field-width-92{width:92%}.dynamic-form .dynamic-form-row .form-field-width-93{width:93%}.dynamic-form .dynamic-form-row .form-field-width-94{width:94%}.dynamic-form .dynamic-form-row .form-field-width-95{width:95%}.dynamic-form .dynamic-form-row .form-field-width-96{width:96%}.dynamic-form .dynamic-form-row .form-field-width-97{width:97%}.dynamic-form .dynamic-form-row .form-field-width-98{width:98%}.dynamic-form .dynamic-form-row .form-field-width-99{width:99%}.dynamic-form .dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DynamicFormComponent, isStandalone: true, selector: "dynamic-form", inputs: { group: "group", formConfig: "formConfig" }, outputs: { change: "change" }, providers: [DynamicFormService], ngImport: i0, template: "<div *ngFor=\"let row of formConfig\"\n  class=\"dynamic-form-row\">\n  <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n    class=\"dynamic-form-field\"\n    [id]=\"field.id\"\n    [hidden]=\"field.hidden\"\n    [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n    [group]=\"group\"\n    [model]=\"field\"\n    (change)=\"onChange($event)\">\n  </dynamic-form-field>\n</div>", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.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-1{width:1%}.dynamic-form-row .form-field-width-2{width:2%}.dynamic-form-row .form-field-width-3{width:3%}.dynamic-form-row .form-field-width-4{width:4%}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-6{width:6%}.dynamic-form-row .form-field-width-7{width:7%}.dynamic-form-row .form-field-width-8{width:8%}.dynamic-form-row .form-field-width-9{width:9%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-11{width:11%}.dynamic-form-row .form-field-width-12{width:12%}.dynamic-form-row .form-field-width-13{width:13%}.dynamic-form-row .form-field-width-14{width:14%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-16{width:16%}.dynamic-form-row .form-field-width-17{width:17%}.dynamic-form-row .form-field-width-18{width:18%}.dynamic-form-row .form-field-width-19{width:19%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-21{width:21%}.dynamic-form-row .form-field-width-22{width:22%}.dynamic-form-row .form-field-width-23{width:23%}.dynamic-form-row .form-field-width-24{width:24%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-26{width:26%}.dynamic-form-row .form-field-width-27{width:27%}.dynamic-form-row .form-field-width-28{width:28%}.dynamic-form-row .form-field-width-29{width:29%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-31{width:31%}.dynamic-form-row .form-field-width-32{width:32%}.dynamic-form-row .form-field-width-33{width:33%}.dynamic-form-row .form-field-width-34{width:34%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-36{width:36%}.dynamic-form-row .form-field-width-37{width:37%}.dynamic-form-row .form-field-width-38{width:38%}.dynamic-form-row .form-field-width-39{width:39%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-41{width:41%}.dynamic-form-row .form-field-width-42{width:42%}.dynamic-form-row .form-field-width-43{width:43%}.dynamic-form-row .form-field-width-44{width:44%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-46{width:46%}.dynamic-form-row .form-field-width-47{width:47%}.dynamic-form-row .form-field-width-48{width:48%}.dynamic-form-row .form-field-width-49{width:49%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-51{width:51%}.dynamic-form-row .form-field-width-52{width:52%}.dynamic-form-row .form-field-width-53{width:53%}.dynamic-form-row .form-field-width-54{width:54%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-56{width:56%}.dynamic-form-row .form-field-width-57{width:57%}.dynamic-form-row .form-field-width-58{width:58%}.dynamic-form-row .form-field-width-59{width:59%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-61{width:61%}.dynamic-form-row .form-field-width-62{width:62%}.dynamic-form-row .form-field-width-63{width:63%}.dynamic-form-row .form-field-width-64{width:64%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-66{width:66%}.dynamic-form-row .form-field-width-67{width:67%}.dynamic-form-row .form-field-width-68{width:68%}.dynamic-form-row .form-field-width-69{width:69%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-71{width:71%}.dynamic-form-row .form-field-width-72{width:72%}.dynamic-form-row .form-field-width-73{width:73%}.dynamic-form-row .form-field-width-74{width:74%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-76{width:76%}.dynamic-form-row .form-field-width-77{width:77%}.dynamic-form-row .form-field-width-78{width:78%}.dynamic-form-row .form-field-width-79{width:79%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-81{width:81%}.dynamic-form-row .form-field-width-82{width:82%}.dynamic-form-row .form-field-width-83{width:83%}.dynamic-form-row .form-field-width-84{width:84%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-86{width:86%}.dynamic-form-row .form-field-width-87{width:87%}.dynamic-form-row .form-field-width-88{width:88%}.dynamic-form-row .form-field-width-89{width:89%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-91{width:91%}.dynamic-form-row .form-field-width-92{width:92%}.dynamic-form-row .form-field-width-93{width:93%}.dynamic-form-row .form-field-width-94{width:94%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-96{width:96%}.dynamic-form-row .form-field-width-97{width:97%}.dynamic-form-row .form-field-width-98{width:98%}.dynamic-form-row .form-field-width-99{width:99%}.dynamic-form-row .form-field-width-100{width:100%}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DynamicFormFieldComponent, selector: "dynamic-form-field", inputs: ["model", "group"], outputs: ["change"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgFor, NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"group\"\n  class=\"dynamic-form\">\n  <div *ngFor=\"let row of formConfig\"\n    class=\"dynamic-form-row\">\n    <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n      class=\"dynamic-form-field\"\n      [id]=\"field.id\"\n      [hidden]=\"field.hidden\"\n      [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n      [group]=\"group\"\n      [model]=\"field\">\n    </dynamic-form-field>\n  </div>\n</form>", styles: [".dynamic-form{width:100%}.dynamic-form .dynamic-form-row{width:100%;display:flex}.dynamic-form .dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.dynamic-form .dynamic-form-row .dynamic-form-field:not(:last-of-type){margin-right:12px}.dynamic-form .dynamic-form-row .dynamic-form-field.button{flex:0}.dynamic-form .dynamic-form-row .form-field-width-1{width:1%}.dynamic-form .dynamic-form-row .form-field-width-2{width:2%}.dynamic-form .dynamic-form-row .form-field-width-3{width:3%}.dynamic-form .dynamic-form-row .form-field-width-4{width:4%}.dynamic-form .dynamic-form-row .form-field-width-5{width:5%}.dynamic-form .dynamic-form-row .form-field-width-6{width:6%}.dynamic-form .dynamic-form-row .form-field-width-7{width:7%}.dynamic-form .dynamic-form-row .form-field-width-8{width:8%}.dynamic-form .dynamic-form-row .form-field-width-9{width:9%}.dynamic-form .dynamic-form-row .form-field-width-10{width:10%}.dynamic-form .dynamic-form-row .form-field-width-11{width:11%}.dynamic-form .dynamic-form-row .form-field-width-12{width:12%}.dynamic-form .dynamic-form-row .form-field-width-13{width:13%}.dynamic-form .dynamic-form-row .form-field-width-14{width:14%}.dynamic-form .dynamic-form-row .form-field-width-15{width:15%}.dynamic-form .dynamic-form-row .form-field-width-16{width:16%}.dynamic-form .dynamic-form-row .form-field-width-17{width:17%}.dynamic-form .dynamic-form-row .form-field-width-18{width:18%}.dynamic-form .dynamic-form-row .form-field-width-19{width:19%}.dynamic-form .dynamic-form-row .form-field-width-20{width:20%}.dynamic-form .dynamic-form-row .form-field-width-21{width:21%}.dynamic-form .dynamic-form-row .form-field-width-22{width:22%}.dynamic-form .dynamic-form-row .form-field-width-23{width:23%}.dynamic-form .dynamic-form-row .form-field-width-24{width:24%}.dynamic-form .dynamic-form-row .form-field-width-25{width:25%}.dynamic-form .dynamic-form-row .form-field-width-26{width:26%}.dynamic-form .dynamic-form-row .form-field-width-27{width:27%}.dynamic-form .dynamic-form-row .form-field-width-28{width:28%}.dynamic-form .dynamic-form-row .form-field-width-29{width:29%}.dynamic-form .dynamic-form-row .form-field-width-30{width:30%}.dynamic-form .dynamic-form-row .form-field-width-31{width:31%}.dynamic-form .dynamic-form-row .form-field-width-32{width:32%}.dynamic-form .dynamic-form-row .form-field-width-33{width:33%}.dynamic-form .dynamic-form-row .form-field-width-34{width:34%}.dynamic-form .dynamic-form-row .form-field-width-35{width:35%}.dynamic-form .dynamic-form-row .form-field-width-36{width:36%}.dynamic-form .dynamic-form-row .form-field-width-37{width:37%}.dynamic-form .dynamic-form-row .form-field-width-38{width:38%}.dynamic-form .dynamic-form-row .form-field-width-39{width:39%}.dynamic-form .dynamic-form-row .form-field-width-40{width:40%}.dynamic-form .dynamic-form-row .form-field-width-41{width:41%}.dynamic-form .dynamic-form-row .form-field-width-42{width:42%}.dynamic-form .dynamic-form-row .form-field-width-43{width:43%}.dynamic-form .dynamic-form-row .form-field-width-44{width:44%}.dynamic-form .dynamic-form-row .form-field-width-45{width:45%}.dynamic-form .dynamic-form-row .form-field-width-46{width:46%}.dynamic-form .dynamic-form-row .form-field-width-47{width:47%}.dynamic-form .dynamic-form-row .form-field-width-48{width:48%}.dynamic-form .dynamic-form-row .form-field-width-49{width:49%}.dynamic-form .dynamic-form-row .form-field-width-50{width:50%}.dynamic-form .dynamic-form-row .form-field-width-51{width:51%}.dynamic-form .dynamic-form-row .form-field-width-52{width:52%}.dynamic-form .dynamic-form-row .form-field-width-53{width:53%}.dynamic-form .dynamic-form-row .form-field-width-54{width:54%}.dynamic-form .dynamic-form-row .form-field-width-55{width:55%}.dynamic-form .dynamic-form-row .form-field-width-56{width:56%}.dynamic-form .dynamic-form-row .form-field-width-57{width:57%}.dynamic-form .dynamic-form-row .form-field-width-58{width:58%}.dynamic-form .dynamic-form-row .form-field-width-59{width:59%}.dynamic-form .dynamic-form-row .form-field-width-60{width:60%}.dynamic-form .dynamic-form-row .form-field-width-61{width:61%}.dynamic-form .dynamic-form-row .form-field-width-62{width:62%}.dynamic-form .dynamic-form-row .form-field-width-63{width:63%}.dynamic-form .dynamic-form-row .form-field-width-64{width:64%}.dynamic-form .dynamic-form-row .form-field-width-65{width:65%}.dynamic-form .dynamic-form-row .form-field-width-66{width:66%}.dynamic-form .dynamic-form-row .form-field-width-67{width:67%}.dynamic-form .dynamic-form-row .form-field-width-68{width:68%}.dynamic-form .dynamic-form-row .form-field-width-69{width:69%}.dynamic-form .dynamic-form-row .form-field-width-70{width:70%}.dynamic-form .dynamic-form-row .form-field-width-71{width:71%}.dynamic-form .dynamic-form-row .form-field-width-72{width:72%}.dynamic-form .dynamic-form-row .form-field-width-73{width:73%}.dynamic-form .dynamic-form-row .form-field-width-74{width:74%}.dynamic-form .dynamic-form-row .form-field-width-75{width:75%}.dynamic-form .dynamic-form-row .form-field-width-76{width:76%}.dynamic-form .dynamic-form-row .form-field-width-77{width:77%}.dynamic-form .dynamic-form-row .form-field-width-78{width:78%}.dynamic-form .dynamic-form-row .form-field-width-79{width:79%}.dynamic-form .dynamic-form-row .form-field-width-80{width:80%}.dynamic-form .dynamic-form-row .form-field-width-81{width:81%}.dynamic-form .dynamic-form-row .form-field-width-82{width:82%}.dynamic-form .dynamic-form-row .form-field-width-83{width:83%}.dynamic-form .dynamic-form-row .form-field-width-84{width:84%}.dynamic-form .dynamic-form-row .form-field-width-85{width:85%}.dynamic-form .dynamic-form-row .form-field-width-86{width:86%}.dynamic-form .dynamic-form-row .form-field-width-87{width:87%}.dynamic-form .dynamic-form-row .form-field-width-88{width:88%}.dynamic-form .dynamic-form-row .form-field-width-89{width:89%}.dynamic-form .dynamic-form-row .form-field-width-90{width:90%}.dynamic-form .dynamic-form-row .form-field-width-91{width:91%}.dynamic-form .dynamic-form-row .form-field-width-92{width:92%}.dynamic-form .dynamic-form-row .form-field-width-93{width:93%}.dynamic-form .dynamic-form-row .form-field-width-94{width:94%}.dynamic-form .dynamic-form-row .form-field-width-95{width:95%}.dynamic-form .dynamic-form-row .form-field-width-96{width:96%}.dynamic-form .dynamic-form-row .form-field-width-97{width:97%}.dynamic-form .dynamic-form-row .form-field-width-98{width:98%}.dynamic-form .dynamic-form-row .form-field-width-99{width:99%}.dynamic-form .dynamic-form-row .form-field-width-100{width:100%}\n"] }]
-        }], propDecorators: { formConfig: [{
+            args: [{ standalone: true, imports: [NgFor, NgClass, DynamicFormFieldComponent, ReactiveFormsModule], selector: 'dynamic-form', providers: [DynamicFormService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngFor=\"let row of formConfig\"\n  class=\"dynamic-form-row\">\n  <dynamic-form-field *ngFor=\"let field of row; trackBy: trackByFn\"\n    class=\"dynamic-form-field\"\n    [id]=\"field.id\"\n    [hidden]=\"field.hidden\"\n    [ngClass]=\"[field.type, 'form-field-width-'+field.width]\"\n    [group]=\"group\"\n    [model]=\"field\"\n    (change)=\"onChange($event)\">\n  </dynamic-form-field>\n</div>", styles: [".dynamic-form-row{display:flex}.dynamic-form-row .dynamic-form-field{width:100%;margin:4px 0}.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-1{width:1%}.dynamic-form-row .form-field-width-2{width:2%}.dynamic-form-row .form-field-width-3{width:3%}.dynamic-form-row .form-field-width-4{width:4%}.dynamic-form-row .form-field-width-5{width:5%}.dynamic-form-row .form-field-width-6{width:6%}.dynamic-form-row .form-field-width-7{width:7%}.dynamic-form-row .form-field-width-8{width:8%}.dynamic-form-row .form-field-width-9{width:9%}.dynamic-form-row .form-field-width-10{width:10%}.dynamic-form-row .form-field-width-11{width:11%}.dynamic-form-row .form-field-width-12{width:12%}.dynamic-form-row .form-field-width-13{width:13%}.dynamic-form-row .form-field-width-14{width:14%}.dynamic-form-row .form-field-width-15{width:15%}.dynamic-form-row .form-field-width-16{width:16%}.dynamic-form-row .form-field-width-17{width:17%}.dynamic-form-row .form-field-width-18{width:18%}.dynamic-form-row .form-field-width-19{width:19%}.dynamic-form-row .form-field-width-20{width:20%}.dynamic-form-row .form-field-width-21{width:21%}.dynamic-form-row .form-field-width-22{width:22%}.dynamic-form-row .form-field-width-23{width:23%}.dynamic-form-row .form-field-width-24{width:24%}.dynamic-form-row .form-field-width-25{width:25%}.dynamic-form-row .form-field-width-26{width:26%}.dynamic-form-row .form-field-width-27{width:27%}.dynamic-form-row .form-field-width-28{width:28%}.dynamic-form-row .form-field-width-29{width:29%}.dynamic-form-row .form-field-width-30{width:30%}.dynamic-form-row .form-field-width-31{width:31%}.dynamic-form-row .form-field-width-32{width:32%}.dynamic-form-row .form-field-width-33{width:33%}.dynamic-form-row .form-field-width-34{width:34%}.dynamic-form-row .form-field-width-35{width:35%}.dynamic-form-row .form-field-width-36{width:36%}.dynamic-form-row .form-field-width-37{width:37%}.dynamic-form-row .form-field-width-38{width:38%}.dynamic-form-row .form-field-width-39{width:39%}.dynamic-form-row .form-field-width-40{width:40%}.dynamic-form-row .form-field-width-41{width:41%}.dynamic-form-row .form-field-width-42{width:42%}.dynamic-form-row .form-field-width-43{width:43%}.dynamic-form-row .form-field-width-44{width:44%}.dynamic-form-row .form-field-width-45{width:45%}.dynamic-form-row .form-field-width-46{width:46%}.dynamic-form-row .form-field-width-47{width:47%}.dynamic-form-row .form-field-width-48{width:48%}.dynamic-form-row .form-field-width-49{width:49%}.dynamic-form-row .form-field-width-50{width:50%}.dynamic-form-row .form-field-width-51{width:51%}.dynamic-form-row .form-field-width-52{width:52%}.dynamic-form-row .form-field-width-53{width:53%}.dynamic-form-row .form-field-width-54{width:54%}.dynamic-form-row .form-field-width-55{width:55%}.dynamic-form-row .form-field-width-56{width:56%}.dynamic-form-row .form-field-width-57{width:57%}.dynamic-form-row .form-field-width-58{width:58%}.dynamic-form-row .form-field-width-59{width:59%}.dynamic-form-row .form-field-width-60{width:60%}.dynamic-form-row .form-field-width-61{width:61%}.dynamic-form-row .form-field-width-62{width:62%}.dynamic-form-row .form-field-width-63{width:63%}.dynamic-form-row .form-field-width-64{width:64%}.dynamic-form-row .form-field-width-65{width:65%}.dynamic-form-row .form-field-width-66{width:66%}.dynamic-form-row .form-field-width-67{width:67%}.dynamic-form-row .form-field-width-68{width:68%}.dynamic-form-row .form-field-width-69{width:69%}.dynamic-form-row .form-field-width-70{width:70%}.dynamic-form-row .form-field-width-71{width:71%}.dynamic-form-row .form-field-width-72{width:72%}.dynamic-form-row .form-field-width-73{width:73%}.dynamic-form-row .form-field-width-74{width:74%}.dynamic-form-row .form-field-width-75{width:75%}.dynamic-form-row .form-field-width-76{width:76%}.dynamic-form-row .form-field-width-77{width:77%}.dynamic-form-row .form-field-width-78{width:78%}.dynamic-form-row .form-field-width-79{width:79%}.dynamic-form-row .form-field-width-80{width:80%}.dynamic-form-row .form-field-width-81{width:81%}.dynamic-form-row .form-field-width-82{width:82%}.dynamic-form-row .form-field-width-83{width:83%}.dynamic-form-row .form-field-width-84{width:84%}.dynamic-form-row .form-field-width-85{width:85%}.dynamic-form-row .form-field-width-86{width:86%}.dynamic-form-row .form-field-width-87{width:87%}.dynamic-form-row .form-field-width-88{width:88%}.dynamic-form-row .form-field-width-89{width:89%}.dynamic-form-row .form-field-width-90{width:90%}.dynamic-form-row .form-field-width-91{width:91%}.dynamic-form-row .form-field-width-92{width:92%}.dynamic-form-row .form-field-width-93{width:93%}.dynamic-form-row .form-field-width-94{width:94%}.dynamic-form-row .form-field-width-95{width:95%}.dynamic-form-row .form-field-width-96{width:96%}.dynamic-form-row .form-field-width-97{width:97%}.dynamic-form-row .form-field-width-98{width:98%}.dynamic-form-row .form-field-width-99{width:99%}.dynamic-form-row .form-field-width-100{width:100%}\n"] }]
+        }], propDecorators: { group: [{
                 type: Input,
                 args: [{ required: true }]
-            }], ready: [{
+            }], formConfig: [{
+                type: Input,
+                args: [{ required: true }]
+            }], change: [{
                 type: Output
             }] } });
 
@@ -869,5 +909,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicCheckbox, DynamicFormComponent, DynamicFormFieldBaseComponent, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicReadonly, DynamicSelect, DynamicTextarea, RELATION_ACTIONS, RelationActionType, RelationOperator };
+export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
 //# sourceMappingURL=olafvv-ngx-dynamic-form.mjs.map