<!-- SELECT NORMAL -->
<mat-form-field appearance="outline" *ngIf="tag === 'select' && !multiSelect && !groupSelect">
  <mat-label>{{ label }}</mat-label>
  <mat-select
    #valueData
    (ngModelChange)="setValue($event)"
    [disabled]="disabled"
    [value]="value"
    [required]="required"
    [id]="id"
    [attr.data-name]="name">
    <mat-option *ngIf="!required">-- Niniguno --</mat-option>
    <mat-option *ngFor="let dataSelect of arrDataSelect" [value]="dataSelect.valor">{{ dataSelect.opcion }}</mat-option>
  </mat-select>
  <mat-icon matSuffix *ngIf="icon !== null">{{ icon }}</mat-icon>
</mat-form-field>

<!-- SELECT MULTIPLE -->
<mat-form-field appearance="outline" *ngIf="tag === 'select' && multiSelect">
  <mat-label>{{ label }}</mat-label>
  <mat-select
    #valueData
    (ngModelChange)="setValue($event)"
    multiple
    [disabled]="disabled"
    [value]="value"
    [required]="required"
    [id]="id">
    <mat-option *ngIf="!required">-- Niniguno --</mat-option>
    <mat-option *ngFor="let dataSelect of arrDataSelect" [value]="dataSelect.valor">{{ dataSelect.opcion }}</mat-option>
  </mat-select>
  <mat-icon matSuffix *ngIf="icon !== null">{{ icon }}</mat-icon>
</mat-form-field>

<!-- SELECT GRUPO -->
<mat-form-field appearance="outline" *ngIf="tag === 'select' && groupSelect">
  <mat-label>{{ label }}</mat-label>
  <mat-select
    #valueData
    (ngModelChange)="setValue($event)"
    [disabled]="disabled"
    [value]="value"
    [required]="required"
    [id]="id">
    <mat-option *ngIf="!required">-- Niniguno --</mat-option>
    <mat-optgroup *ngFor="let groups of arrDataSelect" [label]="groups.grupo">
      <mat-option *ngFor="let dataGroup of groups.datos" [value]="dataGroup.valor">{{ dataGroup.opcion }}</mat-option>
    </mat-optgroup>
  </mat-select>
  <mat-icon matSuffix *ngIf="icon !== null">{{ icon }}</mat-icon>
</mat-form-field>
