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

Fluid Design System Angular

import {CommonModule} from '@angular/common';
import {AfterViewInit, ChangeDetectionStrategy, Component, Input, ViewChild} from '@angular/core';
import {StatusIndicatorSize, StatusIndicatorStatus} from './status-indicator.model';

@Component({
  selector: 'nj-status-indicator',
  templateUrl: './status-indicator.component.html',
  styleUrls: ['./status-indicator.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [CommonModule]
})
export class StatusIndicatorComponent implements AfterViewInit {

  private readonly statusIndicatorClass = 'nj-status-indicator';

  private readonly statusIndicatorClasses = {
    offline: `${this.statusIndicatorClass}--offline`,
    online: `${this.statusIndicatorClass}--online`,
    away: `${this.statusIndicatorClass}--away`,
    'do-not-disturb': `${this.statusIndicatorClass}--do-not-disturb`,
    busy: `${this.statusIndicatorClass}--busy`,
    unknown: `${this.statusIndicatorClass}--unknown`,
    error: `${this.statusIndicatorClass}--error`,
    success: `${this.statusIndicatorClass}--success`,
    warning: `${this.statusIndicatorClass}--warning`,
    'in-progress': `${this.statusIndicatorClass}--in-progress`,
    information: `${this.statusIndicatorClass}--information`,
    discovery: `${this.statusIndicatorClass}--discovery`,
    planet: `${this.statusIndicatorClass}--planet`,
  };

  /**
   * Status Indicator status
   */
  @Input() status: StatusIndicatorStatus = 'online';

  /**
   * Status Indicator status
   */
  @Input() size: StatusIndicatorSize;

  /**
   * @ignore
   */
  @ViewChild('labelWrapper') labelWrapper;

  /**
   * Whether status indicator has label
   */
  hasLabel: boolean;

  constructor() {
  }

  ngAfterViewInit() {
    this.hasLabel = this.labelWrapper.nativeElement && this.labelWrapper.nativeElement.innerHTML !== '';
  }

  getStatusClass(): string {
    const statusClass = this.statusIndicatorClasses[this.status];
    if (!this.status || !statusClass) {
      return '';
    }
    return statusClass;
  }

  getSizeClass(): string {
    if (!this.size || this.size === 'md') {
      return '';
    }
    return `${this.statusIndicatorClass}--${this.size}`;
  }
}