<!-- INPUT NORMAL -->
<mat-form-field appearance="outline" class="color-tag" *ngIf="tag === 'input' && type !== 'date' && type !== 'file'" [color]="validatorData(valueData.value, pattern, required) ? 'primary' : 'warn'">
  <mat-label> {{ label }} </mat-label>
  <input
    matInput
    #valueData
    (keyup)="setValue($event)"
    [type]="type"
    [placeholder]="placeholder"
    [value]="value"
    [id]="id"
    [name]="name"
    [required]="required"
    [readonly]="readonly"
    [maxLength]="maxLength"
    [pattern]="pattern"
    [disabled]="disabled"
    (keyup)="validatorData(valueData.value, pattern, required)"
  />
  <mat-icon matSuffix *ngIf="icon === ''">{{ icon }}</mat-icon>
  <mat-hint *ngIf="validatorData(valueData.value, pattern, required)" style="color: warn !important;">El campo {{ label }} es requerido.</mat-hint>
</mat-form-field>

<!-- INPUT FILE -->
<div *ngIf="tag === 'input' && type === 'file'" style="width: 100% !important; flex-direction: column; display: inline-flex; padding-bottom: 1.34375em;">
  <div id="yourBtn" (click)="getFile()">
    <mat-icon matSuffix class="mr-5">{{ icon }}</mat-icon> {{ label }}
  </div>
  <input
    type="file"
    value="upload"
    #inputFile
    [disabled]="disabled"
    [id]="id"
    [name]="name"
    [required]="required"
    [accept]="accept_file"
    (change)="sub(inputFile) "/>
</div>

<!-- INPUT DATE -->
<mat-form-field appearance="outline" class="color-tag" *ngIf="tag == 'input' && type === 'date'">
  <mat-label> {{ label }} </mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="dataValue">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-icon matSuffix *ngIf="icon !== null">{{ icon }}</mat-icon>
</mat-form-field>
