d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding, TemplateRef, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { AnimationEvent } from '@angular/animations';
import { useHostRenderer } from '@tethys/cdk/dom';
import { ThyTooltipVisibility } from './interface';
import { thyTooltipAnimations } from './tooltip-animations';
import { coerceArray } from 'ngx-tethys/util';
import { NgIf, NgTemplateOutlet } from '@angular/common';

/**
 * @internal
 */
@Component({
    selector: 'thy-tooltip',
    templateUrl: './tooltip.component.html',
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush,
    animations: [thyTooltipAnimations.tooltipState],
    host: {
        '[@state]': 'visibility',
        '(@state.start)': 'animationStart()',
        '(@state.done)': 'animationDone($event)'
    },
    standalone: true,
    imports: [NgIf, NgTemplateOutlet]
})
export class ThyTooltipComponent implements OnInit {
    @HostBinding(`class.thy-tooltip`) addTooltipContainerClass = true;

    _content: string | TemplateRef<HTMLElement>;

    data: any;

    private readonly onHide: Subject<void> = new Subject();

    private closeOnInteraction = false;

    private hostRenderer = useHostRenderer();

    visibility: ThyTooltipVisibility = 'initial';

    showTimeoutId: number | null | any;

    hideTimeoutId: number | null | any;

    tooltipClasses: string[] = [];

    isTemplateRef = false;

    get content() {
        return this._content;
    }

    set content(value: string | TemplateRef<HTMLElement>) {
        this._content = value;
        this.isTemplateRef = value instanceof TemplateRef;
    }

    private updateClasses() {
        let classes: string[] = [];

        if (this.tooltipClasses) {
            classes = classes.concat(this.tooltipClasses);
        }

        this.hostRenderer.updateClass(classes);
    }

    constructor(private changeDetectorRef: ChangeDetectorRef) {}

    ngOnInit() {}

    markForCheck(): void {
        this.changeDetectorRef.markForCheck();
    }

    isVisible() {
        return this.visibility === 'visible';
    }

    show(delay: number): void {
        // Cancel the delayed hide if it is scheduled
        if (this.hideTimeoutId) {
            clearTimeout(this.hideTimeoutId);
            this.hideTimeoutId = null;
        }

        // Body interactions should cancel the tooltip if there is a delay in showing.
        this.closeOnInteraction = true;
        this.showTimeoutId = setTimeout(() => {
            this.visibility = 'visible';
            this.showTimeoutId = null;
            this.markForCheck();
        }, delay);
    }

    hide(delay: number): void {
        // Cancel the delayed show if it is scheduled
        if (this.showTimeoutId) {
            clearTimeout(this.showTimeoutId);
            this.showTimeoutId = null;
        }

        this.hideTimeoutId = setTimeout(() => {
            this.visibility = 'hidden';
            this.hideTimeoutId = null;
            this.markForCheck();
        }, delay);
    }

    animationStart() {
        this.closeOnInteraction = false;
    }

    animationDone(event: AnimationEvent): void {
        const toState = event.toState as ThyTooltipVisibility;
        if (toState === 'hidden' && !this.isVisible()) {
            this.onHide.next();
        }
        if (toState === 'visible' || toState === 'hidden') {
            this.closeOnInteraction = true;
        }
    }

    afterHidden(): Observable<void> {
        return this.onHide.asObservable();
    }

    setTooltipClass(classes: string | string[]) {
        this.tooltipClasses = coerceArray(classes);
        this.updateClasses();
        // this.markForCheck();
    }
}

1	import { Component, ViewEncapsulation, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding, TemplateRef, OnInit } from '@angular/core';
2	import { Observable, Subject } from 'rxjs';
3	import { AnimationEvent } from '@angular/animations';
4	import { useHostRenderer } from '@tethys/cdk/dom';
5	import { ThyTooltipVisibility } from './interface';
6	import { thyTooltipAnimations } from './tooltip-animations';
7	import { coerceArray } from 'ngx-tethys/util';
8	import { NgIf, NgTemplateOutlet } from '@angular/common';
9
10	/**
11	* @internal
12	*/	1✔
13	@Component({
14	selector: 'thy-tooltip',	×
15	templateUrl: './tooltip.component.html',
16	encapsulation: ViewEncapsulation.None,
17	changeDetection: ChangeDetectionStrategy.OnPush,	×
18	animations: [thyTooltipAnimations.tooltipState],	×
19	host: {
20	'[@state]': 'visibility',
21	'(@state.start)': 'animationStart()',	×
22	'(@state.done)': 'animationDone($event)'	×
23	},	×
24	standalone: true,
25	imports: [NgIf, NgTemplateOutlet]	×
26	})
27	export class ThyTooltipComponent implements OnInit {
28	@HostBinding(`class.thy-tooltip`) addTooltipContainerClass = true;	×
29		×
30	_content: string \| TemplateRef<HTMLElement>;	×
31		×
32	data: any;	×
33		×
34	private readonly onHide: Subject<void> = new Subject();	×
35		×
36	private closeOnInteraction = false;
37
38	private hostRenderer = useHostRenderer();
39		×
40	visibility: ThyTooltipVisibility = 'initial';
41
42	showTimeoutId: number \| null \| any;	×
43
44	hideTimeoutId: number \| null \| any;
45
46	tooltipClasses: string[] = [];	×
47		×
48	isTemplateRef = false;	×
49
50	get content() {
51	return this._content;	×
52	}	×
53		×
54	set content(value: string \| TemplateRef<HTMLElement>) {	×
55	this._content = value;	×
56	this.isTemplateRef = value instanceof TemplateRef;
57	}
58
59	private updateClasses() {
60	let classes: string[] = [];	×
61		×
62	if (this.tooltipClasses) {	×
63	classes = classes.concat(this.tooltipClasses);
64	}	×
65		×
66	this.hostRenderer.updateClass(classes);	×
67	}	×
68
69	constructor(private changeDetectorRef: ChangeDetectorRef) {}
70
71	ngOnInit() {}	×
72
73	markForCheck(): void {
74	this.changeDetectorRef.markForCheck();	×
75	}	×
76		×
77	isVisible() {
78	return this.visibility === 'visible';	×
79	}	×
80
81	show(delay: number): void {
82	// Cancel the delayed hide if it is scheduled
83	if (this.hideTimeoutId) {	×
84	clearTimeout(this.hideTimeoutId);
85	this.hideTimeoutId = null;
86	}	×
87		×
88	// Body interactions should cancel the tooltip if there is a delay in showing.
89	this.closeOnInteraction = true;
90	this.showTimeoutId = setTimeout(() => {	1✔
91	this.visibility = 'visible';
92	this.showTimeoutId = null;
93	this.markForCheck();	1✔
94	}, delay);
95	}
96
97	hide(delay: number): void {	1✔
98	// Cancel the delayed show if it is scheduled
99	if (this.showTimeoutId) {
100	clearTimeout(this.showTimeoutId);
101	this.showTimeoutId = null;
102	}
103
104	this.hideTimeoutId = setTimeout(() => {
105	this.visibility = 'hidden';
106	this.hideTimeoutId = null;
107	this.markForCheck();
108	}, delay);
109	}
110
111	animationStart() {
112	this.closeOnInteraction = false;
113	}
114
115	animationDone(event: AnimationEvent): void {
116	const toState = event.toState as ThyTooltipVisibility;
117	if (toState === 'hidden' && !this.isVisible()) {
118	this.onHide.next();
119	}
120	if (toState === 'visible' \|\| toState === 'hidden') {
121	this.closeOnInteraction = true;
122	}
123	}
124
125	afterHidden(): Observable<void> {
126	return this.onHide.asObservable();
127	}
128
129	setTooltipClass(classes: string \| string[]) {
130	this.tooltipClasses = coerceArray(classes);
131	this.updateClasses();
132	// this.markForCheck();
133	}
134	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous