All files / tooltip si-tooltip.directive.ts

100% Statements 24/24
100% Branches 5/5
100% Functions 6/6
100% Lines 24/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111                                                    1x 1x             6x             6x         6x             6x         6x   6x     6x 6x     6x       5x 5x 1x   4x         4x         4x         2x 1x   1x           4x         2x 1x   1x      
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import {
  booleanAttribute,
  Directive,
  ElementRef,
  HostListener,
  inject,
  input,
  OnDestroy,
  TemplateRef
} from '@angular/core';
import { positions } from '@siemens/element-ng/common';
import { TranslatableString } from '@siemens/element-translate-ng/translate';
 
import { SiTooltipService, TooltipRef } from './si-tooltip.service';
 
@Directive({
  selector: '[siTooltip]',
  providers: [SiTooltipService],
  host: {
    '[attr.aria-describedby]': 'describedBy'
  }
})
export class SiTooltipDirective implements OnDestroy {
  private static idCounter = 0;
 
  /**
   * The tooltip text to be displayed
   *
   * @defaultValue ''
   */
  readonly siTooltip = input<TranslatableString | TemplateRef<any>>('');
 
  /**
   * The placement of the tooltip. One of 'top', 'start', end', 'bottom'
   *
   * @defaultValue 'auto'
   */
  readonly placement = input<keyof typeof positions>('auto');
 
  /**
   * The trigger event on which the tooltip shall be displayed
   */
  readonly triggers = input<'' | 'focus'>();
 
  /**
   * Allows the tooltip to be disabled
   *
   * @defaultValue false
   */
  readonly isDisabled = input(false, { transform: booleanAttribute });
 
  /**
   * The context for the attached template
   */
  readonly tooltipContext = input();
 
  protected describedBy = `__tooltip_${SiTooltipDirective.idCounter++}`;
 
  private tooltipRef?: TooltipRef;
  private tooltipService = inject(SiTooltipService);
  private elementRef = inject(ElementRef);
 
  ngOnDestroy(): void {
    this.tooltipRef?.destroy();
  }
 
  private showTooltip(): void {
    const siTooltip = this.siTooltip();
    if (this.isDisabled() || !siTooltip) {
      return;
    }
    this.tooltipRef ??= this.tooltipService.createTooltip({
      describedBy: this.describedBy,
      element: this.elementRef,
      placement: this.placement()
    });
    this.tooltipRef.show(this.siTooltip(), this.tooltipContext());
  }
 
  @HostListener('focus')
  protected focusIn(): void {
    this.showTooltip();
  }
 
  @HostListener('mouseenter')
  protected show(): void {
    if (this.triggers() === 'focus') {
      return;
    }
    this.showTooltip();
  }
 
  @HostListener('touchstart')
  @HostListener('focusout')
  protected hide(): void {
    this.tooltipRef?.hide();
  }
 
  @HostListener('mouseleave')
  protected mouseOut(): void {
    if (this.triggers() === 'focus') {
      return;
    }
    this.hide();
  }
}