@olafvv/ngx-dynamic-form 0.3.0 → 0.5.0

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

@@ -1,24 +1,28 @@
-import { NgIf, NgClass, AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgIf, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, signal, ViewChild, inject, Injector, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, signal, ViewChild, inject, Injector, ChangeDetectorRef, 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-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i1$3 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 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 i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
 import * as i5 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/material/input';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import * as i2$1 from '@angular/material/radio';
+import * as i6 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2$2 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4 from '@angular/material/core';
+import * as i4$1 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -85,11 +89,11 @@ class DynamicFormService {
         const group = this.fb.group({});
         config.forEach((row) => {
             row.forEach((controlConfig) => {
-                const controlValueConfig = controlConfig;
                 const controlOptions = {
                     updateOn: controlConfig.updateOn,
                     validators: this.validatorsService.getValidatorFns(controlConfig.validators)
                 };
+                const controlValueConfig = controlConfig;
                 const control = new UntypedFormControl({ value: controlValueConfig.value ?? controlValueConfig.defaultValue, disabled: controlValueConfig.disabled }, controlOptions);
                 group.addControl(controlConfig.name, control);
             });
@@ -135,6 +139,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     type: Optional
                 }] }, { type: i1.FormBuilder }, { type: DynamicFormValidationsService }] });
 
+/**
+ * Base class for the DynamicFormField component classes
+ */
 class DynamicFormFieldBase {
     get id() {
         return this.model.id ?? this.model.name;
@@ -169,11 +176,11 @@ class DynamicButtonTogglesComponent extends DynamicFormFieldBase {
         this.change = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "dynamic-button-toggles", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <label *ngIf=\"model.label\"\n    [ngClass]=\"model.fieldLabelPosition\">{{model.label}}</label>\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicButtonTogglesComponent, isStandalone: true, selector: "dynamic-button-toggles", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonTogglesComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, NgClass, MatButtonToggleModule, ReactiveFormsModule, AsyncPipe, MatFormFieldModule], selector: 'dynamic-button-toggles', template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <label *ngIf=\"model.label\"\n    [ngClass]=\"model.fieldLabelPosition\">{{model.label}}</label>\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"] }]
+            args: [{ standalone: true, imports: [NgIf, NgClass, MatButtonToggleModule, ReactiveFormsModule, AsyncPipe, MatFormFieldModule], selector: 'dynamic-button-toggles', template: "<div class=\"dynamic-button-toggles-wrapper\"\n  [formGroup]=\"group\">\n  <mat-button-toggle-group [id]=\"id\"\n    [formControlName]=\"model.name\"\n    [multiple]=\"model.multiple\"\n    [vertical]=\"model.vertical\"\n    (change)=\"onChange($event)\">\n\n    @for(option of model.options$ | async; track option.value) {\n    <mat-button-toggle [value]=\"option.value\">{{option.label}}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</div>", styles: [".dynamic-button-toggles-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}.dynamic-button-toggles-wrapper label{font-size:var(--mdc-typography-body2-font-size, 14px)}.dynamic-button-toggles-wrapper label.above{display:block;margin-bottom:8px}.dynamic-button-toggles-wrapper label.before{display:inline-block;margin-right:8px}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], group: [{
@@ -182,6 +189,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Base class for all DynamicFormFields
+ */
 class DynamicFormFieldModel {
     constructor(config) {
         this.id = config.id ?? config.name;
@@ -211,25 +221,25 @@ class DynamicFormFieldModel {
     }
 }
 
+/**
+ * Base class for a DynamicFormField with a value
+ */
 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;
+        this.defaultValue = config.defaultValue ?? null;
+        const val = config.value ?? null;
+        this._value$ = new BehaviorSubject(val);
+        this._valueChanged = config.valueChanged;
     }
     get value() {
         return this._value$.getValue();
     }
     set value(val) {
         this._value$.next(val);
+        if (this._valueChanged) {
+            this._valueChanged(val);
+        }
     }
 }
 
@@ -286,8 +296,6 @@ class DynamicButtonToggles extends DynamicFormFieldOptionModel {
         this.type = DYNAMIC_FORM_FIELD_BUTTON_TOGGLES;
         this.multiple = config.multiple ?? false;
         this.vertical = config.vertical ?? false;
-        this.showLabel = config.showLabel ?? false;
-        this.fieldLabelPosition = config.fieldLabelPosition ?? 'above';
     }
 }
 
@@ -296,11 +304,11 @@ class DynamicButtonComponent extends DynamicFormFieldBase {
         this.model.onClick();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<button mat-button\n  [id]=\"id\"\n  (click)=\"onClick()\">\n  <span>{{model.label}}</span>\n</button>", dependencies: [{ 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]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicButtonComponent, isStandalone: true, selector: "dynamic-button", inputs: { model: "model", group: "group" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-button-wrapper\">\n  <button mat-button\n    [id]=\"id\"\n    [disabled]=\"model.disabled\"\n    (click)=\"onClick()\">\n    <span>{{model.label}}</span>\n  </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [NgIf, MatButtonModule], selector: 'dynamic-button', template: "<button mat-button\n  [id]=\"id\"\n  (click)=\"onClick()\">\n  <span>{{model.label}}</span>\n</button>" }]
+            args: [{ standalone: true, imports: [MatButtonModule], selector: 'dynamic-button', template: "<div class=\"dynamic-button-wrapper\">\n  <button mat-button\n    [id]=\"id\"\n    [disabled]=\"model.disabled\"\n    (click)=\"onClick()\">\n    <span>{{model.label}}</span>\n  </button>\n</div>", styles: [".dynamic-button-wrapper{height:var(--mat-form-field-container-height, 56px);display:flex;align-items:center}\n"] }]
         }], propDecorators: { model: [{
                 type: Input
             }], group: [{
@@ -356,6 +364,37 @@ class DynamicCheckbox extends DynamicFormFieldValueModel {
     }
 }
 
+class DynamicDatepickerComponent extends DynamicFormFieldBase {
+    constructor() {
+        super(...arguments);
+        this.change = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DynamicDatepickerComponent, isStandalone: true, selector: "dynamic-datepicker", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"model.id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <input matInput\n    [min]=\"model.min\"\n    [max]=\"model.max\"\n    [matDatepicker]=\"picker\">\n\n  <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n  <mat-datepicker-toggle matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker\n    [startAt]=\"model.startAt\"\n    [startView]=\"model.startView\"></mat-datepicker>\n\n  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatDatepickerModule], selector: 'dynamic-datepicker', template: "<mat-form-field [formGroup]=\"group\"\n  [id]=\"model.id\"\n  color=\"primary\">\n  <mat-label *ngIf=\"model.label\">{{model.label}}</mat-label>\n\n  <input matInput\n    [min]=\"model.min\"\n    [max]=\"model.max\"\n    [matDatepicker]=\"picker\">\n\n  <mat-hint *ngIf=\"model.hint\">{{model.hint}}</mat-hint>\n\n  <mat-datepicker-toggle matIconSuffix\n    [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker\n    [startAt]=\"model.startAt\"\n    [startView]=\"model.startView\"></mat-datepicker>\n\n  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+        }], propDecorators: { model: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }] } });
+
+const DYNAMIC_FORM_FIELD_DATEPICKER = 'datepicker';
+class DynamicDatepicker extends DynamicFormFieldValueModel {
+    constructor(config) {
+        super(config);
+        this.type = DYNAMIC_FORM_FIELD_DATEPICKER;
+        this.max = config.max ?? null;
+        this.min = config.min ?? null;
+        this.startAt = config.startAt ?? null;
+        this.startView = config.startView ?? 'month';
+    }
+}
+
 class DynamicInputComponent extends DynamicFormFieldBase {
     constructor() {
         super(...arguments);
@@ -368,7 +407,7 @@ class DynamicInputComponent extends DynamicFormFieldBase {
         return `${this.valueCount} / ${this.model.maxLength}`;
     }
     get showClear() {
-        return !!this.control.value && !this.control.disabled;
+        return !!this.control.value && !this.control.disabled && !this.model.showLoader;
     }
     onChange(event) {
         // Ignore the native HTML 5 change event
@@ -378,11 +417,11 @@ class DynamicInputComponent extends DynamicFormFieldBase {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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    [placeholder]=\"model.placeholder\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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]", 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: "17.0.0", version: "18.2.13", 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    [placeholder]=\"model.placeholder\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <div matSuffix\n    *ngIf=\"model.showLoader()\"\n    class=\"loaderIcon\">\n    <mat-spinner diameter=\"16\"\n      color=\"primary\"></mat-spinner>\n  </div>\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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-form-field .loaderIcon{padding:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dynamic-input', standalone: true, imports: [NgIf, 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    [placeholder]=\"model.placeholder\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ standalone: true, imports: [NgIf, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], selector: 'dynamic-input', 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    [placeholder]=\"model.placeholder\"\n    [attr.min]=\"model.min\"\n    [attr.max]=\"model.max\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [pattern]=\"model.pattern\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\" />\n\n  <button matSuffix\n    mat-icon-button\n    *ngIf=\"showClear\"\n    (click)=\"resetControl()\">\n    <mat-icon fontIcon=\"clear\"></mat-icon>\n  </button>\n\n  <div matSuffix\n    *ngIf=\"model.showLoader()\"\n    class=\"loaderIcon\">\n    <mat-spinner diameter=\"16\"\n      color=\"primary\"></mat-spinner>\n  </div>\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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}mat-form-field .loaderIcon{padding:8px}\n"] }]
         }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [MatInput, { static: true }]
@@ -410,6 +449,7 @@ class DynamicInput extends DynamicFormFieldValueModel {
         this.autocomplete = config.autocomplete ?? 'off';
         this.prefix = config.prefix ?? null;
         this.hideClearIcon = config.hideClearIcon ?? false;
+        this.showLoader = config.showLoader ?? signal(false);
     }
 }
 
@@ -419,7 +459,7 @@ class DymamicRadioGroupComponent extends DynamicFormFieldBase {
         this.change = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group\">\n  <label *ngIf=\"model.label\">{{model.label}}</label>\n  <mat-radio-group [formControlName]=\"model.name\"\n    class=\"radio-group\"\n    [ngClass]=\"{'inline': model.inline}\"\n    (change)=\"onChange($event)\">\n    @for(option of model.options$ | async; track option.value) {\n    <mat-radio-button [value]=\"option.value\"\n      [labelPosition]=\"model.labelPosition\">\n      {{option.label}}\n    </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mdc-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DymamicRadioGroupComponent, isStandalone: true, selector: "dynamic-radio-group", inputs: { model: "model", group: "group" }, outputs: { change: "change" }, usesInheritance: true, ngImport: i0, template: "<div class=\"dynamic-radio-group-wrapper\"\n  [formGroup]=\"group\">\n  <label *ngIf=\"model.label\">{{model.label}}</label>\n  <mat-radio-group [formControlName]=\"model.name\"\n    class=\"radio-group\"\n    [ngClass]=\"{'inline': model.inline}\"\n    (change)=\"onChange($event)\">\n    @for(option of model.options$ | async; track option.value) {\n    <mat-radio-button [value]=\"option.value\"\n      [labelPosition]=\"model.labelPosition\">\n      {{option.label}}\n    </mat-radio-button>\n    }\n  </mat-radio-group>\n</div>", styles: [".dynamic-radio-group-wrapper label{display:block;font-size:var(--mdc-typography-body2-font-size, 14px);margin-bottom:8px}.dynamic-radio-group-wrapper .radio-group:not(.inline){display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DymamicRadioGroupComponent, decorators: [{
             type: Component,
@@ -469,7 +509,7 @@ class DynamicSelectComponent extends DynamicFormFieldBase {
         this.change = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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        @for(option of options; track option.value) {\n        <mat-option [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n        }\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for(option of options; track option.value) {\n        <option [value]=\"option.value\">\n          {{option.label}}\n        </option>\n        }\n      </select>\n    </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        @for(group of groupedOptions; track group.name) {\n        <mat-optgroup [label]=\"group.name\">\n          @for(option of group.options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n          }\n        </mat-optgroup>\n        }\n\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for(group of groupedOptions; track group.name) {=\n        <optgroup [label]=\"group.name\">\n          @for(option of group.options; track option.value) {\n          <option [value]=\"option.value\">\n            {{option.label}}\n          </option>\n          }\n        </optgroup>\n        }\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\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: "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: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "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: "17.0.0", version: "18.2.13", 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        @for(option of options; track option.value) {\n        <mat-option [value]=\"option.value\">\n          {{option.label}}\n        </mat-option>\n        }\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelect>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for(option of options; track option.value) {\n        <option [value]=\"option.value\">\n          {{option.label}}\n        </option>\n        }\n      </select>\n    </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        @for(group of groupedOptions; track group.name) {\n        <mat-optgroup [label]=\"group.name\">\n          @for(option of group.options; track option.value) {\n          <mat-option [value]=\"option.value\">\n            {{option.label}}\n          </mat-option>\n          }\n        </mat-optgroup>\n        }\n\n      </mat-select>\n    </ng-container>\n\n    <ng-template #nativeSelectGrouped>\n      <select matNativeControl\n        (selectionchange)=\"onChange($event)\">\n        @for(group of groupedOptions; track group.name) {=\n        <optgroup [label]=\"group.name\">\n          @for(option of group.options; track option.value) {\n          <option [value]=\"option.value\">\n            {{option.label}}\n          </option>\n          }\n        </optgroup>\n        }\n      </select>\n    </ng-template>\n  </ng-container>\n\n  <mat-hint *ngIf=\"model.hint\"\n    align=\"start\">{{model.hint}}</mat-hint>\n\n  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "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: "18.2.13", ngImport: i0, type: DynamicSelectComponent, decorators: [{
             type: Component,
@@ -511,7 +551,7 @@ class DynamicTextareaComponent extends DynamicFormFieldBase {
         this.change.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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    [placeholder]=\"model.placeholder\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  <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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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    [placeholder]=\"model.placeholder\"\n    [attr.minLength]=\"model.minLength\"\n    [attr.maxLength]=\"model.maxLength\"\n    [rows]=\"model.rows\"\n    [autocomplete]=\"model.autocomplete\"\n    (change)=\"onChange($event)\">\n  </textarea>\n\n  <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  @for(validator of model.validators; track validator.name) {\n  <ng-container ngProjectAs=\"mat-error\">\n    <mat-error *ngIf=\"hasError(validator.name)\">{{validator.message}}</mat-error>\n  </ng-container>\n  }\n</mat-form-field>", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], 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: "18.2.13", ngImport: i0, type: DynamicTextareaComponent, decorators: [{
             type: Component,
@@ -768,6 +808,7 @@ class DynamicFormFieldComponent {
         this.change = new EventEmitter();
         this.dynamicFormService = inject(DynamicFormService);
         this.relationService = inject(DynamicFormRelationsService);
+        this.cdRef = inject(ChangeDetectorRef);
         this._subs = new Subscription();
     }
     /** Get the instance of a control component using the injected custom method or local method */
@@ -790,22 +831,24 @@ class DynamicFormFieldComponent {
      */
     getControlComponentType() {
         switch (this.model.type) {
+            case DYNAMIC_FORM_FIELD_BUTTON:
+                return DynamicButtonComponent;
+            case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
+                return DynamicButtonTogglesComponent;
             case DYNAMIC_FORM_FIELD_CHECKBOX:
                 return DynamicCheckboxComponent;
+            case DYNAMIC_FORM_FIELD_DATEPICKER:
+                return DynamicDatepickerComponent;
             case DYNAMIC_FORM_FIELD_INPUT:
                 return DynamicInputComponent;
-            case DYNAMIC_FORM_FIELD_TEXTAREA:
-                return DynamicTextareaComponent;
+            case DYNAMIC_FORM_FIELD_RADIO_GROUP:
+                return DymamicRadioGroupComponent;
             case DYNAMIC_FORM_FIELD_READONLY:
                 return DynamicReadonlyComponent;
             case DYNAMIC_FORM_FIELD_SELECT:
                 return DynamicSelectComponent;
-            case DYNAMIC_FORM_FIELD_BUTTON:
-                return DynamicButtonComponent;
-            case DYNAMIC_FORM_FIELD_BUTTON_TOGGLES:
-                return DynamicButtonTogglesComponent;
-            case DYNAMIC_FORM_FIELD_RADIO_GROUP:
-                return DymamicRadioGroupComponent;
+            case DYNAMIC_FORM_FIELD_TEXTAREA:
+                return DynamicTextareaComponent;
             default:
                 console.warn(`Model of type 'dynamic-${this.model.type}' is not implemented yet. Add this type to dynamic-form-field.component.ts to add support`);
                 return null;
@@ -861,6 +904,7 @@ class DynamicFormFieldComponent {
      */
     onDisabledChange(disabled) {
         disabled ? this._control.disable() : this._control.enable();
+        this.cdRef.markForCheck();
     }
     onChange(ev) {
         this.change.emit(this.createDynamicFormEvent(ev, 'change'));
@@ -943,5 +987,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
+export { DYNAMIC_FORM_FIELD_BUTTON, DYNAMIC_FORM_FIELD_BUTTON_TOGGLES, DYNAMIC_FORM_FIELD_CHECKBOX, DYNAMIC_FORM_FIELD_DATEPICKER, DYNAMIC_FORM_FIELD_INPUT, DYNAMIC_FORM_FIELD_MAP_FN, DYNAMIC_FORM_FIELD_RADIO_GROUP, DYNAMIC_FORM_FIELD_READONLY, DYNAMIC_FORM_FIELD_SELECT, DYNAMIC_FORM_FIELD_TEXTAREA, DynamicButton, DynamicButtonToggles, DynamicCheckbox, DynamicDatepicker, DynamicFormComponent, DynamicFormFieldBase, DynamicFormFieldModel, DynamicFormFieldOptionModel, DynamicFormFieldValueModel, DynamicFormService, DynamicFormValidators, DynamicInput, DynamicRadioGroup, DynamicReadonly, DynamicSelect, DynamicTextarea, RelationActionType, RelationOperator };
 //# sourceMappingURL=olafvv-ngx-dynamic-form.mjs.map