@ng-modular-forms/core 0.7.4 → 0.7.7

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

@@ -18,6 +18,7 @@ class FormControlBase {
     placeholder = input('');
     _disabledByInput = input(false, {
         transform: booleanAttribute,
+        alias: 'disabledOverride',
     });
     _disabledByCva = signal(false);
     ngControl = inject(NgControl, {
@@ -105,39 +106,12 @@ class FormControlBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "_disabledByInput", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: FormControlBase, isStandalone: true, inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, _disabledByInput: { classPropertyName: "_disabledByInput", publicName: "disabledOverride", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormControlBase, decorators: [{
             type: Directive
         }], ctorParameters: () => [] });
 
-function getControl(controlName, form) {
-    if (!form) {
-        throw new Error(`Missing form instance while getting the control of "${controlName}"`);
-    }
-    const control = form.get(controlName);
-    if (!control) {
-        throw new Error(`Missing control "${controlName}" in form "${form}"`);
-    }
-    return control;
-}
-function getControlValue(controlName, form) {
-    const control = getControl(controlName, form);
-    if (!control) {
-        throw new Error(`Missing control "${controlName}" in form "${form}"`);
-    }
-    const value = control.getRawValue();
-    if (value === '') {
-        return null;
-    }
-    if (typeof value === 'string') {
-        const cleaned = value.replace(/,/g, '');
-        if (!Number.isNaN(Number(cleaned))) {
-            return parseNumber(value);
-        }
-    }
-    return value;
-}
 function parseNumber(input) {
     if (input == null || input === '')
         return null;
@@ -171,6 +145,34 @@ function formatNumber(value, locale = 'en-US', options = { maximumFractionDigits
     return isNegative ? `-${formatted}` : formatted;
 }
 
+function getControl(controlName, form) {
+    if (!form) {
+        throw new Error(`Missing form instance while getting the control of "${controlName}"`);
+    }
+    const control = form.get(controlName);
+    if (!control) {
+        throw new Error(`Missing control "${controlName}" in form "${form}"`);
+    }
+    return control;
+}
+function getControlValue(controlName, form) {
+    const control = getControl(controlName, form);
+    if (!control) {
+        throw new Error(`Missing control "${controlName}" in form "${form}"`);
+    }
+    const value = control.getRawValue();
+    if (value === '') {
+        return null;
+    }
+    if (typeof value === 'string') {
+        const cleaned = value.replace(/,/g, '');
+        if (!Number.isNaN(Number(cleaned))) {
+            return parseNumber(value);
+        }
+    }
+    return value;
+}
+
 class FormHandlerBase {
     registeredControls = {};
     /**
@@ -259,6 +261,71 @@ class TextBehavior {
     }
 }
 
+class FormFieldComponent {
+    label = input();
+    isRequired = input();
+    loading = input();
+    errorMessage = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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 }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="nmf-field" [class.loading]="loading()">
+      @if (label()) {
+        <label class="nmf-label">
+          {{ label() }}
+          @if (isRequired()) {
+            <span class="nmf-required">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <div class="nmf-loading">
+          <span class="nmf-spinner"></span>
+        </div>
+      }
+
+      <p class="nmf-error">
+        {{ errorMessage() }}
+      </p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nmf-form-field',
+                    standalone: true,
+                    imports: [CommonModule, ReactiveFormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="nmf-field" [class.loading]="loading()">
+      @if (label()) {
+        <label class="nmf-label">
+          {{ label() }}
+          @if (isRequired()) {
+            <span class="nmf-required">*</span>
+          }
+        </label>
+      }
+
+      <ng-content></ng-content>
+
+      @if (loading()) {
+        <div class="nmf-loading">
+          <span class="nmf-spinner"></span>
+        </div>
+      }
+
+      <p class="nmf-error">
+        {{ errorMessage() }}
+      </p>
+    </div>
+  `,
+                }]
+        }] });
+
 class InputCurrencyComponent extends FormControlBase {
     displayValue = signal(null);
     behavior = new CurrencyBehavior();
@@ -288,16 +355,12 @@ class InputCurrencyComponent extends FormControlBase {
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputCurrencyComponent, isStandalone: true, selector: "nmf-currency", usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper nmf-input-prefix">
         @if (displayValue() != null) {
           <span
@@ -330,39 +393,23 @@ class InputCurrencyComponent extends FormControlBase {
           (keydown)="handleKeyDown($event)"
         />
       </div>
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputCurrencyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-currency',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper nmf-input-prefix">
         @if (displayValue() != null) {
           <span
@@ -395,19 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           (keydown)="handleKeyDown($event)"
         />
       </div>
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -444,17 +479,13 @@ class InputDatepickerComponent extends FormControlBase {
         this.onChange(parsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputDatepickerComponent, isStandalone: true, selector: "nmf-datepicker", inputs: { minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="date"
         class="nmf-input"
@@ -472,39 +503,23 @@ class InputDatepickerComponent extends FormControlBase {
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-datepicker',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="date"
         class="nmf-input"
@@ -522,25 +537,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
 
 class InputNumberComponent extends FormControlBase {
-    formatNumberValue = input(false);
+    formatValue = input(false);
     displayValue = signal('');
     behavior = new TextBehavior();
     currencyBehavior = new CurrencyBehavior();
@@ -560,7 +563,7 @@ class InputNumberComponent extends FormControlBase {
         this.onChange(parsed);
     }
     updateDisplayValue(value) {
-        if (this.formatNumberValue() && value != null) {
+        if (this.formatValue() && value != null) {
             this.displayValue.set(formatNumber(value) ?? '');
         }
         else {
@@ -568,17 +571,13 @@ class InputNumberComponent extends FormControlBase {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatNumberValue: { classPropertyName: "formatNumberValue", publicName: "formatNumberValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputNumberComponent, isStandalone: true, selector: "nmf-number", inputs: { formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         autocomplete="off"
         class="nmf-input"
@@ -587,7 +586,7 @@ class InputNumberComponent extends FormControlBase {
         [class.disabled]="disabled()"
         [id]="id()"
         [name]="name()"
-        [type]="formatNumberValue() ? 'text' : 'number'"
+        [type]="formatValue() ? 'text' : 'number'"
         [value]="displayValue()"
         [disabled]="disabled()"
         [required]="isRequired()"
@@ -596,39 +595,23 @@ class InputNumberComponent extends FormControlBase {
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
       />
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputNumberComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-number',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         autocomplete="off"
         class="nmf-input"
@@ -637,7 +620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [class.disabled]="disabled()"
         [id]="id()"
         [name]="name()"
-        [type]="formatNumberValue() ? 'text' : 'number'"
+        [type]="formatValue() ? 'text' : 'number'"
         [value]="displayValue()"
         [disabled]="disabled()"
         [required]="isRequired()"
@@ -646,19 +629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (input)="onInput($event)"
         (keydown)="handleKeyDown($event)"
       />
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -669,15 +640,12 @@ class InputSelectComponent extends FormControlBase {
     clearOptionLabel = input('Clear selection');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputSelectComponent, isStandalone: true, selector: "nmf-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, clearOptionLabel: { classPropertyName: "clearOptionLabel", publicName: "clearOptionLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
           class="nmf-input"
@@ -708,36 +676,23 @@ class InputSelectComponent extends FormControlBase {
           }
         </select>
       </div>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, 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: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-select',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="select-wrapper" [class.disabled]="disabled()">
         <select
           class="nmf-input"
@@ -768,17 +723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           }
         </select>
       </div>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -791,16 +736,12 @@ class InputTextComponent extends FormControlBase {
         : this.type());
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextComponent, isStandalone: true, selector: "nmf-text", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper">
         <input
           class="nmf-input"
@@ -831,19 +772,7 @@ class InputTextComponent extends FormControlBase {
           </button>
         }
       </div>
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
 
     <ng-template #eyeIcon>
       <svg
@@ -879,26 +808,22 @@ 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: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], 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: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-text',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <div class="nmf-input-wrapper">
         <input
           class="nmf-input"
@@ -929,19 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
           </button>
         }
       </div>
-
-      <ng-content></ng-content>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
 
     <ng-template #eyeIcon>
       <svg
@@ -985,17 +898,13 @@ class InputTextareaComponent extends FormControlBase {
     rows = input(5);
     cols = input(5);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-textarea", inputs: { rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <textarea
         class="nmf-input"
         [ngClass]="classList()"
@@ -1009,37 +918,23 @@ class InputTextareaComponent extends FormControlBase {
         [formControl]="formControl"
         (blur)="onTouched()"
       ></textarea>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
-  `, 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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "nmf-form-field", inputs: ["label", "isRequired", "loading", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-textarea',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <textarea
         class="nmf-input"
         [ngClass]="classList()"
@@ -1053,17 +948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         [formControl]="formControl"
         (blur)="onTouched()"
       ></textarea>
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
@@ -1101,17 +986,13 @@ class InputTimepickerComponent extends FormControlBase {
         this.onChange(parsed);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: InputTimepickerComponent, isStandalone: true, selector: "nmf-timepicker", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="time"
         autocomplete="off"
@@ -1129,39 +1010,23 @@ class InputTimepickerComponent extends FormControlBase {
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nmf-timepicker',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, FormFieldComponent],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <div class="nmf-field" [class.loading]="loading()">
-      @if (label()) {
-        <label class="nmf-label">
-          {{ label() }}
-          @if (isRequired()) {
-            <span class="nmf-required">*</span>
-          }
-        </label>
-      }
-
+    <nmf-form-field
+      [label]="label()"
+      [isRequired]="isRequired()"
+      [loading]="loading()"
+      [errorMessage]="errorMessage()"
+    >
       <input
         type="time"
         autocomplete="off"
@@ -1179,23 +1044,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         (blur)="onTouched()"
         (input)="onInput($event)"
       />
-
-      <ng-content></ng-content>
-
-      @if (loading()) {
-        <div class="nmf-loading">
-          <span class="nmf-spinner"></span>
-        </div>
-      }
-
-      <p class="nmf-error">
-        {{ errorMessage() }}
-      </p>
-    </div>
+    </nmf-form-field>
   `,
                 }]
         }] });
 
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
 class FormHydrator {
     hydrate(form, model, registry = {}) {
         Object.entries(form.controls).forEach(([key, control]) => {
@@ -1205,10 +1062,13 @@ class FormHydrator {
             const value = model?.[key];
             if (control instanceof FormGroup) {
                 if (mapFn) {
-                    control.patchValue(mapFn(value), { emitEvent: false });
+                    const mapped = mapFn(value);
+                    if (isRecord(mapped)) {
+                        control.patchValue(mapped, { emitEvent: false });
+                    }
                 }
                 else {
-                    this.hydrate(control, value, registry);
+                    this.hydrate(control, (value ?? {}), registry);
                 }
                 return;
             }
@@ -1305,7 +1165,10 @@ class FormOrchestrator extends FormMapperBase {
             const mapper = registry[key];
             const value = model?.[key];
             if (control instanceof FormGroup) {
-                this.hydrator.hydrate(control, mapper ? mapper.fromModel(value) : value);
+                const mapped = mapper ? mapper.fromModel(value) : value;
+                if (isRecord(mapped)) {
+                    this.hydrator.hydrate(control, mapped);
+                }
             }
         });
     }