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

Fluid Design System Angular

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { ButtonEmphasis, ButtonSize, buttonSizeToCSS, ButtonVariant } from './button.model';
import { SpinnerComponent } from '../spinner/spinner.component';

@Component({
  selector: 'nj-button',
  templateUrl: './button.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [IconComponent, CommonModule, SpinnerComponent]
})
export class ButtonComponent {
  /**
   * @ignore
   */
  private readonly buttonClassName = 'nj-btn';

  /**
   * Type of the button. Some values may be submit, reset...
   */
  @Input() type = 'button';

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

  /**
   * Whether button is loading or not
   */
  @Input() isLoading?: boolean;

  /**
   * Tab index, allows you to customize keyboard navigation
   */
  @Input() tabIndex?: number;

  /**
   * Button emphasis
   */
  @Input() emphasis: ButtonEmphasis = 'bold';

  /**
   * Button variant theme
   */
  @Input() variant: ButtonVariant = 'primary';

  /**
   * Button size
   */
  @Input() size?: ButtonSize;

  /**
   * Whether button has custom icon
   */
  @Input() hasCustomIcon = false;

  /**
   * Button material icon
   */
  @Input() icon?: string;

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

  /**
   * Button click output. Emits a MouseEvent
   */
  @Output() buttonClick = new EventEmitter<MouseEvent>();

  /**
   * @ignore
   */
  getButtonEmphasisClass(): string {
    if (!this.emphasis || this.emphasis === 'bold') {
      return '';
    }
    return `${this.buttonClassName}--${this.emphasis}`;
  }

  /**
   * @ignore
   */
  getButtonVariantClass(): string {
    if (!this.variant || this.variant === 'primary') {
      return '';
    }
    return `${this.buttonClassName}--${this.variant}`;
  }

  protected getButtonSizeClass(): string {
    if (!this.size || this.size === 'medium' || this.size === 'normal') {
      return '';
    }
    return `${this.buttonClassName}--${buttonSizeToCSS(this.size)}`;
  }

  /**
   * @ignore
   */
  getButtonIsLoadingClass(): string {
    return this.isLoading ? `${this.buttonClassName}--is-loading` : '';
  }
}