
@if (componentInput.TIPO_CAMPO === 'text' || componentInput.TIPO_CAMPO === 'number' || componentInput.TIPO_CAMPO === 'email') {

  <mat-form-field appearance="outline" class="w-100">
    <mat-label>{{ componentInput.ETIQUETA }}</mat-label>
    <input 
      matInput 
      [id]="componentInput.IDENTIFICADOR"
      [type]="componentInput.TIPO_CAMPO" 
      [name]="componentInput.NOMBRE_CAMPO"
      [placeholder]="componentInput.PLACEHOLDER"
      [readonly]="readonly"
      [formControl]="formControl"
      (keyup)="dataValue.emit(this.formControl)"
    />
    @if (componentInput.ICONO !== null) {
      <mat-icon matSuffix>{{ componentInput.ICONO }}</mat-icon>
    }
    @if (formControl.hasError('required')) {
      <mat-error [title]="'El campo '+componentInput.ETIQUETA+' es obligatorio'">
        El campo <b>{{ componentInput.ETIQUETA }}</b> es obligatorio
      </mat-error>
    }

    @if (formControl.hasError('maxlength')) {
      <mat-error [title]="'El campo '+componentInput.ETIQUETA+' debe tener una longitud máxima de '+componentInput.LONGITUD_CAMPO_MAXIMO">
        El campo <b>{{ componentInput.ETIQUETA }}</b> debe tener una longitud máxima de {{ componentInput.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
    }
    @if (formControl.hasError('minLength')) {
      <mat-error [title]="'El campo '+componentInput.ETIQUETA+' debe tener una longitud mínima de '+componentInput.LONGITUD_CAMPO_MINIMO">
        El campo <b>{{ componentInput.ETIQUETA }}</b> debe tener una longitud mínima de {{ componentInput.LONGITUD_CAMPO_MINIMO }}
      </mat-error>
    }
    @if (formControl.hasError('max')) {
      <mat-error [title]="'El campo '+componentInput.ETIQUETA+' es obligatorio'">
        El campo <b>{{ componentInput.ETIQUETA }}</b> debe tener un valor máximo de {{ componentInput.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
    }
    @if (formControl.hasError('min')) {
      <mat-error [title]="'El campo '+componentInput.ETIQUETA+' es obligatorio'">
        El campo <b>{{ componentInput.ETIQUETA }}</b> debe tener un valor mínimo de {{ componentInput.LONGITUD_CAMPO_MAXIMO }}
      </mat-error>
    }
    @if (formControl.hasError('pattern')) {
      <mat-error [title]="componentInput.MENSAJE_ERROR_VALIDACION">
        {{ componentInput.MENSAJE_ERROR_VALIDACION }}
      </mat-error>
    }

    @if (!hasPermission) {
      <mat-hint>No tiene permiso para modificar este campo</mat-hint>
    } 
  </mat-form-field>

}