<commit_before><!-- STANDARD MODE -->
<ng-container *ngIf="!isVisual">

  <mat-radio-group
    class="c-radio qa-radio-group"
    [disabled]="isDisabled"
    [required]="isRequired"
    [class.c-radio--sublabel]="formatUISubLabelFn"
    [(ngModel)]="value"
  >
    <ng-container *ngFor="let option of options; trackBy: trackByFn">

      <mat-radio-button
        class="c-radio__control qa-radio-control"
        [value]="retrieveValue(option, formatModelValueFn)"
        [disabled]="option.disabled"
        [name]="id"
        (change)="radioGroupChange($event)"
        #radio="matRadioButton"
      >
        {{ retrieveValue(option, formatUILabelFn) }}

        <small
          class="c-radio__control-sublabel"
          *ngIf="formatUISubLabelFn"
        >
          {{ retrieveValue(option, formatUISubLabelFn) }}
        </small>
      </mat-radio-button>

    </ng-container>

    <ts-validation-messages
      class="qa-radio-validation-messages"
      *ngIf="formControl"
      [control]="formControl"
      [validateImmediately]="true"
    ></ts-validation-messages>
  </mat-radio-group>

</ng-container>


<!-- VISUAL MODE -->
<ng-container *ngIf="isVisual">

  <fieldset
    class="c-radio c-radio--visual qa-radio-group"
    [class.c-radio--small]="small"
  >
    <legend class="c-radio__legend">
      {{ label }}
    </legend>

    <div class="c-radio__options">
      <ng-container *ngFor="let option of options; trackBy: trackByFn">
        <label
          class="c-radio__control qa-radio-control"
          [class.c-radio__control--disabled]="isDisabled || option.disabled"
          (click)="visualRadioGroupChange(option)"
        >
          <input
            type="radio"
            class="c-radio__input"
            value="{{ retrieveValue(option, formatModelValueFn) }}"
            [attr.name]="id"
            [attr.disabled]="(isDisabled || option.disabled) ? 'disabled' : null"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
            [attr.checked]="retrieveValue(option, formatModelValueFn) === value"
            [(ngModel)]="value"
          >
          <div
            class="c-radio__content"
            [class.c-radio__content--disabled]="isDisabled || option.disabled"
            [class.c-radio__content--centered]="centeredContent"
            mat-ripple
            [matRippleDisabled]="(isDisabled || option.disabled) ? 'disabled' : null"
            [matRippleColor]="rippleColor"<commit_msg>fix(RadioGroup): radio groups now isolated correctly via the name property<commit_after><!-- STANDARD MODE -->
<ng-container *ngIf="!isVisual">

  <mat-radio-group
    class="c-radio qa-radio-group"
    [disabled]="isDisabled"
    [required]="isRequired"
    [class.c-radio--sublabel]="formatUISubLabelFn"
    [(ngModel)]="value"
  >
    <ng-container *ngFor="let option of options; trackBy: trackByFn">

      <mat-radio-button
        class="c-radio__control qa-radio-control"
        [value]="retrieveValue(option, formatModelValueFn)"
        [disabled]="option.disabled"
        [name]="id"
        (change)="radioGroupChange($event)"
        #radio="matRadioButton"
      >
        {{ retrieveValue(option, formatUILabelFn) }}

        <small
          class="c-radio__control-sublabel"
          *ngIf="formatUISubLabelFn"
        >
          {{ retrieveValue(option, formatUISubLabelFn) }}
        </small>
      </mat-radio-button>

    </ng-container>

    <ts-validation-messages
      class="qa-radio-validation-messages"
      *ngIf="formControl"
      [control]="formControl"
      [validateImmediately]="true"
    ></ts-validation-messages>
  </mat-radio-group>

</ng-container>


<!-- VISUAL MODE -->
<ng-container *ngIf="isVisual">

  <fieldset
    class="c-radio c-radio--visual qa-radio-group"
    [class.c-radio--small]="small"
  >
    <legend class="c-radio__legend">
      {{ label }}
    </legend>

    <div class="c-radio__options">
      <ng-container *ngFor="let option of options; trackBy: trackByFn">
        <label
          class="c-radio__control qa-radio-control"
          [class.c-radio__control--disabled]="isDisabled || option.disabled"
          (click)="visualRadioGroupChange(option)"
        >
          <input
            type="radio"
            class="c-radio__input"
            [name]="id"
            [value]="retrieveValue(option, formatModelValueFn)"
            [disabled]="(isDisabled || option.disabled)"
            [checked]="retrieveValue(option, formatModelValueFn) === value"
            [attr.aria-label]="ariaLabel"
            [attr.aria-labelledby]="ariaLabelledby"
            [attr.aria-describedby]="ariaDescribedby"
            [(ngModel)]="value"
          >
          <div
            class="c-radio__content"
            [class.c-radio__content--disabled]="isDisabled || option.disabled"
            [class.c-radio__content--centered]="centeredContent"
            mat-ripple
            [matRippleDisabled]="(isDisabled || option.disabled) ? 'disabled' : null"
            [matRippleColor]="rippleColor"
{'fraction_non_alphanumeric': 0.152734375, 'fraction_numerical': 0.0, 'mean_word_length': 2.5195876288659793, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4149597', 'n_tokens_mistral': 1616, 'n_tokens_neox': 1563, 'n_words': 211}