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

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { ProgressAnimation } from './progress.animation';

@Component({
  selector: 'nj-progress',
  templateUrl: './progress.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [ProgressAnimation.progressFill],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [CommonModule]
})
export class ProgressComponent {
  /**
   * @ignore
   */
  private readonly progressClassName = 'nj-progress';

  /**
   * Label of the progressbar
   */
  @Input() label: string;
  /**
   * Progress value
   */
  @Input() value = 0;

  /**
   * Whether progress description is shown on the right/bottom or hidden
   */
  @Input() descriptionPosition: 'right' | 'bottom' | 'none' = 'none';

  /**
   * Progress min
   */
  @Input() min = 0;

  /**
   * Progress max
   */
  @Input() max = 100;

  /**
   * Whether progress is animated at first render
   */
  @Input() isAnimated = true;

  /**
   * Whether progress has css transitions for progress width
   */
  @Input() hasTransition = false;

  /**
   * Decimal precision of the description text
   */
  @Input() decimalPrecision = 0;

  constructor() {}

  /**
   * @ignore
   */
  getTransitionClass(): string {
    return this.hasTransition ? `${this.progressClassName}--has-transition` : '';
  }

  /**
   * @ignore
   */
  getDescriptionPositionClass(): string {
    return this.descriptionPosition === 'right' ? `${this.progressClassName}--has-right-description` : '';
  }

  /**
   * @ignore
   */
  getFormattedValue(): number {
    if (this.value > this.max) {
      return this.max;
    } else if (this.value < this.min) {
      return this.min;
    } else {
      return this.value;
    }
  }

  /**
   * @ignore
   */
  getFormattedPercentage(): string {
    if (this.value < this.min) {
      return '0';
    } else if (this.value > this.max) {
      return '100';
    }
    return Number(((this.getFormattedValue() - this.min) / (this.max - this.min)) * 100).toFixed(this.decimalPrecision);
  }
}