@ng-modular-forms/material 0.1.0 → 0.2.0

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

@@ -125,64 +125,64 @@ class MatInputCurrencyComponent extends MatFormControlBase {
             : 'red';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-input-currency", usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <span
-        [style.color]="
-          control().disabled || readonly
-            ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
-            : 'inherit'
-        "
-        matTextPrefix
-      >
-        $
-      </span>
-
-      <input
-        matInput
-        type="text"
-        autocomplete="off"
-        [id]="id"
-        [name]="name"
-        [value]="value"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
-        [placeholder]="placeholder || '0.00'"
-        (keydown)="handleKeyDown($event)"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        style="padding-top: 5px; color: {{ textColor(value) }} !important"
-      />
-
-      <span matTextSuffix><ng-content></ng-content></span>
-
-      @if (loading()) {
-        <div class="absolute top-5 right-5 z-10">
-          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputCurrencyComponent, isStandalone: true, selector: "nmf-mat-input-currency", usesInheritance: true, ngImport: i0, template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <span
+        [style.color]="
+          control().disabled || readonly
+            ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
+            : 'inherit'
+        "
+        matTextPrefix
+      >
+        $
+      </span>
+
+      <input
+        matInput
+        type="text"
+        autocomplete="off"
+        [id]="id"
+        [name]="name"
+        [value]="value"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
+        [placeholder]="placeholder || '0.00'"
+        (keydown)="handleKeyDown($event)"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        style="padding-top: 5px; color: {{ textColor(value) }} !important"
+      />
+
+      <span matTextSuffix><ng-content></ng-content></span>
+
+      @if (loading()) {
+        <div class="absolute top-5 right-5 z-10">
+          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputCurrencyComponent, decorators: [{
@@ -196,64 +196,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatProgressSpinnerModule,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <span
-        [style.color]="
-          control().disabled || readonly
-            ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
-            : 'inherit'
-        "
-        matTextPrefix
-      >
-        $
-      </span>
-
-      <input
-        matInput
-        type="text"
-        autocomplete="off"
-        [id]="id"
-        [name]="name"
-        [value]="value"
-        [disabled]="disabled"
-        [readonly]="readonly"
-        [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
-        [placeholder]="placeholder || '0.00'"
-        (keydown)="handleKeyDown($event)"
-        (input)="onInput($event)"
-        (blur)="onTouched()"
-        style="padding-top: 5px; color: {{ textColor(value) }} !important"
-      />
-
-      <span matTextSuffix><ng-content></ng-content></span>
-
-      @if (loading()) {
-        <div class="absolute top-5 right-5 z-10">
-          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+                    template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <span
+        [style.color]="
+          control().disabled || readonly
+            ? 'var(--mat-form-field-outlined-disabled-input-text-text)'
+            : 'inherit'
+        "
+        matTextPrefix
+      >
+        $
+      </span>
+
+      <input
+        matInput
+        type="text"
+        autocomplete="off"
+        [id]="id"
+        [name]="name"
+        [value]="value"
+        [disabled]="disabled"
+        [readonly]="readonly"
+        [ngClass]="classList().concat(readonly ? ['opacity-60'] : [])"
+        [placeholder]="placeholder || '0.00'"
+        (keydown)="handleKeyDown($event)"
+        (input)="onInput($event)"
+        (blur)="onTouched()"
+        style="padding-top: 5px; color: {{ textColor(value) }} !important"
+      />
+
+      <span matTextSuffix><ng-content></ng-content></span>
+
+      @if (loading()) {
+        <div class="absolute top-5 right-5 z-10">
+          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `,
                 }]
         }] });
@@ -285,65 +285,65 @@ class MatInputDatepickerComponent extends MatFormControlBase {
         this.stateChanges.next();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputDatepickerComponent, isStandalone: true, selector: "nmf-mat-input-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: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <input
-        matInput
-        autocomplete="off"
-        [id]="id"
-        [name]="name"
-        [value]="value"
-        [type]="'text'"
-        [readonly]="readonly"
-        [placeholder]="placeholder || 'Select a date'"
-        [disabled]="disabled"
-        [matDatepicker]="picker"
-        (dateInput)="onInput($event)"
-        (dateChange)="onInput($event)"
-        (blur)="onTouched()"
-        style="padding-top: 5px"
-      />
-
-      <mat-datepicker-toggle
-        [hidden]="loading()"
-        matSuffix
-        [for]="picker"
-      ></mat-datepicker-toggle>
-
-      <mat-datepicker [hidden]="loading()" #picker>
-        <!--         <mat-datepicker-actions>
-          <button matButton (click)="setToday(picker)">Hoy</button>
-          <button matButton matDatepickerCancel>Cancelar</button>
-          <button matButton="elevated" matDatepickerApply>Aplicar</button>
-        </mat-datepicker-actions> -->
-      </mat-datepicker>
-
-      @if (loading()) {
-        <div class="absolute top-2 right-2">
-          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: MatInputDatepickerComponent, isStandalone: true, selector: "nmf-mat-input-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: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <input
+        matInput
+        autocomplete="off"
+        [id]="id"
+        [name]="name"
+        [value]="value"
+        [type]="'text'"
+        [readonly]="readonly"
+        [placeholder]="placeholder || 'Select a date'"
+        [disabled]="disabled"
+        [matDatepicker]="picker"
+        (dateInput)="onInput($event)"
+        (dateChange)="onInput($event)"
+        (blur)="onTouched()"
+        style="padding-top: 5px"
+      />
+
+      <mat-datepicker-toggle
+        [hidden]="loading()"
+        matSuffix
+        [for]="picker"
+      ></mat-datepicker-toggle>
+
+      <mat-datepicker [hidden]="loading()" #picker>
+        <!--         <mat-datepicker-actions>
+          <button matButton (click)="setToday(picker)">Hoy</button>
+          <button matButton matDatepickerCancel>Cancelar</button>
+          <button matButton="elevated" matDatepickerApply>Aplicar</button>
+        </mat-datepicker-actions> -->
+      </mat-datepicker>
+
+      @if (loading()) {
+        <div class="absolute top-2 right-2">
+          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: MatInputDatepickerComponent, decorators: [{
@@ -359,65 +359,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatProgressSpinnerModule,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <input
-        matInput
-        autocomplete="off"
-        [id]="id"
-        [name]="name"
-        [value]="value"
-        [type]="'text'"
-        [readonly]="readonly"
-        [placeholder]="placeholder || 'Select a date'"
-        [disabled]="disabled"
-        [matDatepicker]="picker"
-        (dateInput)="onInput($event)"
-        (dateChange)="onInput($event)"
-        (blur)="onTouched()"
-        style="padding-top: 5px"
-      />
-
-      <mat-datepicker-toggle
-        [hidden]="loading()"
-        matSuffix
-        [for]="picker"
-      ></mat-datepicker-toggle>
-
-      <mat-datepicker [hidden]="loading()" #picker>
-        <!--         <mat-datepicker-actions>
-          <button matButton (click)="setToday(picker)">Hoy</button>
-          <button matButton matDatepickerCancel>Cancelar</button>
-          <button matButton="elevated" matDatepickerApply>Aplicar</button>
-        </mat-datepicker-actions> -->
-      </mat-datepicker>
-
-      @if (loading()) {
-        <div class="absolute top-2 right-2">
-          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+                    template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <input
+        matInput
+        autocomplete="off"
+        [id]="id"
+        [name]="name"
+        [value]="value"
+        [type]="'text'"
+        [readonly]="readonly"
+        [placeholder]="placeholder || 'Select a date'"
+        [disabled]="disabled"
+        [matDatepicker]="picker"
+        (dateInput)="onInput($event)"
+        (dateChange)="onInput($event)"
+        (blur)="onTouched()"
+        style="padding-top: 5px"
+      />
+
+      <mat-datepicker-toggle
+        [hidden]="loading()"
+        matSuffix
+        [for]="picker"
+      ></mat-datepicker-toggle>
+
+      <mat-datepicker [hidden]="loading()" #picker>
+        <!--         <mat-datepicker-actions>
+          <button matButton (click)="setToday(picker)">Hoy</button>
+          <button matButton matDatepickerCancel>Cancelar</button>
+          <button matButton="elevated" matDatepickerApply>Aplicar</button>
+        </mat-datepicker-actions> -->
+      </mat-datepicker>
+
+      @if (loading()) {
+        <div class="absolute top-2 right-2">
+          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `,
                 }]
         }] });
@@ -439,58 +439,58 @@ class InputSelectComponent extends MatFormControlBase {
         this.behavior.onSelectionChange(this, event);
     }
     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-mat-input-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearOption: { classPropertyName: "showClearOption", publicName: "showClearOption", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <mat-select
-        [value]="value"
-        [disabled]="disabled"
-        [panelWidth]="panelWidth()"
-        [ngClass]="disabled ? 'hide-arrow' : ''"
-        (blur)="onTouched()"
-        (selectionChange)="onSelectionChange($event)"
-        (closed)="onSelectionClosed()"
-      >
-        <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
-          {{ emptyOptionLabel() }}
-        </mat-option>
-
-        <!-- All Options -->
-        @for (option of options(); track option.label) {
-          <mat-option [value]="option.key" [disabled]="option.disabled">
-            {{ option.label }}
-          </mat-option>
-        }
-
-        <!-- Clear Selection Option -->
-        @if (showClearOption()) {
-          <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
-        }
-      </mat-select>
-
-      @if (loading()) {
-        <div class="absolute top-2 right-2">
-          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>{{ getErrorMessage() }}</mat-error>
-      }
-    </mat-form-field>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputSelectComponent, isStandalone: true, selector: "nmf-mat-input-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, emptyOptionLabel: { classPropertyName: "emptyOptionLabel", publicName: "emptyOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, showClearOption: { classPropertyName: "showClearOption", publicName: "showClearOption", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <mat-select
+        [value]="value"
+        [disabled]="disabled"
+        [panelWidth]="panelWidth()"
+        [ngClass]="disabled ? 'hide-arrow' : ''"
+        (blur)="onTouched()"
+        (selectionChange)="onSelectionChange($event)"
+        (closed)="onSelectionClosed()"
+      >
+        <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
+          {{ emptyOptionLabel() }}
+        </mat-option>
+
+        <!-- All Options -->
+        @for (option of options(); track option.label) {
+          <mat-option [value]="option.key" [disabled]="option.disabled">
+            {{ option.label }}
+          </mat-option>
+        }
+
+        <!-- Clear Selection Option -->
+        @if (showClearOption()) {
+          <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
+        }
+      </mat-select>
+
+      @if (loading()) {
+        <div class="absolute top-2 right-2">
+          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>{{ getErrorMessage() }}</mat-error>
+      }
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputSelectComponent, decorators: [{
@@ -505,58 +505,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatSelectModule,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <mat-select
-        [value]="value"
-        [disabled]="disabled"
-        [panelWidth]="panelWidth()"
-        [ngClass]="disabled ? 'hide-arrow' : ''"
-        (blur)="onTouched()"
-        (selectionChange)="onSelectionChange($event)"
-        (closed)="onSelectionClosed()"
-      >
-        <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
-          {{ emptyOptionLabel() }}
-        </mat-option>
-
-        <!-- All Options -->
-        @for (option of options(); track option.label) {
-          <mat-option [value]="option.key" [disabled]="option.disabled">
-            {{ option.label }}
-          </mat-option>
-        }
-
-        <!-- Clear Selection Option -->
-        @if (showClearOption()) {
-          <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
-        }
-      </mat-select>
-
-      @if (loading()) {
-        <div class="absolute top-2 right-2">
-          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>{{ getErrorMessage() }}</mat-error>
-      }
-    </mat-form-field>
+                    template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <mat-select
+        [value]="value"
+        [disabled]="disabled"
+        [panelWidth]="panelWidth()"
+        [ngClass]="disabled ? 'hide-arrow' : ''"
+        (blur)="onTouched()"
+        (selectionChange)="onSelectionChange($event)"
+        (closed)="onSelectionClosed()"
+      >
+        <mat-option [value]="value === -1 ? -1 : ''" selected disabled>
+          {{ emptyOptionLabel() }}
+        </mat-option>
+
+        <!-- All Options -->
+        @for (option of options(); track option.label) {
+          <mat-option [value]="option.key" [disabled]="option.disabled">
+            {{ option.label }}
+          </mat-option>
+        }
+
+        <!-- Clear Selection Option -->
+        @if (showClearOption()) {
+          <mat-option value="NONE">{{ 'forms.clearSelection' }}</mat-option>
+        }
+      </mat-select>
+
+      @if (loading()) {
+        <div class="absolute top-2 right-2">
+          <mat-spinner diameter="24" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>{{ getErrorMessage() }}</mat-error>
+      }
+    </mat-form-field>
   `,
                 }]
         }] });
@@ -576,60 +576,60 @@ class InputComponent extends MatFormControlBase {
                 provide: MatFormFieldControl,
                 useExisting: forwardRef(() => InputComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <div class="relative">
-      @if (label() && detachLabel()) {
-        <label class="font-medium text-base">{{ label() }}</label>
-      }
-      <mat-form-field
-        appearance="outline"
-        [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-      >
-        @if (label() && !detachLabel()) {
-          <mat-label>{{ label() }}</mat-label>
-        }
-
-        <input
-          matInput
-          autocomplete="off"
-          [ngClass]="classList"
-          [id]="id"
-          [name]="name === 'identificationNumber' ? 'idummyi' : name"
-          [type]="behavior.hidePassword() ? type() : 'text'"
-          [readonly]="readonly"
-          [placeholder]="placeholder"
-          (input)="onInput($event)"
-          (blur)="onTouched()"
-          [formControlName]="controlName()"
-          [required]="isRequired()"
-          style="padding-top: 5px"
-        />
-
-        @if (loading()) {
-          <div class="absolute top-5 right-5 z-10">
-            <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-          </div>
-        }
-
-        @if (hint()) {
-          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-        }
-
-        @if (type() === 'password') {
-          <button matIconSuffix (click)="toggleShowPassword($event)">
-            <mat-icon>{{
-              behavior.hidePassword() ? 'visibility_off' : 'visibility'
-            }}</mat-icon>
-          </button>
-        }
-
-        <ng-content></ng-content>
-
-        @if (control().invalid && control().touched) {
-          <mat-error>{{ getErrorMessage() }}</mat-error>
-        }
-      </mat-form-field>
-    </div>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="relative">
+      @if (label() && detachLabel()) {
+        <label class="font-medium text-base">{{ label() }}</label>
+      }
+      <mat-form-field
+        appearance="outline"
+        [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+      >
+        @if (label() && !detachLabel()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
+
+        <input
+          matInput
+          autocomplete="off"
+          [ngClass]="classList"
+          [id]="id"
+          [name]="name === 'identificationNumber' ? 'idummyi' : name"
+          [type]="behavior.hidePassword() ? type() : 'text'"
+          [readonly]="readonly"
+          [placeholder]="placeholder"
+          (input)="onInput($event)"
+          (blur)="onTouched()"
+          [formControlName]="controlName()"
+          [required]="isRequired()"
+          style="padding-top: 5px"
+        />
+
+        @if (loading()) {
+          <div class="absolute top-5 right-5 z-10">
+            <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+          </div>
+        }
+
+        @if (hint()) {
+          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        }
+
+        @if (type() === 'password') {
+          <button matIconSuffix (click)="toggleShowPassword($event)">
+            <mat-icon>{{
+              behavior.hidePassword() ? 'visibility_off' : 'visibility'
+            }}</mat-icon>
+          </button>
+        }
+
+        <ng-content></ng-content>
+
+        @if (control().invalid && control().touched) {
+          <mat-error>{{ getErrorMessage() }}</mat-error>
+        }
+      </mat-form-field>
+    </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputComponent, decorators: [{
@@ -651,60 +651,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         },
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    <div class="relative">
-      @if (label() && detachLabel()) {
-        <label class="font-medium text-base">{{ label() }}</label>
-      }
-      <mat-form-field
-        appearance="outline"
-        [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-      >
-        @if (label() && !detachLabel()) {
-          <mat-label>{{ label() }}</mat-label>
-        }
-
-        <input
-          matInput
-          autocomplete="off"
-          [ngClass]="classList"
-          [id]="id"
-          [name]="name === 'identificationNumber' ? 'idummyi' : name"
-          [type]="behavior.hidePassword() ? type() : 'text'"
-          [readonly]="readonly"
-          [placeholder]="placeholder"
-          (input)="onInput($event)"
-          (blur)="onTouched()"
-          [formControlName]="controlName()"
-          [required]="isRequired()"
-          style="padding-top: 5px"
-        />
-
-        @if (loading()) {
-          <div class="absolute top-5 right-5 z-10">
-            <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-          </div>
-        }
-
-        @if (hint()) {
-          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-        }
-
-        @if (type() === 'password') {
-          <button matIconSuffix (click)="toggleShowPassword($event)">
-            <mat-icon>{{
-              behavior.hidePassword() ? 'visibility_off' : 'visibility'
-            }}</mat-icon>
-          </button>
-        }
-
-        <ng-content></ng-content>
-
-        @if (control().invalid && control().touched) {
-          <mat-error>{{ getErrorMessage() }}</mat-error>
-        }
-      </mat-form-field>
-    </div>
+                    template: `
+    <div class="relative">
+      @if (label() && detachLabel()) {
+        <label class="font-medium text-base">{{ label() }}</label>
+      }
+      <mat-form-field
+        appearance="outline"
+        [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+      >
+        @if (label() && !detachLabel()) {
+          <mat-label>{{ label() }}</mat-label>
+        }
+
+        <input
+          matInput
+          autocomplete="off"
+          [ngClass]="classList"
+          [id]="id"
+          [name]="name === 'identificationNumber' ? 'idummyi' : name"
+          [type]="behavior.hidePassword() ? type() : 'text'"
+          [readonly]="readonly"
+          [placeholder]="placeholder"
+          (input)="onInput($event)"
+          (blur)="onTouched()"
+          [formControlName]="controlName()"
+          [required]="isRequired()"
+          style="padding-top: 5px"
+        />
+
+        @if (loading()) {
+          <div class="absolute top-5 right-5 z-10">
+            <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+          </div>
+        }
+
+        @if (hint()) {
+          <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+        }
+
+        @if (type() === 'password') {
+          <button matIconSuffix (click)="toggleShowPassword($event)">
+            <mat-icon>{{
+              behavior.hidePassword() ? 'visibility_off' : 'visibility'
+            }}</mat-icon>
+          </button>
+        }
+
+        <ng-content></ng-content>
+
+        @if (control().invalid && control().touched) {
+          <mat-error>{{ getErrorMessage() }}</mat-error>
+        }
+      </mat-form-field>
+    </div>
   `,
                 }]
         }] });
@@ -720,49 +720,49 @@ class InputTextareaComponent extends MatFormControlBase {
         this.behavior.onInput(this, event);
     }
     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-mat-input-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: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <textarea
-        matInput
-        [id]="id"
-        [rows]="rows()"
-        [cols]="cols()"
-        [value]="value"
-        [readonly]="readonly"
-        [disabled]="disabled"
-        [placeholder]="placeholder"
-        style="padding-top: 5px"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-        (keydown.enter)="onEnter()"
-      ></textarea>
-
-      @if (loading()) {
-        <div class="absolute top-5 right-5 z-10">
-          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: InputTextareaComponent, isStandalone: true, selector: "nmf-mat-input-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: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <textarea
+        matInput
+        [id]="id"
+        [rows]="rows()"
+        [cols]="cols()"
+        [value]="value"
+        [readonly]="readonly"
+        [disabled]="disabled"
+        [placeholder]="placeholder"
+        style="padding-top: 5px"
+        (blur)="onTouched()"
+        (input)="onInput($event)"
+        (keydown.enter)="onEnter()"
+      ></textarea>
+
+      @if (loading()) {
+        <div class="absolute top-5 right-5 z-10">
+          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: InputTextareaComponent, decorators: [{
@@ -776,49 +776,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         MatProgressSpinnerModule,
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @if (label() && detachLabel()) {
-      <label class="font-medium text-base">{{ label() }}</label>
-    }
-    <mat-form-field
-      appearance="outline"
-      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
-    >
-      @if (label() && !detachLabel()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-
-      <textarea
-        matInput
-        [id]="id"
-        [rows]="rows()"
-        [cols]="cols()"
-        [value]="value"
-        [readonly]="readonly"
-        [disabled]="disabled"
-        [placeholder]="placeholder"
-        style="padding-top: 5px"
-        (blur)="onTouched()"
-        (input)="onInput($event)"
-        (keydown.enter)="onEnter()"
-      ></textarea>
-
-      @if (loading()) {
-        <div class="absolute top-5 right-5 z-10">
-          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
-        </div>
-      }
-
-      @if (hint()) {
-        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
-      }
-
-      @if (control().invalid && control().touched) {
-        <mat-error>
-          {{ getErrorMessage() }}
-        </mat-error>
-      }
-    </mat-form-field>
+                    template: `
+    @if (label() && detachLabel()) {
+      <label class="font-medium text-base">{{ label() }}</label>
+    }
+    <mat-form-field
+      appearance="outline"
+      [floatLabel]="shouldLabelFloat ? 'always' : 'auto'"
+    >
+      @if (label() && !detachLabel()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+
+      <textarea
+        matInput
+        [id]="id"
+        [rows]="rows()"
+        [cols]="cols()"
+        [value]="value"
+        [readonly]="readonly"
+        [disabled]="disabled"
+        [placeholder]="placeholder"
+        style="padding-top: 5px"
+        (blur)="onTouched()"
+        (input)="onInput($event)"
+        (keydown.enter)="onEnter()"
+      ></textarea>
+
+      @if (loading()) {
+        <div class="absolute top-5 right-5 z-10">
+          <mat-spinner diameter="20" strokeWidth="3"></mat-spinner>
+        </div>
+      }
+
+      @if (hint()) {
+        <mat-hint [ngClass]="hintClassList()">{{ hint() }}</mat-hint>
+      }
+
+      @if (control().invalid && control().touched) {
+        <mat-error>
+          {{ getErrorMessage() }}
+        </mat-error>
+      }
+    </mat-form-field>
   `,
                 }]
         }] });