primeng 22.1.3 → 22.1.5

package/fesm2022/primeng-tooltip.mjs

@@ -1,8 +1,8 @@
 import { isPlatformBrowser } from "@angular/common";
 import * as i0 from "@angular/core";
-import { Directive, Injectable, InjectionToken, NgModule, ViewContainerRef, booleanAttribute, computed, effect, inject, input, numberAttribute, untracked } from "@angular/core";
-import { appendChild, createElement, fadeIn, findSingle, getOuterHeight, getOuterWidth, getViewport, getWindowScrollLeft, getWindowScrollTop, hasClass, removeChild } from "@primeuix/utils";
-import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
+import { Directive, Injectable, InjectionToken, NgModule, NgZone, ViewContainerRef, booleanAttribute, computed, effect, inject, input, numberAttribute, untracked } from "@angular/core";
+import { appendChild, createElement, fadeIn, findSingle, getActiveElement, getOuterHeight, getOuterWidth, getViewport, getWindowScrollLeft, getWindowScrollTop, hasClass, isPrefersReducedMotion, removeChild } from "@primeuix/utils";
+import { BaseComponent } from "primeng/basecomponent";
 import { BindModule } from "primeng/bind";
 import { ConnectedOverlayScrollHandler, getEventTarget } from "primeng/dom";
 import { ZIndexUtils } from "primeng/utils";
@@ -19,7 +19,7 @@ var TooltipStyle = class TooltipStyle extends BaseStyle {
 	classes = classes;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: TooltipStyle,
 		deps: null,
@@ -27,14 +27,14 @@ var TooltipStyle = class TooltipStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: TooltipStyle
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: TooltipStyle,
 	decorators: [{ type: Injectable }]
@@ -46,6 +46,9 @@ var TooltipClasses;
 	TooltipClasses["text"] = "p-tooltip-text";
 })(TooltipClasses || (TooltipClasses = {}));
 const TOOLTIP_INSTANCE = new InjectionToken("TOOLTIP_INSTANCE");
+function isTemplateRef(value) {
+	return typeof value?.createEmbeddedView === "function";
+}
 var Tooltip = class Tooltip extends BaseComponent {
 	componentName = "Tooltip";
 	$pcTooltip = inject(TOOLTIP_INSTANCE, {
@@ -109,33 +112,39 @@ var Tooltip = class Tooltip extends BaseComponent {
 	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []);
 	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []);
 	tooltipId = this.$useId.next("pn_id_") + "_tooltip";
-	_tooltipOptions = computed(() => ({
-		tooltipLabel: this.content(),
-		tooltipPosition: this.tooltipPosition() ?? "right",
-		tooltipEvent: this.tooltipEvent(),
-		appendTo: this.appendTo() ?? "body",
-		positionStyle: this.positionStyle(),
-		tooltipStyleClass: this.tooltipStyleClass(),
-		tooltipZIndex: this.tooltipZIndex() ?? "auto",
-		escape: this.escape(),
-		showDelay: this.showDelay(),
-		hideDelay: this.hideDelay(),
-		life: this.life(),
-		positionTop: this.positionTop() ?? 0,
-		positionLeft: this.positionLeft() ?? 0,
-		autoHide: this.autoHide(),
-		hideOnEscape: this.hideOnEscape(),
-		showOnEllipsis: this.showOnEllipsis(),
-		disabled: this.tooltipDisabled(),
-		...this.tooltipOptions(),
-		id: this.tooltipId
-	}), ...ngDevMode ? [{ debugName: "_tooltipOptions" }] : /* istanbul ignore next */ []);
+	_tooltipOptions = computed(() => {
+		const options = Object.fromEntries(Object.entries(this.tooltipOptions() ?? {}).filter(([, value]) => value !== void 0));
+		return {
+			tooltipLabel: this.content(),
+			tooltipPosition: this.tooltipPosition() ?? "right",
+			tooltipEvent: this.tooltipEvent(),
+			appendTo: this.appendTo() ?? "body",
+			positionStyle: this.positionStyle(),
+			tooltipStyleClass: this.tooltipStyleClass(),
+			tooltipZIndex: this.tooltipZIndex() ?? "auto",
+			escape: this.escape(),
+			showDelay: this.showDelay(),
+			hideDelay: this.hideDelay(),
+			life: this.life(),
+			positionTop: this.positionTop() ?? 0,
+			positionLeft: this.positionLeft() ?? 0,
+			autoHide: this.autoHide(),
+			hideOnEscape: this.hideOnEscape(),
+			fitContent: this.fitContent(),
+			showOnEllipsis: this.showOnEllipsis(),
+			disabled: this.tooltipDisabled(),
+			...options,
+			id: this.tooltipId
+		};
+	}, ...ngDevMode ? [{ debugName: "_tooltipOptions" }] : /* istanbul ignore next */ []);
 	container = null;
 	styleClass;
 	tooltipText = null;
 	rootPTClasses = "";
 	showTimeout = null;
 	hideTimeout = null;
+	fadeInCancel;
+	alignTimeout = null;
 	active;
 	mouseEnterListener;
 	mouseLeaveListener;
@@ -153,6 +162,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 	pTooltipPT = input(...ngDevMode ? [void 0, { debugName: "pTooltipPT" }] : /* istanbul ignore next */ []);
 	pTooltipUnstyled = input(...ngDevMode ? [void 0, { debugName: "pTooltipUnstyled" }] : /* istanbul ignore next */ []);
 	viewContainer = inject(ViewContainerRef);
+	zone = inject(NgZone);
 	constructor() {
 		super();
 		effect(() => {
@@ -199,7 +209,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 		});
 	}
 	onAfterViewInit() {
-		if (isPlatformBrowser(this.platformId)) {
+		if (isPlatformBrowser(this.platformId)) this.zone.runOutsideAngular(() => {
 			const tooltipEvent = this.getOption("tooltipEvent");
 			if (tooltipEvent === "hover" || tooltipEvent === "both") {
 				this.mouseEnterListener = this.onMouseEnter.bind(this);
@@ -221,10 +231,10 @@ var Tooltip = class Tooltip extends BaseComponent {
 				target.addEventListener("focus", this.focusListener);
 				target.addEventListener("blur", this.blurListener);
 			}
-		}
+		});
 	}
 	isAutoHide() {
-		return this.getOption("autoHide");
+		return !!this.getOption("autoHide");
 	}
 	onMouseEnter(e) {
 		if (!this.container && !this.showTimeout) this.activate();
@@ -264,6 +274,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 		this.deactivate();
 	}
 	onInputClick(e) {
+		if (this.getOption("tooltipEvent") === "both" && this.el.nativeElement.contains(getActiveElement(this.el.nativeElement))) return;
 		this.deactivate();
 	}
 	hasEllipsis() {
@@ -310,6 +321,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 			this.remove();
 		}
 		const container = createElement("div", {
+			id: this.getOption("id"),
 			class: this.cx("root"),
 			"p-bind": this.ptm("root"),
 			"data-pc-section": "root"
@@ -329,13 +341,14 @@ var Tooltip = class Tooltip extends BaseComponent {
 		this.container = container;
 		this.tooltipText = tooltipText;
 		this.updateText();
-		if (this.getOption("positionStyle")) container.style.position = this.getOption("positionStyle");
+		const positionStyle = this.getOption("positionStyle");
+		if (positionStyle) container.style.position = positionStyle;
 		container.appendChild(tooltipText);
 		if (this.getOption("appendTo") === "body") this.$overlayParent(document.body, container).appendChild(container);
 		else if (this.getOption("appendTo") === "target") appendChild(container, this.el.nativeElement);
 		else appendChild(this.$overlayParent(this.getOption("appendTo"), container), container);
 		container.style.display = "none";
-		if (this.fitContent()) container.style.width = "fit-content";
+		if (this.getOption("fitContent")) container.style.width = "fit-content";
 		if (this.isAutoHide()) container.style.pointerEvents = "none";
 		else {
 			container.style.pointerEvents = "unset";
@@ -349,7 +362,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 	}
 	unbindContainerMouseleaveListener() {
 		if (this.containerMouseleaveListener) {
-			this.bindContainerMouseleaveListener();
+			this.containerMouseleaveListener();
 			this.containerMouseleaveListener = null;
 		}
 	}
@@ -357,21 +370,24 @@ var Tooltip = class Tooltip extends BaseComponent {
 		if (!this.getOption("tooltipLabel") || this.getOption("disabled")) return;
 		this.create();
 		const container = this.container;
-		if (this.el.nativeElement.closest("p-dialog")) setTimeout(() => {
+		if (this.el.nativeElement.closest("p-dialog")) this.alignTimeout = setTimeout(() => {
 			if (this.container) {
 				this.container.style.display = "inline-block";
 				this.align();
+				if (!isPrefersReducedMotion()) this.fadeInCancel = fadeIn(this.container, 250);
 			}
 		}, 100);
 		else {
 			container.style.display = "inline-block";
 			this.align();
+			if (!isPrefersReducedMotion()) this.fadeInCancel = fadeIn(container, 250);
 		}
-		fadeIn(container, 250);
 		if (this.getOption("tooltipZIndex") === "auto") ZIndexUtils.set("tooltip", container, this.config.zIndex.tooltip);
-		else container.style.zIndex = this.getOption("tooltipZIndex");
+		else container.style.zIndex = String(this.getOption("tooltipZIndex"));
 		this.bindDocumentResizeListener();
 		this.bindScrollListener();
+		const target = this.getTarget(this.el.nativeElement);
+		if (target && !target.getAttribute("aria-describedby")) target.setAttribute("aria-describedby", container.id);
 	}
 	hide() {
 		if (this.getOption("tooltipZIndex") === "auto") ZIndexUtils.clear(this.container);
@@ -380,14 +396,14 @@ var Tooltip = class Tooltip extends BaseComponent {
 	updateText() {
 		if (!this.tooltipText) return;
 		const content = this.getOption("tooltipLabel");
-		if (content && typeof content.createEmbeddedView === "function") {
+		if (isTemplateRef(content)) {
 			const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
 			embeddedViewRef.detectChanges();
 			embeddedViewRef.rootNodes.forEach((node) => this.tooltipText.appendChild(node));
 		} else if (this.getOption("escape")) {
-			this.tooltipText.innerHTML = "";
-			this.tooltipText.appendChild(document.createTextNode(content));
-		} else this.tooltipText.innerHTML = content;
+			this.tooltipText.textContent = "";
+			this.tooltipText.appendChild(document.createTextNode(content ?? ""));
+		} else this.tooltipText.innerHTML = content ?? "";
 	}
 	align() {
 		const position = this.getOption("tooltipPosition");
@@ -423,7 +439,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 	}
 	getHostOffset() {
 		if (this.getOption("appendTo") === "body" || this.getOption("appendTo") === "target") {
-			let offset = this.el.nativeElement.getBoundingClientRect();
+			let offset = this.anchorElement.getBoundingClientRect();
 			return {
 				left: offset.left + getWindowScrollLeft(),
 				top: offset.top + getWindowScrollTop()
@@ -436,6 +452,11 @@ var Tooltip = class Tooltip extends BaseComponent {
 	get activeElement() {
 		return this.el.nativeElement.nodeName.startsWith("P-") ? findSingle(this.el.nativeElement, this.psel(".p-component")) : this.el.nativeElement;
 	}
+	get anchorElement() {
+		const host = this.el.nativeElement;
+		const { width, height } = host.getBoundingClientRect();
+		return width === 0 && height === 0 ? this.activeElement ?? host : host;
+	}
 	alignRight() {
 		this.preAlign("right");
 		const el = this.activeElement;
@@ -454,7 +475,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 		this.preAlign("left");
 		let arrowElement = this.getArrowElement();
 		let offsetLeft = getOuterWidth(this.container);
-		let offsetTop = (getOuterHeight(this.el.nativeElement) - getOuterHeight(this.container)) / 2;
+		let offsetTop = (getOuterHeight(this.anchorElement) - getOuterHeight(this.container)) / 2;
 		this.alignTooltip(-offsetLeft, offsetTop);
 		if (arrowElement) {
 			arrowElement.style.top = "50%";
@@ -468,7 +489,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 		let arrowElement = this.getArrowElement();
 		let hostOffset = this.getHostOffset();
 		let elementWidth = getOuterWidth(this.container);
-		let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
+		let offsetLeft = (getOuterWidth(this.anchorElement) - getOuterWidth(this.container)) / 2;
 		let offsetTop = getOuterHeight(this.container);
 		this.alignTooltip(offsetLeft, -offsetTop);
 		let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
@@ -487,8 +508,8 @@ var Tooltip = class Tooltip extends BaseComponent {
 		let arrowElement = this.getArrowElement();
 		let elementWidth = getOuterWidth(this.container);
 		let hostOffset = this.getHostOffset();
-		let offsetLeft = (getOuterWidth(this.el.nativeElement) - getOuterWidth(this.container)) / 2;
-		let offsetTop = getOuterHeight(this.el.nativeElement);
+		let offsetLeft = (getOuterWidth(this.anchorElement) - getOuterWidth(this.container)) / 2;
+		let offsetTop = getOuterHeight(this.anchorElement);
 		this.alignTooltip(offsetLeft, offsetTop);
 		let elementRelativeCenter = hostOffset.left - this.getHostOffset().left + elementWidth / 2;
 		if (arrowElement) {
@@ -502,8 +523,8 @@ var Tooltip = class Tooltip extends BaseComponent {
 		let hostOffset = this.getHostOffset();
 		let left = hostOffset.left + offsetLeft;
 		let top = hostOffset.top + offsetTop;
-		this.container.style.left = left + this.getOption("positionLeft") + "px";
-		this.container.style.top = top + this.getOption("positionTop") + "px";
+		this.container.style.left = left + (this.getOption("positionLeft") ?? 0) + "px";
+		this.container.style.top = top + (this.getOption("positionTop") ?? 0) + "px";
 	}
 	getOption(option) {
 		return this._tooltipOptions()[option];
@@ -567,6 +588,8 @@ var Tooltip = class Tooltip extends BaseComponent {
 		this.unbindDocumentResizeListener();
 	}
 	remove() {
+		const target = this.getTarget(this.el.nativeElement);
+		if (this.container && target?.getAttribute("aria-describedby") === this.container.id) target.removeAttribute("aria-describedby");
 		if (this.container && this.container.parentElement) {
 			if (this.$styleScope.isolated && this.getOption("appendTo") !== "target") this.container.remove();
 			else if (this.getOption("appendTo") === "body") document.body.removeChild(this.container);
@@ -578,6 +601,8 @@ var Tooltip = class Tooltip extends BaseComponent {
 		this.unbindContainerMouseleaveListener();
 		this.unbindDocumentTouchListener();
 		this.clearTimeouts();
+		this.fadeInCancel?.();
+		this.fadeInCancel = null;
 		this.container = null;
 		this.scrollHandler = null;
 	}
@@ -593,23 +618,26 @@ var Tooltip = class Tooltip extends BaseComponent {
 			this.hideTimeout = null;
 		}
 	}
+	clearAlignTimeout() {
+		if (this.alignTimeout) {
+			clearTimeout(this.alignTimeout);
+			this.alignTimeout = null;
+		}
+	}
 	clearTimeouts() {
 		this.clearShowTimeout();
 		this.clearHideTimeout();
+		this.clearAlignTimeout();
 	}
 	onDestroy() {
 		this.unbindEvents();
 		if (this.container) ZIndexUtils.clear(this.container);
 		this.remove();
-		if (this.scrollHandler) {
-			this.scrollHandler.destroy();
-			this.scrollHandler = null;
-		}
 		if (this.documentEscapeListener) this.documentEscapeListener();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: Tooltip,
 		deps: [],
@@ -617,7 +645,7 @@ var Tooltip = class Tooltip extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		type: Tooltip,
 		isStandalone: true,
 		selector: "[pTooltip]",
@@ -770,24 +798,17 @@ var Tooltip = class Tooltip extends BaseComponent {
 				transformFunction: null
 			}
 		},
-		providers: [
-			TooltipStyle,
-			{
-				provide: TOOLTIP_INSTANCE,
-				useExisting: Tooltip
-			},
-			{
-				provide: PARENT_INSTANCE,
-				useExisting: Tooltip
-			}
-		],
+		providers: [TooltipStyle, {
+			provide: TOOLTIP_INSTANCE,
+			useExisting: Tooltip
+		}],
 		usesInheritance: true,
 		ngImport: i0
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: Tooltip,
 	decorators: [{
@@ -795,17 +816,10 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "[pTooltip]",
 			standalone: true,
-			providers: [
-				TooltipStyle,
-				{
-					provide: TOOLTIP_INSTANCE,
-					useExisting: Tooltip
-				},
-				{
-					provide: PARENT_INSTANCE,
-					useExisting: Tooltip
-				}
-			]
+			providers: [TooltipStyle, {
+				provide: TOOLTIP_INSTANCE,
+				useExisting: Tooltip
+			}]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -983,7 +997,7 @@ i0.ɵɵngDeclareClassMetadata({
 var TooltipModule = class TooltipModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: TooltipModule,
 		deps: [],
@@ -991,7 +1005,7 @@ var TooltipModule = class TooltipModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: TooltipModule,
 		imports: [Tooltip, BindModule],
@@ -999,7 +1013,7 @@ var TooltipModule = class TooltipModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.5",
 		ngImport: i0,
 		type: TooltipModule,
 		imports: [BindModule, BindModule]
@@ -1007,7 +1021,7 @@ var TooltipModule = class TooltipModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.5",
 	ngImport: i0,
 	type: TooltipModule,
 	decorators: [{