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

Fluid Design System Angular

import {CommonModule} from '@angular/common';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  EventEmitter,
  Input,
  Output,
  TemplateRef,
  ViewChild,
  ViewEncapsulation
} from '@angular/core';
import {BadgeComponent} from '../badge/badge.component';

type TBadgeOptions = Omit<BadgeComponent, 'size' | 'iconName' >;

@Component({
  selector: 'nj-tab',
  templateUrl: './tab.component.html',
  styleUrls: ['./tab.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [CommonModule, BadgeComponent]
})
export class TabComponent {

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

  /**
   * Aria controls, for accessibility reasons
   */
  @Input() ariaControls: string;

  /**
   * Id of the tab
   */
  @Input() id: string;

  /**
   * Id of the content
   */
  @Input() tabContentId: string;

  /**
   * Aria labelled by which will be set on the content, for accessibility reasons
   */
  @Input() tabContentAriaLabelledBy: string;

  /**
   * Whether tab is active or not
   */
  @Input() isActive: boolean;

  /**
   * Options for the badge inside the tab
   */
  @Input() badgeOptions?: TBadgeOptions;

  /**
   * @ignore
   */
  @ViewChild('contentTemplate') contentTemplateRef: TemplateRef<any>;

  /**
   * @ignore
   */
  @ViewChild('tab') tab: ElementRef<HTMLButtonElement>;

  /**
   * Output that emits if tab is selected
   */
  @Output() tabSelect: EventEmitter<void> = new EventEmitter<void>();

  /**
   * Output that emits keyboard event
   */
  @Output() tabMove: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();

  constructor(private cdr: ChangeDetectorRef) {
  }

  /**
   * @ignore
   */
  setIsActive(isActive) {
    this.isActive = isActive;
    this.cdr.markForCheck();
  }
}