d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Directive, ElementRef, NgZone, Input, OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
import { Platform } from '@angular/cdk/platform';
import { FocusMonitor } from '@angular/cdk/a11y';
import { coerceBooleanProperty, isString } from 'ngx-tethys/util';
import { ThyPlacement, ThyOverlayDirectiveBase, ThyOverlayTrigger, InputBoolean, InputNumber } from 'ngx-tethys/core';
import { ThyTooltipContent } from './interface';
import { ThyTooltipRef } from './tooltip-ref';
import { ThyTooltipService } from './tooltip.service';
import { SafeAny } from 'ngx-tethys/types';

/**
 * @name thyTooltip
 */
@Directive({
    selector: '[thyTooltip],[thy-tooltip]',
    exportAs: 'thyTooltip',
    standalone: true
})
export class ThyTooltipDirective extends ThyOverlayDirectiveBase implements OnInit, OnDestroy {
    touchendHideDelay = 1500;

    private tooltipClass: string | string[];

    private tooltipRef: ThyTooltipRef;

    private _content: ThyTooltipContent;

    get content() {
        return this._content;
    }

    /**
     * 提示消息，可以是文本，也可以是一个模板
     * @type string | TemplateRef<T>
     */
    @Input('thyTooltip') set content(value: ThyTooltipContent) {
        // If the content is not a string (e.g. number), convert it to a string and trim it.
        this._content = value && isString(value) ? `${value}`.trim() : value;
        if (!this._content && this.tooltipRef?.isTooltipVisible()) {
            this.tooltipRef.hide(0);
        } else {
            this.tooltipRef?.updateTooltipContent(value, this.data);
        }
    }

    /**
     * 指定提示的位置
     * @type ThyPlacement
     */
    @Input('thyTooltipPlacement') placement: ThyPlacement = 'top';

    /**
     * 提示内容自定义样式
     */
    @Input('thyTooltipClass')
    set thyTooltipClass(value: string | string[]) {
        this.tooltipClass = value;
        this.tooltipRef?.setTooltipClass(this.tooltipClass);
    }

    /**
     * 显示提示内容延迟毫秒
     */
    @Input('thyTooltipShowDelay') @InputNumber() showDelay: number;

    /**
     * 隐藏提示内容延迟毫秒
     */
    @Input('thyTooltipHideDelay') @InputNumber() hideDelay: number;

    _trigger: ThyOverlayTrigger = 'hover';

    /**
     * 触发提示方式
     * <br/>`hover` 鼠标移入，显示提示；鼠标移出，隐藏提示；显示提示时，滚动页面，会隐藏提示。
     * <br/>`focus` 元素获取焦点，显示提示；元素失去焦点，隐藏提示；显示元素时，滚动页面，提示会跟随聚焦源一起移动。
     * <br/>`click` 点击元素，显示提示；点击backdrop，隐藏提示；显示提示时，页面的滚动行为会被阻止。
     *
     * @type hover | focus | click
     */
    @Input('thyTooltipTrigger') set thyTooltipTrigger(value: ThyOverlayTrigger) {
        this.trigger = value;
    }

    /**
     * 设置是否禁用提示
     * @default false
     */
    @Input('thyTooltipDisabled')
    @InputBoolean()
    set thyTooltipDisabled(value: boolean) {
        this.disabled = coerceBooleanProperty(value);
        // If tooltip is disabled, hide immediately.
        if (this.disabled) {
            this.hide(0);
        }
    }

    /**
     * 传入 template 时，需要注入给 template 的上下文数据
     */
    @Input('thyTooltipTemplateContext') data: SafeAny;

    /**
     * 偏移量
     */
    @Input('thyTooltipOffset') @InputNumber() tooltipOffset: number;

    /**
     * hover 触发方式下 鼠标移入Tooltip是否固定 Tooltip
     * @default false
     */
    @Input('thyTooltipPin')
    @InputBoolean()
    set tooltipPin(value: boolean) {
        this.overlayPin = value;
    }

    constructor(
        elementRef: ElementRef<HTMLElement>,
        ngZone: NgZone,
        platform: Platform,
        focusMonitor: FocusMonitor,
        private viewContainerRef: ViewContainerRef,
        private thyTooltipService: ThyTooltipService
    ) {
        super(elementRef, platform, focusMonitor, ngZone);
    }

    ngOnInit() {
        this.initialize();
    }

    /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show 200ms */
    show(delay: number = this.showDelay): void {
        if (this.disabled) {
            return;
        }
        if (!this.tooltipRef) {
            this.tooltipRef = this.thyTooltipService.create(this.elementRef, {
                viewContainerRef: this.viewContainerRef,
                placement: this.placement,
                contentClass: this.tooltipClass,
                offset: this.tooltipOffset,
                tooltipPin: this.tooltipPin,
                hasBackdrop: this.trigger === 'click'
            });
        }
        this.tooltipRef.show(this.content, this.data, delay);
    }

    /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide 100ms */
    hide(delay: number = this.hideDelay): void {
        this.tooltipRef?.hide(delay);
    }

    ngOnDestroy() {
        this.tooltipRef?.dispose();
    }
}

1	import { Directive, ElementRef, NgZone, Input, OnInit, OnDestroy, ViewContainerRef } from '@angular/core';
2	import { Platform } from '@angular/cdk/platform';
3	import { FocusMonitor } from '@angular/cdk/a11y';
4	import { coerceBooleanProperty, isString } from 'ngx-tethys/util';
5	import { ThyPlacement, ThyOverlayDirectiveBase, ThyOverlayTrigger, InputBoolean, InputNumber } from 'ngx-tethys/core';
6	import { ThyTooltipContent } from './interface';
7	import { ThyTooltipRef } from './tooltip-ref';
8	import { ThyTooltipService } from './tooltip.service';
9	import { SafeAny } from 'ngx-tethys/types';
10
11	/**	1✔
12	* @name thyTooltip
13	*/	×
14	@Directive({
15	selector: '[thyTooltip],[thy-tooltip]',
16	exportAs: 'thyTooltip',
17	standalone: true	×
18	})	×
19	export class ThyTooltipDirective extends ThyOverlayDirectiveBase implements OnInit, OnDestroy {	×
20	touchendHideDelay = 1500;
21
22	private tooltipClass: string \| string[];	×
23
24	private tooltipRef: ThyTooltipRef;
25
26	private _content: ThyTooltipContent;	×
27		×
28	get content() {
29	return this._content;
30	}	×
31
32	/**
33	* 提示消息，可以是文本，也可以是一个模板	×
34	* @type string \| TemplateRef<T>
35	*/	×
36	@Input('thyTooltip') set content(value: ThyTooltipContent) {	×
37	// If the content is not a string (e.g. number), convert it to a string and trim it.
38	this._content = value && isString(value) ? `${value}`.trim() : value;
39	if (!this._content && this.tooltipRef?.isTooltipVisible()) {
40	this.tooltipRef.hide(0);	×
41	} else {
42	this.tooltipRef?.updateTooltipContent(value, this.data);
43	}	×
44	}	×
45		×
46	/**	×
47	* 指定提示的位置	×
48	* @type ThyPlacement	×
49	*/
50	@Input('thyTooltipPlacement') placement: ThyPlacement = 'top';
51		×
52	/**
53	* 提示内容自定义样式
54	*/	×
55	@Input('thyTooltipClass')	×
56	set thyTooltipClass(value: string \| string[]) {	×
57	this.tooltipClass = value;
58	this.tooltipRef?.setTooltipClass(this.tooltipClass);	×
59	}	×
60
61	/**
62	* 显示提示内容延迟毫秒
63	*/
64	@Input('thyTooltipShowDelay') @InputNumber() showDelay: number;
65
66	/**
67	* 隐藏提示内容延迟毫秒
68	*/	×
69	@Input('thyTooltipHideDelay') @InputNumber() hideDelay: number;
70
71	_trigger: ThyOverlayTrigger = 'hover';	×
72		×
73	/**
74	* 触发提示方式
75	* <br/>`hover` 鼠标移入，显示提示；鼠标移出，隐藏提示；显示提示时，滚动页面，会隐藏提示。	×
76	* <br/>`focus` 元素获取焦点，显示提示；元素失去焦点，隐藏提示；显示元素时，滚动页面，提示会跟随聚焦源一起移动。
77	* <br/>`click` 点击元素，显示提示；点击backdrop，隐藏提示；显示提示时，页面的滚动行为会被阻止。	1✔
78	*
79	* @type hover \| focus \| click
80	*/
81	@Input('thyTooltipTrigger') set thyTooltipTrigger(value: ThyOverlayTrigger) {
82	this.trigger = value;
83	}
84
85	/**	1✔
86	* 设置是否禁用提示
87	* @default false
88	*/
89	@Input('thyTooltipDisabled')
90	@InputBoolean()
91	set thyTooltipDisabled(value: boolean) {
92	this.disabled = coerceBooleanProperty(value);
93	// If tooltip is disabled, hide immediately.
94	if (this.disabled) {
95	this.hide(0);
96	}
97	}
98		1✔
99	/**
100	* 传入 template 时，需要注入给 template 的上下文数据
101	*/
102	@Input('thyTooltipTemplateContext') data: SafeAny;	1✔
103
104	/**
105	* 偏移量
106	*/	1✔
107	@Input('thyTooltipOffset') @InputNumber() tooltipOffset: number;
108
109	/**
110	* hover 触发方式下鼠标移入Tooltip是否固定 Tooltip
111	* @default false	1✔
112	*/
113	@Input('thyTooltipPin')
114	@InputBoolean()
115	set tooltipPin(value: boolean) {	1✔
116	this.overlayPin = value;
117	}
118
119	constructor(
120	elementRef: ElementRef<HTMLElement>,	1✔
121	ngZone: NgZone,
122	platform: Platform,
123	focusMonitor: FocusMonitor,
124	private viewContainerRef: ViewContainerRef,
125	private thyTooltipService: ThyTooltipService
126	) {
127	super(elementRef, platform, focusMonitor, ngZone);
128	}
129
130	ngOnInit() {
131	this.initialize();
132	}
133
134	/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show 200ms */
135	show(delay: number = this.showDelay): void {
136	if (this.disabled) {
137	return;
138	}
139	if (!this.tooltipRef) {
140	this.tooltipRef = this.thyTooltipService.create(this.elementRef, {
141	viewContainerRef: this.viewContainerRef,
142	placement: this.placement,
143	contentClass: this.tooltipClass,
144	offset: this.tooltipOffset,
145	tooltipPin: this.tooltipPin,
146	hasBackdrop: this.trigger === 'click'
147	});
148	}
149	this.tooltipRef.show(this.content, this.data, delay);
150	}
151
152	/** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide 100ms */
153	hide(delay: number = this.hideDelay): void {
154	this.tooltipRef?.hide(delay);
155	}
156
157	ngOnDestroy() {
158	this.tooltipRef?.dispose();
159	}
160	}

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