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

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
import { IconButtonComponent } from '../icon-button/icon-button.component';
import { StatusIndicatorComponent } from '../status-indicator/status-indicator.component';
import { InlineMessageVariant } from './inline-message.model';

@Component({
  selector: 'nj-inline-message',
  templateUrl: './inline-message.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [IconButtonComponent, StatusIndicatorComponent, CommonModule]
})
export class InlineMessageComponent {
  /**
   * @ignore
   */
  private readonly inlineMessageClass = 'nj-inline-message';

  /**
   * Inline message variant
   */
  @Input() variant: InlineMessageVariant = 'error';

  /**
   * Whether inline message has status indicator or not
   */
  @Input() hasStatus = true;

  /**
   * Whether inline message is closeable or not
   */
  @Input() isClosable = false;

  /**
   * Output event when inline message is closed
   */
  @Output() closeClick = new EventEmitter<Event>();

  constructor(private el: ElementRef) {}

  /**
   * @ignore
   */
  getVariantClass(): string {
    if (!this.variant && this.variant === 'error') {
      return '';
    }
    return `${this.inlineMessageClass}--${this.variant}`;
  }

  /**
   * @ignore
   */
  removeInlineMessage(event: MouseEvent) {
    this.el?.nativeElement?.remove();
    this.closeClick.emit(event);
  }

  /**
   * @ignore
   */
  get isFatalError() {
    return this.variant === 'fatal-error';
  }
}