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 112 113 114 115 116 | 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 5x 5x 1x 4x 4x 4x 2x 1x 1x 4x 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 { Subject } from 'rxjs';
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);
private destroyer = new Subject<void>();
ngOnDestroy(): void {
this.tooltipRef?.destroy();
this.destroyer.next();
this.destroyer.complete();
}
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();
this.destroyer.next();
}
@HostListener('mouseleave')
protected mouseOut(): void {
if (this.triggers() === 'focus') {
return;
}
this.hide();
}
}
|