<h1 mat-dialog-title class="prevent-select">Seleccionar valor</h1>
<div mat-dialog-content class="prevent-select">
  <p><b>Campo: </b>{{ tagData }}</p>
  <mat-form-field class="w-100 mt-8" appearance="outline">
    <mat-label>Seleccione un nuevo valor</mat-label>
    <mat-select #newValue (valueChange)="newValueChange(newValue.value)">
      <mat-option [value]="null">Sin valor</mat-option>
      <mat-optgroup label="Datos de la orden">
        <mat-option *ngFor="let item of orderData" [value]="item.value">
          <b>{{ item.label }}: </b>{{ item.value }}
        </mat-option>
      </mat-optgroup>
      <mat-optgroup label="Datos del formulario">
        <mat-option *ngFor="let item of orderFormData" [value]="item.value">
          <b>{{ item.label }}: </b>{{ item.value }}
        </mat-option>
      </mat-optgroup>
      <mat-optgroup label="Otros">
        <mat-option value="OTR">Personalizado...</mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
  <mat-form-field class="w-100 mt-8" appearance="outline">
    <mat-label>Valor actual del campo</mat-label>
    <input matInput [formControl]="currentFieldValue" (input)="valueInput(value.value)" #value>
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="valueData == null || currentFieldValue.invalid" [mat-dialog-close]="valueData">Asignar valor</button>
</div>