@if ( componentSelect.TIPO_SELECT === 'NORMAL' ) {
  @if (!isLoading) {
      <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ componentSelect.ETIQUETA }}</mat-label>
          <mat-select [formControl]="formControl">
              @if (!require) {
                  <mat-option [value]="null"></mat-option>
              }
              @for ( dataInfo of arrDataInformation; track dataInfo ) {
                  <mat-option [value]="dataInfo.VALOR_CAMPO">{{ dataInfo.NOMBRE_CAMPO }}</mat-option>
              }
          </mat-select>
          @if (componentSelect.ICONO !== null) {
              <mat-icon matSuffix>{{ componentSelect.ICONO }}</mat-icon>
          }
          @if (formControl.hasError('required')) {
              <mat-error [title]="'El campo '+componentSelect.ETIQUETA+' es obligatorio'">
                  El campo <b>{{ componentSelect.ETIQUETA }}</b> es obligatorio
              </mat-error>
          }
          @if (!hasPermission) {
              <mat-hint>No tiene permiso para modificar este campo</mat-hint>
          }
      </mat-form-field>
  } @else {
      <div class="container-load-form">
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
  }
}


@if ( componentSelect.TIPO_SELECT === 'MULTIPLE' ) {
  @if (!isLoading) {
      <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ componentSelect.ETIQUETA }}</mat-label>
          <mat-select [formControl]="formControl" multiple>
              @if (!require) {
                  <mat-option [value]="null"></mat-option>
              }
              @for ( dataInfo of arrDataInformation; track dataInfo ) {
                  <mat-option [value]="dataInfo.VALOR_CAMPO">{{ dataInfo.NOMBRE_CAMPO }}</mat-option>
              }
          </mat-select>
          @if (componentSelect.ICONO !== null) {
              <mat-icon matSuffix>{{ componentSelect.ICONO }}</mat-icon>
          }
          @if (formControl.hasError('required')) {
              <mat-error [title]="'El campo '+componentSelect.ETIQUETA+' es obligatorio'">
                  El campo <b>{{ componentSelect.ETIQUETA }}</b> es obligatorio
              </mat-error>
          }
          @if (!hasPermission) {
              <mat-hint>No tiene permiso para modificar este campo</mat-hint>
          }
      </mat-form-field>
  } @else {
      <div class="container-load-form">
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
  }
}