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

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { SpinnerSize, SpinnerVariant } from './spinner.model';

@Component({
  selector: 'nj-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule]
})
export class SpinnerComponent {
  /**
   * @ignore
   */
  private spinnerClassName = 'nj-spinner';

  /**
   * Spinner variant
   */
  @Input() variant: SpinnerVariant = 'normal';

  /**
   * Spinner size
   */
  @Input() size: SpinnerSize = 'md';

  /**
   * Whether to render the content of the spinner,
   * the wrapper of the component beeing always rendered
   * to make the live region work properly.
   */
  @Input() isLoading: boolean;

  /**
   * Whether the spinner is rendered as a block (<div>) or an inline (<span>) element.
   */
  @Input() isBlock?: boolean = true;

  constructor() {}

  /**
   * @ignore
   */
  getSpinnerVariantClass(): string {
    if (!this.variant || this.variant === 'normal') {
      return '';
    }
    return `${this.spinnerClassName}--${this.variant}`;
  }

  /**
   * @ignore
   */
  getSpinnerSizeClass(): string {
    if (!this.size) {
      return '';
    }
    return `${this.spinnerClassName}--${this.size}`;
  }
}