@ng-modular-forms/core 0.8.1 → 0.9.0

package/fesm2022/ng-modular-forms-core.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/forms';
-import { NgControl, Validators, TouchedChangeEvent, ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { NgControl, Validators, TouchedChangeEvent, ReactiveFormsModule, FormArray, FormGroup, FormControl } from '@angular/forms';
 import * as i0 from '@angular/core';
-import { viewChild, input, computed, booleanAttribute, signal, inject, ChangeDetectorRef, DestroyRef, ElementRef, Directive, ChangeDetectionStrategy, Component, effect, Injectable } from '@angular/core';
+import { viewChild, input, computed, booleanAttribute, signal, inject, ChangeDetectorRef, DestroyRef, ElementRef, Directive, ChangeDetectionStrategy, Component, effect, contentChild, Injectable } from '@angular/core';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { merge, startWith, Subject, take, catchError, EMPTY, map, debounceTime, distinctUntilChanged, filter, tap, switchMap, of, Subscription } from 'rxjs';
 import * as i1 from '@angular/common';
@@ -253,8 +253,28 @@ class FormMapperBase {
     }
 }
 
-class CurrencyBehavior {
-    blockNonDigitKey(event) {
+class NumberBehavior {
+    sanitize(value, allowNegative) {
+        if (!value)
+            return '';
+        let cleaned = value.replace(/[^0-9.-]/g, '');
+        const isJustMinus = cleaned === '-';
+        if (isJustMinus && allowNegative)
+            return '-';
+        const parts = cleaned.split('.');
+        if (parts.length > 2) {
+            cleaned = parts[0] + '.' + parts.slice(1).join('');
+        }
+        const hasMinus = cleaned.includes('-');
+        if (hasMinus) {
+            cleaned = cleaned.replace(/-/g, '');
+            if (allowNegative) {
+                cleaned = '-' + cleaned;
+            }
+        }
+        return cleaned;
+    }
+    blockNonDigitKey(event, allowNegative = true) {
         const input = event.target;
         const value = input.value;
         if (event.ctrlKey || event.metaKey) {
@@ -289,8 +309,15 @@ class CurrencyBehavior {
             return;
         }
         if (event.key === '-') {
+            if (!allowNegative) {
+                event.preventDefault();
+                return;
+            }
             const hasMinus = value.includes('-');
-            const isAtStart = input.selectionStart === 0;
+            const el = event.target ??
+                event.currentTarget;
+            const pos = el?.selectionStart != null ? el.selectionStart : value.length;
+            const isAtStart = pos === 0;
             if (hasMinus || !isAtStart) {
                 event.preventDefault();
             }
@@ -419,7 +446,7 @@ class LookupBehavior {
     }
 }
 
-class TextBehavior {
+class PasswordBehavior {
     _showPassword = signal(false);
     showPassword = this._showPassword.asReadonly();
     toggleShowPassword(event) {
@@ -430,14 +457,14 @@ class TextBehavior {
 
 class FormFieldComponent {
     label = input();
-    isRequired = input();
     loading = input();
     hint = input();
+    isRequired = input();
     errorMessage = input();
-    hasErrors = computed(() => this.errorMessage() != null);
+    hasErrors = computed(() => !!this.errorMessage());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: FormFieldComponent, isStandalone: true, selector: "nmf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="nmf-field-wrapper" [class.loading]="loading()">
       @if (label()) {
         <label class="nmf-label">
           {{ label() }}
@@ -475,7 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                     imports: [CommonModule, ReactiveFormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
+    <div class="nmf-field-wrapper" [class.loading]="loading()">
       @if (label()) {
         <label class="nmf-label">
           {{ label() }}
@@ -507,129 +534,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
-class InputCurrencyComponent extends FormControlBase {
-    displayValue = signal(null);
-    behavior = new CurrencyBehavior();
-    writeValue(value) {
-        super.writeValue(value);
-        this.displayValue.set(value != null ? formatNumber(value) : null);
-    }
-    handleKeyDown(event) {
-        this.behavior.blockNonDigitKey(event);
-    }
-    onInput(event) {
-        if (this._disabledByInput())
-            return;
-        const rawValue = event.target.value ?? null;
-        const value = parseNumber(rawValue);
-        this.displayValue.set(value != null ? formatNumber(value) : null);
-        this.onChange(value);
-    }
-    textColor = computed(() => {
-        const value = this.displayValue();
-        if (this._disabledByInput() || !value) {
-            return 'inherit';
-        }
-        const parsedValue = parseNumber(value);
-        const valid = parsedValue != null && parsedValue >= 0;
-        return valid ? 'inherit' : '#dc6262';
-    });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
-    <nmf-form-field
-      [label]="label()"
-      [isRequired]="isRequired()"
-      [loading]="loading()"
-      [errorMessage]="errorMessage()"
-    >
-      <div class="nmf-input-wrapper nmf-input-prefix">
-        @if (displayValue() != null) {
-          <span
-            class="nmf-prefix"
-            [class.error]="hasErrors()"
-            [class.nmf-prefix-disabled]="disabled()"
-            [style.color]="textColor()"
-          >
-            $
-          </span>
-        }
-
-        <input
-          #focusable
-          type="text"
-          class="nmf-input"
-          [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
-          [class.nmf-input-with-prefix]="displayValue() != null"
-          [style.color]="textColor()"
-          [id]="id()"
-          [name]="name()"
-          [value]="displayValue()"
-          [disabled]="disabled()"
-          [required]="isRequired()"
-          [placeholder]="placeholder()"
-          [autocomplete]="autocompleteAttr()"
-          (blur)="onTouched()"
-          (input)="onInput($event)"
-          (keydown)="handleKeyDown($event)"
-        />
-      </div>
-    </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputCurrencyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nmf-currency',
-                    standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <nmf-form-field
-      [label]="label()"
-      [isRequired]="isRequired()"
-      [loading]="loading()"
-      [errorMessage]="errorMessage()"
-    >
-      <div class="nmf-input-wrapper nmf-input-prefix">
-        @if (displayValue() != null) {
-          <span
-            class="nmf-prefix"
-            [class.error]="hasErrors()"
-            [class.nmf-prefix-disabled]="disabled()"
-            [style.color]="textColor()"
-          >
-            $
-          </span>
-        }
-
-        <input
-          #focusable
-          type="text"
-          class="nmf-input"
-          [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
-          [class.nmf-input-with-prefix]="displayValue() != null"
-          [style.color]="textColor()"
-          [id]="id()"
-          [name]="name()"
-          [value]="displayValue()"
-          [disabled]="disabled()"
-          [required]="isRequired()"
-          [placeholder]="placeholder()"
-          [autocomplete]="autocompleteAttr()"
-          (blur)="onTouched()"
-          (input)="onInput($event)"
-          (keydown)="handleKeyDown($event)"
-        />
-      </div>
-    </nmf-form-field>
-  `,
-                }]
-        }] });
-
 class InputDatepickerComponent extends FormControlBase {
     minDate = input(null);
     maxDate = input(null);
@@ -669,27 +573,31 @@ class InputDatepickerComponent extends FormControlBase {
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        type="date"
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [min]="formatDate(minDate())"
-        [max]="formatDate(maxDate())"
-        [name]="name()"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      />
+      >
+        <input
+          #focusable
+          type="date"
+          class="nmf-control"
+          [ngClass]="classList()"
+          [id]="id()"
+          [min]="formatDate(minDate())"
+          [max]="formatDate(maxDate())"
+          [name]="name()"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        />
+      </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
@@ -705,25 +613,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        type="date"
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [min]="formatDate(minDate())"
-        [max]="formatDate(maxDate())"
-        [name]="name()"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      />
+      >
+        <input
+          #focusable
+          type="date"
+          class="nmf-control"
+          [ngClass]="classList()"
+          [id]="id()"
+          [min]="formatDate(minDate())"
+          [max]="formatDate(maxDate())"
+          [name]="name()"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        />
+      </div>
     </nmf-form-field>
   `,
                 }]
@@ -906,16 +818,18 @@ class InputLookupComponent extends FormControlBase {
       [loading]="behavior.status() === 'loading' || loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="nmf-input-wrapper" [style.position]="'relative'">
-        @if ({ options: behavior.filteredOptions | async }; as stream) {
+      <div
+        class="nmf-control-wrapper"
+        [class.error]="hasErrors()"
+        [class.disabled]="disabled()"
+      >
+        @if (behavior.filteredOptions | async; as options) {
           <input
             #focusable
             type="text"
-            class="nmf-input"
+            class="nmf-control"
             [attr.list]="id + '-options'"
             [ngClass]="classList()"
-            [class.error]="hasErrors()"
-            [class.disabled]="disabled()"
             [style.cursor]="
               behavior.selectedOption() != null ? 'not-allowed' : 'text'
             "
@@ -930,17 +844,17 @@ class InputLookupComponent extends FormControlBase {
             (blur)="onFocusOut()"
             (focus)="onFocusIn()"
             (input)="onInput($event)"
-            (keydown)="onKeyDown($event, stream.options)"
+            (keydown)="onKeyDown($event, options)"
           />
 
-          @if (isOpen() && stream.options && stream.options.length > 0) {
+          @if (isOpen() && options && options.length > 0) {
             <ul
               class="nmf-options-list"
               [class.upward]="openUpwards()"
               (pointerdown)="setOptionsInteraction(true)"
               (pointerup)="setOptionsInteraction(false)"
             >
-              @for (option of stream.options; track option; let i = $index) {
+              @for (option of options; track option; let i = $index) {
                 <li
                   [class.selected]="behavior.selectedOption() == option"
                   [class.active]="activeIndex() === i"
@@ -967,7 +881,7 @@ class InputLookupComponent extends FormControlBase {
         }
       </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputLookupComponent, decorators: [{
             type: Component,
@@ -984,16 +898,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="behavior.status() === 'loading' || loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="nmf-input-wrapper" [style.position]="'relative'">
-        @if ({ options: behavior.filteredOptions | async }; as stream) {
+      <div
+        class="nmf-control-wrapper"
+        [class.error]="hasErrors()"
+        [class.disabled]="disabled()"
+      >
+        @if (behavior.filteredOptions | async; as options) {
           <input
             #focusable
             type="text"
-            class="nmf-input"
+            class="nmf-control"
             [attr.list]="id + '-options'"
             [ngClass]="classList()"
-            [class.error]="hasErrors()"
-            [class.disabled]="disabled()"
             [style.cursor]="
               behavior.selectedOption() != null ? 'not-allowed' : 'text'
             "
@@ -1008,17 +924,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             (blur)="onFocusOut()"
             (focus)="onFocusIn()"
             (input)="onInput($event)"
-            (keydown)="onKeyDown($event, stream.options)"
+            (keydown)="onKeyDown($event, options)"
           />
 
-          @if (isOpen() && stream.options && stream.options.length > 0) {
+          @if (isOpen() && options && options.length > 0) {
             <ul
               class="nmf-options-list"
               [class.upward]="openUpwards()"
               (pointerdown)="setOptionsInteraction(true)"
               (pointerup)="setOptionsInteraction(false)"
             >
-              @for (option of stream.options; track option; let i = $index) {
+              @for (option of options; track option; let i = $index) {
                 <li
                   [class.selected]="behavior.selectedOption() == option"
                   [class.active]="activeIndex() === i"
@@ -1049,62 +965,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class NmfPrefixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NmfPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: NmfPrefixDirective, isStandalone: true, selector: "[nmfPrefix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NmfPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nmfPrefix]',
+                    standalone: true,
+                }]
+        }] });
+
+class NmfSuffixDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NmfSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.25", type: NmfSuffixDirective, isStandalone: true, selector: "[nmfSuffix]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NmfSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nmfSuffix]',
+                    standalone: true,
+                }]
+        }] });
+
 class InputNumberComponent extends FormControlBase {
     formatValue = input(false);
+    prefix = input(null);
+    suffix = input(null);
+    allowNegative = input(true);
+    negativeColor = input('var(--mat-sys-error)');
     displayValue = signal('');
-    behavior = new TextBehavior();
-    currencyBehavior = new CurrencyBehavior();
+    numberBehavior = new NumberBehavior();
+    prefixContent = contentChild(NmfPrefixDirective);
+    suffixContent = contentChild(NmfSuffixDirective);
+    hasPrefix = computed(() => !!this.prefix() || !!this.prefixContent());
+    hasSuffix = computed(() => !!this.suffix() || !!this.suffixContent());
+    textColor = computed(() => {
+        const value = this.displayValue();
+        if (value == null ||
+            value === '' ||
+            this.negativeColor() == null ||
+            this._disabledByInput()) {
+            return 'inherit';
+        }
+        const parsed = parseNumber(value ?? 0);
+        const valid = parsed != null && parsed >= 0;
+        return valid ? 'inherit' : this.negativeColor();
+    });
     writeValue(value) {
         super.writeValue(value);
         this.updateDisplayValue(value);
     }
     handleKeyDown(event) {
-        this.currencyBehavior.blockNonDigitKey(event);
+        this.numberBehavior.blockNonDigitKey(event, this.allowNegative());
     }
     onInput(event) {
         if (this._disabledByInput())
             return;
-        const raw = event.target.value;
-        const parsed = parseNumber(raw);
+        const raw = event.target.value ?? '';
+        const cleaned = this.numberBehavior.sanitize(raw, this.allowNegative());
+        const parsed = parseNumber(cleaned);
         this.updateDisplayValue(parsed);
         this.onChange(parsed);
     }
     updateDisplayValue(value) {
         if (this.formatValue() && value != null) {
             this.displayValue.set(formatNumber(value) ?? '');
+            return;
         }
-        else {
-            this.displayValue.set(value != null ? String(value) : '');
-        }
+        this.displayValue.set(value != null ? String(value) : '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.25", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: true, isRequired: false, transformFunction: null }, negativeColor: { classPropertyName: "negativeColor", publicName: "negativeColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixContent", first: true, predicate: NmfPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixContent", first: true, predicate: NmfSuffixDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [name]="name()"
-        [type]="formatValue() ? 'text' : 'number'"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-        (keydown)="handleKeyDown($event)"
-      />
+        [class.has-prefix]="hasPrefix()"
+        [class.has-suffix]="hasSuffix()"
+        [style.color]="textColor()"
+      >
+        @if (prefix() != null) {
+          <span class="nmf-prefix">
+            {{ prefix() }}
+          </span>
+        }
+        <ng-content select="[nmfPrefix]" />
+
+        <input
+          #focusable
+          class="nmf-control"
+          [style.color]="textColor()"
+          [ngClass]="classList()"
+          [id]="id()"
+          [name]="name()"
+          [type]="formatValue() ? 'text' : 'number'"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+          (keydown)="handleKeyDown($event)"
+        />
+
+        @if (suffix() != null) {
+          <span class="nmf-suffix">
+            {{ suffix() }}
+          </span>
+        }
+        <ng-content select="[nmfSuffix]" />
+      </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
@@ -1120,24 +1101,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [name]="name()"
-        [type]="formatValue() ? 'text' : 'number'"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-        (keydown)="handleKeyDown($event)"
-      />
+        [class.has-prefix]="hasPrefix()"
+        [class.has-suffix]="hasSuffix()"
+        [style.color]="textColor()"
+      >
+        @if (prefix() != null) {
+          <span class="nmf-prefix">
+            {{ prefix() }}
+          </span>
+        }
+        <ng-content select="[nmfPrefix]" />
+
+        <input
+          #focusable
+          class="nmf-control"
+          [style.color]="textColor()"
+          [ngClass]="classList()"
+          [id]="id()"
+          [name]="name()"
+          [type]="formatValue() ? 'text' : 'number'"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+          (keydown)="handleKeyDown($event)"
+        />
+
+        @if (suffix() != null) {
+          <span class="nmf-suffix">
+            {{ suffix() }}
+          </span>
+        }
+        <ng-content select="[nmfSuffix]" />
+      </div>
     </nmf-form-field>
   `,
                 }]
@@ -1161,13 +1164,15 @@ class InputSelectComponent extends FormControlBase {
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="select-wrapper" [class.disabled]="disabled()">
+      <div
+        class="nmf-control-wrapper nmf-select"
+        [class.disabled]="disabled()"
+        [class.error]="hasErrors()"
+      >
         <select
           #focusable
-          class="nmf-input"
+          class="nmf-control"
           [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
           [id]="id()"
           [value]="value ?? ''"
           [disabled]="disabled()"
@@ -1190,7 +1195,7 @@ class InputSelectComponent extends FormControlBase {
         </select>
       </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
@@ -1206,13 +1211,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="select-wrapper" [class.disabled]="disabled()">
+      <div
+        class="nmf-control-wrapper nmf-select"
+        [class.disabled]="disabled()"
+        [class.error]="hasErrors()"
+      >
         <select
           #focusable
-          class="nmf-input"
+          class="nmf-control"
           [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
           [id]="id()"
           [value]="value ?? ''"
           [disabled]="disabled()"
@@ -1241,31 +1248,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 
 class InputTextComponent extends FormControlBase {
     type = input('text');
-    behavior = new TextBehavior();
-    computedType = computed(() => this.behavior.showPassword() && this.type() === 'password'
+    prefix = input(null);
+    suffix = input(null);
+    displayValue = signal(null);
+    passwordBehavior = new PasswordBehavior();
+    prefixContent = contentChild(NmfPrefixDirective);
+    suffixContent = contentChild(NmfSuffixDirective);
+    hasPrefix = computed(() => !!this.prefix() || !!this.prefixContent());
+    hasSuffix = computed(() => !!this.suffix() || !!this.suffixContent());
+    computedType = computed(() => this.passwordBehavior.showPassword() && this.type() === 'password'
         ? 'text'
         : this.type());
     onInput(event) {
         if (this._disabledByInput())
             return;
-        const input = event.target;
-        this.onChange(input.value);
+        const value = event.target.value ?? null;
+        this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "prefixContent", first: true, predicate: NmfPrefixDirective, descendants: true, isSignal: true }, { propertyName: "suffixContent", first: true, predicate: NmfSuffixDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <nmf-form-field
       [label]="label()"
       [isRequired]="isRequired()"
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="nmf-input-wrapper">
+      <div
+        class="nmf-control-wrapper"
+        [class.error]="hasErrors()"
+        [class.disabled]="disabled()"
+        [class.has-prefix]="hasPrefix()"
+        [class.has-suffix]="hasSuffix()"
+      >
+        @if (prefix() != null) {
+          <span class="nmf-prefix">
+            {{ prefix() }}
+          </span>
+        }
+        <ng-content select="[nmfPrefix]" />
+
         <input
           #focusable
-          class="nmf-input"
+          class="nmf-control"
           [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
           [id]="id()"
           [name]="name()"
           [type]="computedType()"
@@ -1283,14 +1308,21 @@ class InputTextComponent extends FormControlBase {
             type="button"
             class="nmf-password-toggle"
             aria-label="Toggle password visibility"
-            (click)="behavior.toggleShowPassword($event)"
+            (click)="passwordBehavior.toggleShowPassword($event)"
           >
-            @if (behavior.showPassword()) {
+            @if (passwordBehavior.showPassword()) {
               <ng-container [ngTemplateOutlet]="eyeOffIcon"></ng-container>
             } @else {
               <ng-container [ngTemplateOutlet]="eyeIcon"></ng-container>
             }
           </button>
+        } @else if (type() !== 'password') {
+          @if (suffix() != null) {
+            <span class="nmf-suffix">
+              {{ suffix() }}
+            </span>
+          }
+          <ng-content select="[nmfSuffix]" />
         }
       </div>
     </nmf-form-field>
@@ -1329,7 +1361,7 @@ class InputTextComponent extends FormControlBase {
         />
       </svg>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
@@ -1345,13 +1377,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <div class="nmf-input-wrapper">
+      <div
+        class="nmf-control-wrapper"
+        [class.error]="hasErrors()"
+        [class.disabled]="disabled()"
+        [class.has-prefix]="hasPrefix()"
+        [class.has-suffix]="hasSuffix()"
+      >
+        @if (prefix() != null) {
+          <span class="nmf-prefix">
+            {{ prefix() }}
+          </span>
+        }
+        <ng-content select="[nmfPrefix]" />
+
         <input
           #focusable
-          class="nmf-input"
+          class="nmf-control"
           [ngClass]="classList()"
-          [class.error]="hasErrors()"
-          [class.disabled]="disabled()"
           [id]="id()"
           [name]="name()"
           [type]="computedType()"
@@ -1369,14 +1412,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
             type="button"
             class="nmf-password-toggle"
             aria-label="Toggle password visibility"
-            (click)="behavior.toggleShowPassword($event)"
+            (click)="passwordBehavior.toggleShowPassword($event)"
           >
-            @if (behavior.showPassword()) {
+            @if (passwordBehavior.showPassword()) {
               <ng-container [ngTemplateOutlet]="eyeOffIcon"></ng-container>
             } @else {
               <ng-container [ngTemplateOutlet]="eyeIcon"></ng-container>
             }
           </button>
+        } @else if (type() !== 'password') {
+          @if (suffix() != null) {
+            <span class="nmf-suffix">
+              {{ suffix() }}
+            </span>
+          }
+          <ng-content select="[nmfSuffix]" />
         }
       </div>
     </nmf-form-field>
@@ -1436,25 +1486,31 @@ class InputTextareaComponent extends FormControlBase {
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <textarea
-        #focusable
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper nmf-textarea"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [rows]="rows()"
-        [cols]="cols()"
-        [value]="value"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      ></textarea>
+      >
+        <textarea
+          #focusable
+          class="nmf-control"
+          [ngClass]="classList()"
+          [class.error]="hasErrors()"
+          [class.disabled]="disabled()"
+          [id]="id()"
+          [rows]="rows()"
+          [cols]="cols()"
+          [value]="value"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        ></textarea>
+      </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
@@ -1470,23 +1526,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <textarea
-        #focusable
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper nmf-textarea"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [rows]="rows()"
-        [cols]="cols()"
-        [value]="value"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      ></textarea>
+      >
+        <textarea
+          #focusable
+          class="nmf-control"
+          [ngClass]="classList()"
+          [class.error]="hasErrors()"
+          [class.disabled]="disabled()"
+          [id]="id()"
+          [rows]="rows()"
+          [cols]="cols()"
+          [value]="value"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        ></textarea>
+      </div>
     </nmf-form-field>
   `,
                 }]
@@ -1532,26 +1594,30 @@ class InputTimepickerComponent extends FormControlBase {
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        type="time"
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [name]="name()"
-        [step]="step()"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      />
+      >
+        <input
+          #focusable
+          type="time"
+          class="nmf-control"
+          [ngClass]="classList()"
+          [id]="id()"
+          [name]="name()"
+          [step]="step()"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        />
+      </div>
     </nmf-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "hint", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "loading", "hint", "isRequired", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: InputTimepickerComponent, decorators: [{
             type: Component,
@@ -1567,24 +1633,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
       [loading]="loading()"
       [errorMessage]="errorMessage()"
     >
-      <input
-        #focusable
-        type="time"
-        class="nmf-input"
-        [ngClass]="classList()"
+      <div
+        class="nmf-control-wrapper"
         [class.error]="hasErrors()"
         [class.disabled]="disabled()"
-        [id]="id()"
-        [name]="name()"
-        [step]="step()"
-        [value]="displayValue()"
-        [disabled]="disabled()"
-        [required]="isRequired()"
-        [placeholder]="placeholder()"
-        [autocomplete]="autocompleteAttr()"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-      />
+      >
+        <input
+          #focusable
+          type="time"
+          class="nmf-control"
+          [ngClass]="classList()"
+          [id]="id()"
+          [name]="name()"
+          [step]="step()"
+          [value]="displayValue()"
+          [disabled]="disabled()"
+          [required]="isRequired()"
+          [placeholder]="placeholder()"
+          [autocomplete]="autocompleteAttr()"
+          (blur)="onTouched()"
+          (input)="onInput($event)"
+        />
+      </div>
     </nmf-form-field>
   `,
                 }]
@@ -1596,11 +1666,20 @@ function isRecord(value) {
 
 class FormHydrator {
     hydrate(form, model, registry = {}) {
+        if (form instanceof FormArray) {
+            this.hydrateFormArray(form, model, registry);
+            return;
+        }
         Object.entries(form.controls).forEach(([key, control]) => {
-            if (!(key in model))
+            if (!(key in model)) {
                 return;
+            }
             const mapFn = registry[key]?.fromModel;
-            const value = model?.[key];
+            const value = model[key];
+            if (control instanceof FormArray) {
+                this.hydrateFormArray(control, value, registry);
+                return;
+            }
             if (control instanceof FormGroup) {
                 if (mapFn) {
                     const mapped = mapFn(value);
@@ -1609,13 +1688,70 @@ class FormHydrator {
                     }
                 }
                 else {
-                    this.hydrate(control, (value ?? {}), registry);
+                    this.hydrate(control, value ?? {}, registry);
                 }
                 return;
             }
             control.patchValue(value, { emitEvent: false });
         });
     }
+    hydrateFormArray(formArray, model, registry) {
+        const values = Array.isArray(model) ? model : [];
+        if (values.length === 0) {
+            formArray.clear();
+            return;
+        }
+        if (formArray.length === 0) {
+            formArray.push(this.createControlFromModel(values[0]));
+        }
+        while (formArray.length > values.length) {
+            formArray.removeAt(formArray.length - 1);
+        }
+        while (formArray.length < values.length) {
+            const template = formArray.at(formArray.length - 1);
+            formArray.push(this.cloneControl(template));
+        }
+        values.forEach((item, index) => {
+            const child = formArray.at(index);
+            if (child instanceof FormGroup && isRecord(item)) {
+                this.hydrate(child, item, registry);
+            }
+            else if (child instanceof FormArray && Array.isArray(item)) {
+                this.hydrate(child, item, registry);
+            }
+            else {
+                child.patchValue(item, { emitEvent: false });
+            }
+        });
+    }
+    createControlFromModel(value) {
+        if (Array.isArray(value)) {
+            return new FormArray(value.map((item) => this.createControlFromModel(item)));
+        }
+        if (isRecord(value)) {
+            return new FormGroup(Object.fromEntries(Object.keys(value).map((key) => [key, new FormControl(null)])));
+        }
+        return new FormControl(null);
+    }
+    cloneControl(control) {
+        if (control instanceof FormControl) {
+            return new FormControl(null, control.validator, control.asyncValidator);
+        }
+        if (control instanceof FormGroup) {
+            return new FormGroup(Object.fromEntries(Object.entries(control.controls).map(([key, child]) => [
+                key,
+                this.cloneControl(child),
+            ])), {
+                validators: control.validator,
+                asyncValidators: control.asyncValidator,
+                updateOn: control.updateOn,
+            });
+        }
+        return new FormArray(control.controls.map((child) => this.cloneControl(child)), {
+            validators: control.validator,
+            asyncValidators: control.asyncValidator,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormHydrator, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FormHydrator, providedIn: 'root' });
 }
@@ -1626,16 +1762,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
 
 class FormSerializer {
     toRequest(form, registry = {}, options) {
+        if (form instanceof FormArray) {
+            return form.controls.map((control) => {
+                if (control instanceof FormControl) {
+                    return control.value;
+                }
+                if (control instanceof FormGroup) {
+                    return this.toRequest(control, registry, options);
+                }
+                if (control instanceof FormArray) {
+                    return this.toRequest(control, registry, options);
+                }
+                return null;
+            });
+        }
         const result = {};
         Object.entries(form.controls).forEach(([key, control]) => {
             const mapFn = registry[key]?.toRequest;
+            if (control instanceof FormControl) {
+                result[key] = control.value;
+                return;
+            }
             if (control instanceof FormGroup) {
                 result[key] = mapFn
                     ? mapFn(control.value, options)
                     : this.toRequest(control, registry, options);
                 return;
             }
-            result[key] = control.value;
+            if (control instanceof FormArray) {
+                result[key] = mapFn
+                    ? mapFn(control.value, options)
+                    : this.toRequest(control, registry, options);
+                return;
+            }
         });
         return result;
     }
@@ -1687,6 +1846,7 @@ class FormOrchestrator extends FormMapperBase {
     }
     addHandlerToRegistry(handler) {
         this._handlerRegistry.set([...this._handlerRegistry(), handler]);
+        this.addReactiveLogic(handler.getReactiveLogic(this.form()));
     }
     addReactiveLogic(subscription) {
         this._logicSubscription.add(subscription);
@@ -1705,10 +1865,15 @@ class FormOrchestrator extends FormMapperBase {
                 return;
             const mapper = registry[key];
             const value = model[key];
+            if (control instanceof FormControl) {
+                const mapped = mapper ? mapper.fromModel(value) : value;
+                control.setValue(mapped, { emitEvent: false });
+                return;
+            }
             if (control instanceof FormGroup) {
                 const mapped = mapper ? mapper.fromModel(value) : value;
                 if (isRecord(mapped)) {
-                    this.hydrator.hydrate(control, mapped);
+                    this.hydrator.hydrate(control, mapped, registry);
                 }
             }
         });
@@ -1734,5 +1899,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CurrencyBehavior, FormControlBase, FormHandlerBase, FormHydrator, FormMapperBase, FormOrchestrator, FormSerializer, InputCurrencyComponent, InputDatepickerComponent, InputLookupComponent, InputNumberComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, InputTimepickerComponent, LookupBehavior, TextBehavior, formatNumber, getControl, getControlValue, parseNumber };
+export { FormControlBase, FormFieldComponent, FormHandlerBase, FormHydrator, FormMapperBase, FormOrchestrator, FormSerializer, InputDatepickerComponent, InputLookupComponent, InputNumberComponent, InputSelectComponent, InputTextComponent, InputTextareaComponent, InputTimepickerComponent, LookupBehavior, NmfPrefixDirective, NmfSuffixDirective, NumberBehavior, PasswordBehavior, formatNumber, getControl, getControlValue, parseNumber };
 //# sourceMappingURL=ng-modular-forms-core.mjs.map