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

Fluid Design System Angular

import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component, Input, TemplateRef} from '@angular/core';
import {tooltipAnimation} from './tooltip.animations';
import {TooltipArrowPlacement, TooltipPlacement} from './tooltip.model';

@Component({
  selector: 'nj-tooltip',
  templateUrl: './tooltip.component.html',
  styleUrls: ['./tooltip.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [tooltipAnimation.tooltip],
  standalone: true,
  imports: [CommonModule]
})
export class TooltipComponent {

  /**
   * @ignore
   */
  private readonly tooltipClassName = 'nj-tooltip';

  /**
   * Whether tooltip is inverse or no
   */
  @Input() isInverse: boolean;

  /**
   * Whether tooltip has arrow or no
   */
  @Input() hasArrow = true;

  /**
   * Tooltip label, if you want custom content unset the label and place content as element children
   * e.g: `<nj-tooltip>Your Content</nj-tooltip>`
   */
  @Input() label: string;

  /**
   * Tooltip id
   */
  @Input() tooltipId: string;

  /**
   * Tooltip placement
   */
  @Input() placement: TooltipPlacement = 'top';

  /**
   * Tooltip arrow placement
   */
  @Input() arrowPlacement: TooltipArrowPlacement = 'center';

  /**
   * Whether tooltip management is standalone
   */
  @Input() isStandalone: boolean = true;

  /**
   * Whether tooltip is animated
   */
  @Input() isAnimated = true;

  /**
   * Tooltip custom template ref
   */
  @Input() contentTemplateRef: TemplateRef<any>;

  constructor() {
  }

  /**
   * @ignore
   */
  getPlacementClass(): string {
    if (!this.placement) {
      return '';
    }
    return `${this.tooltipClassName}--${this.placement}`;
  }


  /**
   * @ignore
   */
  getTooltipArrowPlacement(): string {
    if (!this.arrowPlacement) {
      return '';
    }
    return `${this.tooltipClassName}__arrow--${this.arrowPlacement}`;
  }

  /**
   * @ignore
   */
  getIsInverseClass(): string {
    return this.isInverse ? `${this.tooltipClassName}--inverse` : '';
  }

  /**
   * @ignore
   */
  getIsStandaloneClass(): string {
    return this.isStandalone ? `${this.tooltipClassName}--standalone` : '';
  }
}