@engie-group/fluid-design-system-angular/src/components/radio/radio.component.ts

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { RadioSize } from './radio.model';

@Component({
  selector: 'nj-radio',
  templateUrl: './radio.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule],
  host: {
    '[class]': 'classes'
  }
})
export class RadioComponent {
  private readonly radioClassName = 'nj-radio';

  /**
   * Input id
   */
  @Input() inputId: string;

  /**
   * Input name
   */
  @Input() name: string;

  /**
   * Whether input is required or not
   */
  @Input() required?: boolean;

  /**
   * Whether the radio is checked or not
   */
  @Input() isChecked = false;

  /**
   * Input value
   */
  @Input() value: string;

  /**
   * Whether the radio is disabled or not
   */
  @Input() isDisabled?: boolean;

  /**
   * Radio size
   */
  @Input() size?: RadioSize = 'md';

  /**
   * Text alternative for assistive technologies
   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
   */
  @Input() ariaLabel?: string;

  /**
   * Text alternative for assistive technologies based on visible text
   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby
   */
  @Input() ariaLabelledby?: string;

  /**
   * Output that emits checked value on change only
   */
  @Output() valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor(private cdr: ChangeDetectorRef) {}

  /**
   * @ignore
   */
  onInputChange(event: Event) {
    event.stopPropagation();
    this.isChecked = !this.isChecked;
    this.valueChange.emit(this.isChecked);
  }

  /**
   * @ignore
   */
  _markForCheck() {
    this.cdr.markForCheck();
  }

  protected get classes() {
    const classes = [this.radioClassName];

    if (this.size && this.size !== 'md') {
      classes.push(`${this.radioClassName}--${this.size}`);
    }

    return classes;
  }
}