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

Fluid Design System Angular

import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
import {IconComponent} from '../icon/icon.component';
import {IconButtonSize, IconButtonVariant} from './icon-button.model';

@Component({
  selector: 'nj-icon-button',
  templateUrl: './icon-button.component.html',
  styleUrls: ['./icon-button.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: [IconComponent, CommonModule]
})
export class IconButtonComponent {
  private readonly ICON_BUTTON_CLASS_NAME = 'nj-icon-btn';

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

  /**
   * For toggle buttons, indicate the state
   */
  @Input() ariaPressed?: boolean;

  /**
   * Additional description for assistive technologies based on visible text
   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
   */
  @Input() ariaDescribedby?: string;

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

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

  /**
   * Button variant theme
   * @default `primary`
   */
  @Input() variant: IconButtonVariant;

  /**
   * Button size
   * @default `xs`
   */
  @Input() size: IconButtonSize;

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

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

  /**
   * Text alternative for assistive technologies
   */
  @Input() label: string;

  /**
   * Additional icon-button css classes
   */
  @Input() additionalClass?: string;

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

  constructor() {
  }

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

  /**
   * @ignore
   */
  getIconButtonSizeClass(): string {
    if (!this.size || this.size === 'xs') {
      return '';
    }
    return `${this.ICON_BUTTON_CLASS_NAME}--${this.size}`;
  }
}