<div class="w-100" [formGroup]="activatorFieldsFormGroup">
  <div class="form-column pt-4" *ngIf="formType == 'screen'">
    <div class="section-divider">Configuración del activador</div>
    <div class="form-row">
      <div class="form-cell C03" *ngIf="action == 'editar'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>ID activador</mat-label>
          <input matInput formControlName="activatorIDControl">
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Tipo de activador</mat-label>
          <mat-select formControlName="activatorTypeControl">
            <mat-option value="CA">Calendario</mat-option>
            <mat-option value="SI">Síntoma</mat-option>
            <mat-option value="ME">Medida</mat-option>
            <mat-option value="VA">Valor</mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Prioridad</mat-label>
          <mat-select formControlName="priorityControl">
            <mat-option *ngFor="let item of orderPriorities" [value]="item.value">
              <span style="font-weight: 500;" [style.color]="item.color">{{ item.label }}</span>
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['priorityControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Color</mat-label>
          <input matInput formControlName="eventColorControl">
          <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger formControlName="colorPickerControl"></ngx-colors>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['eventColorControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
          <mat-error *ngIf="!activatorFieldsFormGroup.controls['eventColorControl'].hasError('required')">
            El color ingresado es inválido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Contador relacionado</mat-label>
          <mat-select #counterSelect formControlName="counterControl">
            <mat-option *ngFor="let counter of counters" [value]="counter.ID_CONTADOR">
              Contador #{{ counter.ID_CONTADOR }}
            </mat-option>
          </mat-select>
          <mat-hint align="end">
            <a [ngClass]="{ hint_button_disabled: activatorFieldsFormGroup.controls['counterControl'].invalid,  
            hint_button: activatorFieldsFormGroup.controls['counterControl'].valid}" (click)="counterDetails(counterSelect.value)">
              Ver detalles
            </a>
          </mat-hint>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['counterControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
    </div>
    <div class="section-divider">Configuración de las condiciones de activación</div>
    <div class="form-row animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'CA' || 
    activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
      <div class="form-cell C03 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
        <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingSymptoms">
          <mat-label>Síntoma relacionado</mat-label>
          <input matInput [matAutocomplete]="completeSymptom" formControlName="symptomControl" #symptom (blur)="verifySymptom(symptom.value)">
          <mat-autocomplete autoActiveFirstOption #completeSymptom (optionSelected)="verifySymptom(symptom.value)">
            <mat-option *ngFor="let symptom of filteredSymptoms | async" [value]="symptom">
              {{ symptom }}
            </mat-option>
          </mat-autocomplete>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['symptomControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
        <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn mb-20" *ngIf="loadingSymptoms"></mat-progress-bar>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Fecha de inicio</mat-label>
          <input matInput [matDatepicker]="startDatePicker" formControlName="startDateControl">
          <mat-datepicker-toggle matIconSuffix [for]="startDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #startDatePicker></mat-datepicker>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startDateControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Hora de inicio</mat-label>
          <mat-select formControlName="startHourControl">
            <mat-option *ngFor="let hour of hoursArr" [value]="hour.value">
              {{ hour.label }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startHourControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Repetición</mat-label>
          <mat-select formControlName="repeatControl">
            <mat-option value="NR">No se repite</mat-option>
            <mat-option value="SE" *ngIf="startDate != null">
              Semanalmente los {{ DAYS[startDate.getDay()] }}
            </mat-option>
            <mat-option value="ME" *ngIf="startDate != null">
              Mensualmente los días {{ startDate.getDate() }}
            </mat-option>
            <mat-option value="AN" *ngIf="startDate != null">
              Anualmente el {{ startDate.getDate() }} de {{ MONTHS[startDate.getMonth()] }}
            </mat-option>
            <mat-option value="TD" *ngIf="startDate != null">
              Todos los días a partir del {{ DAYS[startDate.getDay()] }} {{ startDate.getDate() }} de {{ MONTHS[startDate.getMonth()] }} del {{ startDate.getFullYear() }}
            </mat-option>
            <mat-option value="PE" *ngIf="startDate != null">
              Personalizado...
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="activatorFieldsFormGroup.controls['repeatControl'].value == 'PE'" [matTooltip]="customDisplayed">
            {{ customDisplayed }}
          </mat-hint>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startHourControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'CA'"></div>
    </div>
    <div class="form-row animated fadeIn" *ngIf="selectedSymptom != null && activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
      <div class="form-cell C03 form-cell-text">
        <span class="bold">Clasificación: </span>{{ selectedSymptom.CLASIFICACION }}
      </div>
      <div class="form-cell C03 form-cell-text">
        <span class="bold">Valor límite: </span>{{ selectedSymptom.LIMITE_VALOR }} {{ selectedSymptom.ACRONIMO_MEDIDA }}
      </div>
      <div class="form-cell C06 form-cell-text">
        <span class="bold">Descripción: </span>{{ selectedSymptom.DESCRIPCION }}
      </div>
      <div class="form-cell C12 form-cell-text">
        <span class="bold">Solución: </span>{{ selectedSymptom.SOLUCION }}
      </div>
    </div>
    <div class="form-row animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME' || 
    activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
      <div class="form-cell C03 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor mínimo</mat-label>
          <input matInput formControlName="minValueControl" #minValue (input)="validateNumber('minValueControl', minValue.value, 'input')" 
          (blur)="validateNumber('minValueControl', minValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['minValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor máximo</mat-label>
          <input matInput formControlName="maxValueControl" #maxValue (input)="validateNumber('maxValueControl', maxValue.value, 'input')" 
          (blur)="validateNumber('maxValueControl', maxValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['maxValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Comparación</mat-label>
          <mat-select formControlName="comparisonControl">
            <mat-option value="AC">Acumulado</mat-option>
            <mat-option value="UR">Último registro</mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['comparisonControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor límite</mat-label>
          <input matInput formControlName="limitValueControl" #limitValue (input)="validateNumber('limitValueControl', limitValue.value, 'input')" 
          (blur)="validateNumber('limitValueControl', limitValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['limitValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Magnitud</mat-label>
          <mat-select formControlName="magnitudeControl" #magnitudeSel (valueChange)="searchMagnitudeUnits(magnitudeSel.value)">
            <mat-option *ngFor="let magnitude of magnitudes" [value]="magnitude.ID_MAGNITUD">
              {{ magnitude.MAGNITUD }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['magnitudeControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C03">
        <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingUnits">
          <mat-label>Unidad</mat-label>
          <mat-select formControlName="unitControl">
            <mat-option *ngFor="let unit of units" [value]="unit.ID_UNIDAD">
              {{ unit.NOMBRE_UNIDAD }} - {{ unit.ACRONIMO_UNIDAD }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['unitControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
        <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn mb-20" *ngIf="loadingUnits"></mat-progress-bar>
      </div>
    </div>
    <div class="form-row animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == null || 
    activatorFieldsFormGroup.controls['activatorTypeControl'].value == undefined || activatorFieldsFormGroup.controls['activatorTypeControl'].value == ''">
      <div class="form-cell-text C12 center_text">
        Seleccione un tipo de activador para comenzar
      </div>
    </div>
    <div class="form-row mt-64">
      <button mat-raised-button color="primary"  class="override_no_shadow white_font blue_send_background" [disabled]="activatorFieldsFormGroup.invalid" (click)="returnActivatorData()">
        <mat-icon>save</mat-icon> {{ action == 'editar' ? 'Guardar cambios' : 'Registrar activador' }}
      </button>
    </div>
  </div>
  <div class="form-column" *ngIf="formType == 'dialog'">
    <div class="section-divider">Configuración del activador</div>
    <div class="form-row">
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Tipo de activador</mat-label>
          <mat-select formControlName="activatorTypeControl">
            <mat-option value="CA">Calendario</mat-option>
            <mat-option value="SI">Síntoma</mat-option>
            <mat-option value="ME">Medida</mat-option>
            <mat-option value="VA">Valor</mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Prioridad</mat-label>
          <mat-select formControlName="priorityControl">
            <mat-option *ngFor="let item of orderPriorities" [value]="item.value">
              <span style="font-weight: 500;" [style.color]="item.color">{{ item.label }}</span>
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['priorityControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Color</mat-label>
          <input matInput formControlName="eventColorControl">
          <ngx-colors style="margin-left: -16px;" matSuffix ngx-colors-trigger formControlName="colorPickerControl"></ngx-colors>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['eventColorControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
          <mat-error *ngIf="!activatorFieldsFormGroup.controls['eventColorControl'].hasError('required')">
            El color ingresado es inválido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Contador relacionado</mat-label>
          <mat-select #counterSelect formControlName="counterControl">
            <mat-option *ngFor="let counter of counters" [value]="counter.ID_CONTADOR">
              Contador #{{ counter.ID_CONTADOR }}
            </mat-option>
          </mat-select>
          <mat-hint align="end">
            <a [ngClass]="{ hint_button_disabled: activatorFieldsFormGroup.controls['counterControl'].invalid,  
            hint_button: activatorFieldsFormGroup.controls['counterControl'].valid}" (click)="counterDetails(counterSelect.value)">
              Ver detalles
            </a>
          </mat-hint>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['counterControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
    </div>
    <div class="section-divider">Configuración de las condiciones de activación</div>
    <div class="form-row animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'CA' || 
    activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
      <div class="form-cell C06 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
        <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingSymptoms">
          <mat-label>Síntoma relacionado</mat-label>
          <input matInput [matAutocomplete]="completeSymptom" formControlName="symptomControl" #symptom (blur)="verifySymptom(symptom.value)">
          <mat-autocomplete autoActiveFirstOption #completeSymptom (optionSelected)="verifySymptom(symptom.value)">
            <mat-option *ngFor="let symptom of filteredSymptoms | async" [value]="symptom">
              {{ symptom }}
            </mat-option>
          </mat-autocomplete>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['symptomControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
        <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn mb-20" *ngIf="loadingSymptoms"></mat-progress-bar>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Fecha de inicio</mat-label>
          <input matInput [matDatepicker]="startDatePicker" formControlName="startDateControl">
          <mat-datepicker-toggle matIconSuffix [for]="startDatePicker"></mat-datepicker-toggle>
          <mat-datepicker #startDatePicker></mat-datepicker>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startDateControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Hora de inicio</mat-label>
          <mat-select formControlName="startHourControl">
            <mat-option *ngFor="let hour of hoursArr" [value]="hour.value">
              {{ hour.label }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startHourControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Repetición</mat-label>
          <mat-select formControlName="repeatControl">
            <mat-option value="NR">No se repite</mat-option>
            <mat-option value="SE" *ngIf="startDate != null">
              Semanalmente los {{ DAYS[startDate.getDay()] }}
            </mat-option>
            <mat-option value="ME" *ngIf="startDate != null">
              Mensualmente los días {{ startDate.getDate() }}
            </mat-option>
            <mat-option value="AN" *ngIf="startDate != null">
              Anualmente el {{ startDate.getDate() }} de {{ MONTHS[startDate.getMonth()] }}
            </mat-option>
            <mat-option value="TD" *ngIf="startDate != null">
              Todos los días a partir del {{ DAYS[startDate.getDay()] }} {{ startDate.getDate() }} de {{ MONTHS[startDate.getMonth()] }} del {{ startDate.getFullYear() }}
            </mat-option>
            <mat-option value="PE" *ngIf="startDate != null">
              Personalizado...
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="activatorFieldsFormGroup.controls['repeatControl'].value == 'PE'" [matTooltip]="customDisplayed">
            {{ customDisplayed }}
          </mat-hint>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['startHourControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
    </div>
    <div class="form-row animated fadeIn" *ngIf="selectedSymptom != null && activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'SI'">
      <div class="form-cell C12 form-cell-text">
        <span class="bold">Clasificación: </span>{{ selectedSymptom.CLASIFICACION }}
      </div>
      <div class="form-cell C12 form-cell-text">
        <span class="bold">Valor límite: </span>{{ selectedSymptom.LIMITE_VALOR }} {{ selectedSymptom.ACRONIMO_MEDIDA }}
      </div>
      <div class="form-cell C12 form-cell-text">
        <span class="bold">Descripción: </span>{{ selectedSymptom.DESCRIPCION }}
      </div>
      <div class="form-cell C12 form-cell-text">
        <span class="bold">Solución: </span>{{ selectedSymptom.SOLUCION }}
      </div>
    </div>
    <div class="form-row animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME' || 
    activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
      <div class="form-cell C06 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor mínimo</mat-label>
          <input matInput formControlName="minValueControl" #minValue (input)="validateNumber('minValueControl', minValue.value, 'input')" 
          (blur)="validateNumber('minValueControl', minValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['minValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'ME'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor máximo</mat-label>
          <input matInput formControlName="maxValueControl" #maxValue (input)="validateNumber('maxValueControl', maxValue.value, 'input')" 
          (blur)="validateNumber('maxValueControl', maxValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['maxValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Comparación</mat-label>
          <mat-select formControlName="comparisonControl">
            <mat-option value="AC">Acumulado</mat-option>
            <mat-option value="UR">Último registro</mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['comparisonControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06 animated fadeIn" *ngIf="activatorFieldsFormGroup.controls['activatorTypeControl'].value == 'VA'">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Valor límite</mat-label>
          <input matInput formControlName="limitValueControl" #limitValue (input)="validateNumber('limitValueControl', limitValue.value, 'input')" 
          (blur)="validateNumber('limitValueControl', limitValue.value, 'blur')">
          <mat-error *ngIf="activatorFieldsFormGroup.controls['limitValueControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100" appearance="outline">
          <mat-label>Magnitud</mat-label>
          <mat-select formControlName="magnitudeControl" #magnitudeSel (valueChange)="searchMagnitudeUnits(magnitudeSel.value)">
            <mat-option *ngFor="let magnitude of magnitudes" [value]="magnitude.ID_MAGNITUD">
              {{ magnitude.MAGNITUD }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['magnitudeControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
      </div>
      <div class="form-cell C06">
        <mat-form-field class="w-100 animated fadeIn" appearance="outline" *ngIf="!loadingUnits">
          <mat-label>Unidad</mat-label>
          <mat-select formControlName="unitControl">
            <mat-option *ngFor="let unit of units" [value]="unit.ID_UNIDAD">
              {{ unit.NOMBRE_UNIDAD }} - {{ unit.ACRONIMO_UNIDAD }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="activatorFieldsFormGroup.controls['unitControl'].hasError('required')">
            Este campo es requerido.
          </mat-error>
        </mat-form-field>
        <mat-progress-bar mode="indeterminate" class="w-100 animated fadeIn mb-20" *ngIf="loadingUnits"></mat-progress-bar>
      </div>
    </div>
    <div class="form-row mt-16">
      <button mat-raised-button color="warn" class="mr-4 override_no_shadow" (click)="closeDialog()">
        <mat-icon>close</mat-icon> Cerrar
      </button>
      <button mat-raised-button color="primary" class="override_no_shadow" [disabled]="activatorFieldsFormGroup.invalid" (click)="returnActivatorData()">
        <mat-icon>save</mat-icon> {{ action == 'editar' ? 'Guardar cambios' : 'Registrar activador' }}
      </button>
    </div>
  </div>
</div>