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 | 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 6x 6x 8x 4x 4x 8x 8x 8x 8x 8x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
import { NgClass, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
import {
Component,
computed,
ElementRef,
inject,
input,
signal,
TemplateRef,
Type
} from '@angular/core';
import { calculateOverlayArrowPosition, OverlayArrowPosition } from '@siemens/element-ng/common';
import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
@Component({
selector: 'si-tooltip',
imports: [NgClass, NgTemplateOutlet, SiTranslatePipe, NgComponentOutlet],
templateUrl: './si-tooltip.component.html'
})
export class TooltipComponent {
/** @defaultValue '' */
readonly tooltip = input<TranslatableString | TemplateRef<any> | Type<any>>('');
protected readonly tooltipPositionClass = signal('');
protected readonly arrowPos = signal<OverlayArrowPosition | undefined>(undefined);
/** @internal */
readonly id = input('');
readonly tooltipContext = input();
private elementRef = inject(ElementRef);
protected readonly tooltipText = computed<string | null>(() => {
const tooltip = this.tooltip();
return typeof tooltip === 'string' ? tooltip : null;
});
protected readonly tooltipTemplate = computed<TemplateRef<any> | null>(() => {
const tooltip = this.tooltip();
return tooltip instanceof TemplateRef ? tooltip : null;
});
protected readonly tooltipComponent = computed(() => {
const tooltip = this.tooltip();
return !(tooltip instanceof TemplateRef) && typeof tooltip !== 'string' ? tooltip : null;
});
/** @internal */
updateTooltipPosition(change: ConnectedOverlayPositionChange, anchor?: ElementRef): void {
const arrowClassTooltip = `tooltip-${change.connectionPair.overlayX}-${change.connectionPair.overlayY}`;
// need two updates as class changes affect the position
if (arrowClassTooltip !== this.tooltipPositionClass()) {
this.tooltipPositionClass.set(arrowClassTooltip);
}
const arrowPos = calculateOverlayArrowPosition(change, this.elementRef, anchor);
this.arrowPos.set(arrowPos);
}
}
|