@radix-ng/primitives 1.0.0-beta.4 → 1.0.1

package/fesm2022/radix-ng-primitives-tooltip.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, numberAttribute, DestroyRef, input, Directive, ElementRef, model, booleanAttribute, output, computed, effect, untracked, isDevMode, afterNextRender } from '@angular/core';
 import * as i1$2 from '@radix-ng/primitives/core';
-import { createContext, createFloatingRootContext, injectId, watch, provideFloatingTree, provideFloatingRootContext, rdxDevError, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useGraceArea, RdxFloatingNodeRegistration } from '@radix-ng/primitives/core';
+import { createContext, createFloatingRootContext, injectId, watch, createCancelableChangeEventDetails, provideFloatingTree, provideFloatingRootContext, rdxDevError, RDX_FLOATING_ROOT_CONTEXT, RDX_FLOATING_REGISTRATION, useGraceArea, RdxFloatingNodeRegistration } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/popper';
 import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
 import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
@@ -9,6 +9,7 @@ import * as i1$1 from '@radix-ng/primitives/portal';
 import { RdxPortalPresence } from '@radix-ng/primitives/portal';
 import { provideRdxPresenceContext } from '@radix-ng/primitives/presence';
 import { RdxDismiss } from '@radix-ng/primitives/dismissable-layer';
+import { createRdxTriggerInteraction } from '@radix-ng/primitives/floating-focus-manager';
 
 const defaultTooltipConfig = {
     delay: 600,
@@ -184,7 +185,10 @@ class RdxTooltip {
         this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
         this.payload = signal(undefined, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
         this.cursorPosition = signal(undefined, ...(ngDevMode ? [{ debugName: "cursorPosition" }] : /* istanbul ignore next */ []));
+        this.openChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
+        this.preventUnmountOnClose = signal(false, ...(ngDevMode ? [{ debugName: "preventUnmountOnClose" }] : /* istanbul ignore next */ []));
         this.openedInstant = signal(false, ...(ngDevMode ? [{ debugName: "openedInstant" }] : /* istanbul ignore next */ []));
+        this.suppressNextOpenChangeEmit = false;
         /** Local instant window used when this tooltip is not inside a provider. */
         this.localInstant = createTooltipInstantController(() => this.defaultConfig.timeout, this.destroyRef);
         this.instantGroup = this.provider ?? this.localInstant;
@@ -198,6 +202,7 @@ class RdxTooltip {
             this.defaultConfig.closeDelay, ...(ngDevMode ? [{ debugName: "resolvedCloseDelay" }] : /* istanbul ignore next */ []));
         /** Whether the most recent open happened without the delay. */
         this.instant = this.openedInstant.asReadonly();
+        this.present = computed(() => this.open() || this.preventUnmountOnClose(), ...(ngDevMode ? [{ debugName: "present" }] : /* istanbul ignore next */ []));
         this.virtualAnchor = computed(() => {
             const axis = this.trackCursorAxis();
             const element = this.trigger();
@@ -221,7 +226,7 @@ class RdxTooltip {
                 }
             };
         }, ...(ngDevMode ? [{ debugName: "virtualAnchor" }] : /* istanbul ignore next */ []));
-        this.openTimer = useTimeoutFn(() => this.applyOpen(false), () => this.resolvedDelay(), { immediate: false }, this.destroyRef);
+        this.openTimer = useTimeoutFn(() => this.applyOpen(false, this.trigger(), this.payload(), 'trigger-hover'), () => this.resolvedDelay(), { immediate: false }, this.destroyRef);
         this.closeTimer = useTimeoutFn(() => this.applyClose(), () => this.resolvedCloseDelay(), { immediate: false }, this.destroyRef);
         effect(() => {
             const defaultOpen = this.defaultOpen();
@@ -242,8 +247,15 @@ class RdxTooltip {
         // as "inside" and never dismisses (ADR 0015).
         effect(() => this.floatingContext.setReferenceElement(this.trigger() ?? null));
         watch([this.open], ([isOpen]) => {
-            this.onOpenChange.emit(isOpen);
+            if (this.suppressNextOpenChangeEmit) {
+                this.suppressNextOpenChangeEmit = false;
+            }
+            else {
+                const { eventDetails } = createCancelableChangeEventDetails(this.openChangeReason(), new Event('tooltip.open-change'), this.trigger());
+                this.onOpenChange.emit({ open: isOpen, eventDetails });
+            }
             if (isOpen) {
+                this.preventUnmountOnClose.set(false);
                 this.instantGroup.onOpen();
             }
             else {
@@ -253,26 +265,36 @@ class RdxTooltip {
         }, { defer: true });
     }
     /** Opens immediately, optionally switching the active trigger/payload. */
-    show(trigger = this.trigger(), payload) {
-        this.applyOpen(true, trigger, payload);
+    show(trigger = this.trigger(), payload, event) {
+        this.applyOpen(true, trigger, payload, 'trigger-focus', event);
     }
-    close() {
+    close(reason = 'none', event) {
         this.openTimer.stop();
         this.closeTimer.stop();
-        this.applyClose();
+        this.applyClose(reason, event);
+    }
+    cancelPendingOpen() {
+        this.openTimer.stop();
+    }
+    closeHoverOpen(event) {
+        this.openTimer.stop();
+        this.closeTimer.stop();
+        if (this.open() && this.openChangeReason() === 'trigger-hover') {
+            this.applyClose('trigger-hover', event);
+        }
     }
     /** Closes after the resolved close delay, e.g. when the pointer or focus leaves. */
-    scheduleClose() {
+    scheduleClose(event) {
         this.openTimer.stop();
         if (this.resolvedCloseDelay() <= 0) {
-            this.applyClose();
+            this.applyClose('trigger-hover', event);
         }
         else {
             this.closeTimer.start();
         }
     }
     /** Hover/focus entered — open after the delay, or instantly within the instant window. */
-    onTriggerEnter(trigger = this.trigger(), payload) {
+    onTriggerEnter(trigger = this.trigger(), payload, event) {
         if (this.disabled()) {
             return;
         }
@@ -282,7 +304,7 @@ class RdxTooltip {
         this.payload.set(payload);
         this.closeTimer.stop();
         if (this.instantGroup.isInstant() || this.resolvedDelay() <= 0) {
-            this.applyOpen(true, trigger, payload);
+            this.applyOpen(true, trigger, payload, 'trigger-hover', event);
         }
         else {
             this.openTimer.start();
@@ -308,7 +330,7 @@ class RdxTooltip {
                 const nextTrigger = this.triggers()[0];
                 this.trigger.set(nextTrigger);
                 if (!nextTrigger && !this.destroyRef.destroyed) {
-                    this.applyClose();
+                    this.applyClose('none');
                 }
             }
         };
@@ -321,12 +343,21 @@ class RdxTooltip {
         this.triggerDelay.set(delay);
         this.triggerCloseDelay.set(closeDelay);
     }
-    applyOpen(instant, trigger = this.trigger(), payload) {
+    applyOpen(instant, trigger = this.trigger(), payload, reason = 'none', event) {
         if (this.disabled()) {
             return;
         }
+        const wasOpen = this.open();
         this.openTimer.stop();
         this.closeTimer.stop();
+        if (!wasOpen) {
+            const { eventDetails } = createCancelableChangeEventDetails(reason, event ?? new Event('tooltip.open-change'), trigger);
+            this.onOpenChange.emit({ open: true, eventDetails });
+            if (eventDetails.isCanceled()) {
+                return;
+            }
+            this.suppressNextOpenChangeEmit = true;
+        }
         if (trigger) {
             this.trigger.set(trigger);
         }
@@ -334,10 +365,24 @@ class RdxTooltip {
             this.payload.set(payload);
         }
         this.openedInstant.set(instant || this.instantGroup.isInstant());
+        this.preventUnmountOnClose.set(false);
+        this.openChangeReason.set(reason);
         this.open.set(true);
     }
-    applyClose() {
+    applyClose(reason = 'none', event) {
+        if (!this.open()) {
+            return;
+        }
+        const change = createCancelableChangeEventDetails(reason, event ?? new Event('tooltip.open-change'), this.trigger());
+        const { eventDetails } = change;
+        this.onOpenChange.emit({ open: false, eventDetails });
+        if (eventDetails.isCanceled()) {
+            return;
+        }
+        this.suppressNextOpenChangeEmit = true;
+        this.preventUnmountOnClose.set(change.shouldPreventUnmountOnClose());
         this.openedInstant.set(this.instantGroup.isInstant());
+        this.openChangeReason.set(reason);
         this.open.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -364,6 +409,7 @@ function contextFor(root) {
     return {
         contentId: root.contentId,
         isOpen: root.open,
+        present: root.present,
         instant: root.instant,
         disabled: root.disabled,
         disableHoverablePopup: root.disableHoverablePopup,
@@ -371,11 +417,14 @@ function contextFor(root) {
         trigger: root.trigger.asReadonly(),
         triggers: root.triggers.asReadonly(),
         payload: root.payload.asReadonly(),
-        open: (trigger, payload) => root.show(trigger, payload),
-        close: () => root.close(),
-        closeDelayed: () => root.scheduleClose(),
+        openChangeReason: root.openChangeReason.asReadonly(),
+        open: (trigger, payload, event) => root.show(trigger, payload, event),
+        close: (reason, event) => root.close(reason, event),
+        cancelPendingOpen: () => root.cancelPendingOpen(),
+        closeHoverOpen: (event) => root.closeHoverOpen(event),
+        closeDelayed: (event) => root.scheduleClose(event),
         registerTrigger: (trigger) => root.registerTrigger(trigger),
-        onTriggerEnter: (trigger, payload) => root.onTriggerEnter(trigger, payload),
+        onTriggerEnter: (trigger, payload, event) => root.onTriggerEnter(trigger, payload, event),
         onTriggerLeave: () => root.onTriggerLeave(),
         setCursorPosition: (position) => root.setCursorPosition(position),
         setDelays: (delay, closeDelay) => root.setDelays(delay, closeDelay)
@@ -452,7 +501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  */
 class RdxTooltipPortal {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortal, isStandalone: true, selector: "ng-template[rdxTooltipPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().isOpen }))], exportAs: ["rdxTooltipPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortal, isStandalone: true, selector: "ng-template[rdxTooltipPortal]", providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().present }))], exportAs: ["rdxTooltipPortal"], hostDirectives: [{ directive: i1$1.RdxPortalPresence, inputs: ["container", "container"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, decorators: [{
             type: Directive,
@@ -460,7 +509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     selector: 'ng-template[rdxTooltipPortal]',
                     exportAs: 'rdxTooltipPortal',
                     hostDirectives: [{ directive: RdxPortalPresence, inputs: ['container'] }],
-                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().isOpen }))]
+                    providers: [provideRdxPresenceContext(() => ({ present: injectRdxTooltipContext().present }))]
                 }]
         }] });
 /**
@@ -522,7 +571,7 @@ class RdxTooltipPositioner extends RdxPopperContentWrapper {
                 const target = event.target;
                 const trigger = this.rootContext.trigger();
                 if (trigger && target?.contains(trigger)) {
-                    this.rootContext.close();
+                    this.rootContext.close('none', event);
                 }
             };
             window.addEventListener('scroll', handleScroll, { capture: true });
@@ -550,7 +599,7 @@ class RdxTooltipPositioner extends RdxPopperContentWrapper {
             focusOutside: () => false,
             onEscapeKeyDown: (event) => this.escapeKeyDown.emit(event),
             onPointerDownOutside: (event) => this.pointerDownOutside.emit(event),
-            onDismiss: () => this.rootContext.close()
+            onDismiss: (reason, event) => this.rootContext.close(reason === 'escape-key' ? 'escape-key' : 'outside-press', event)
         });
         // While following the cursor the popup sits right under the pointer; if it could intercept
         // the pointer it would steal hover from the trigger and the tooltip would flicker. Render it
@@ -581,6 +630,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
 
+const TOOLTIP_TRIGGER_ATTR = 'data-rdx-tooltip-trigger';
+function getTargetElement(event) {
+    if ('composedPath' in event) {
+        for (const target of event.composedPath()) {
+            if (target instanceof Element) {
+                return target;
+            }
+        }
+    }
+    return event.target instanceof Element ? event.target : null;
+}
+function closestEnabledTooltipTrigger(element) {
+    let current = element;
+    while (current) {
+        if (current.hasAttribute(TOOLTIP_TRIGGER_ATTR)) {
+            return current;
+        }
+        if (current.parentElement) {
+            current = current.parentElement;
+            continue;
+        }
+        const root = current.getRootNode();
+        current = 'host' in root && root.host instanceof Element ? root.host : null;
+    }
+    return null;
+}
+function isMouseLikePointerType(pointerType) {
+    return pointerType !== 'touch';
+}
 class RdxTooltipTrigger {
     constructor() {
         this.parentRootContext = injectRdxTooltipContext(true);
@@ -623,8 +701,16 @@ class RdxTooltipTrigger {
         this.isDisabled = computed(() => (this.rootContext()?.disabled() ?? false) || this.disabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
         /** Whether this specific trigger is the active anchor of an open tooltip. */
         this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.triggerInteraction = createRdxTriggerInteraction({
+            trigger: () => this.elementRef.nativeElement,
+            activeTrigger: () => this.rootContext()?.trigger(),
+            open: () => this.rootContext()?.isOpen() ?? false,
+            disabled: () => this.isDisabled(),
+            contentId: () => this.rootContext()?.contentId
+        });
         this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
         this.hasPointerMoveOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : /* istanbul ignore next */ []));
+        this.isNestedTriggerHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNestedTriggerHovered" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const handle = this.handle();
             if (handle) {
@@ -635,23 +721,30 @@ class RdxTooltipTrigger {
             }
         });
     }
-    handleFocus() {
+    handleFocus(event) {
         const rootContext = this.rootContext();
         if (!rootContext || this.isDisabled() || this.isPointerDown()) {
             return;
         }
         rootContext.setDelays(this.delay(), this.closeDelay());
-        rootContext.open(this.elementRef.nativeElement, this.payload());
+        rootContext.open(this.elementRef.nativeElement, this.payload(), event);
     }
-    handleBlur() {
-        this.rootContext()?.closeDelayed();
+    handleBlur(event) {
+        this.rootContext()?.closeDelayed(event);
     }
-    handleClick() {
+    handleClick(event) {
         const rootContext = this.rootContext();
         if (rootContext?.isOpen() && this.closeOnClick()) {
-            rootContext.close();
+            rootContext.close('trigger-press', event);
+            return;
+        }
+        if (rootContext && this.closeOnClick()) {
+            rootContext.cancelPendingOpen();
         }
     }
+    handlePointerEnter(event) {
+        this.pointerType = event.pointerType;
+    }
     handlePointerMove(event) {
         if (event.pointerType === 'touch') {
             return;
@@ -660,12 +753,16 @@ class RdxTooltipTrigger {
         if (!rootContext || this.isDisabled()) {
             return;
         }
+        this.pointerType = event.pointerType;
+        if (this.detectNestedTriggerHover(getTargetElement(event))) {
+            return;
+        }
         if (rootContext.trackCursorAxis() !== 'none') {
             rootContext.setCursorPosition({ x: event.clientX, y: event.clientY });
         }
         if (!this.hasPointerMoveOpened()) {
             rootContext.setDelays(this.delay(), this.closeDelay());
-            rootContext.onTriggerEnter(this.elementRef.nativeElement, this.payload());
+            rootContext.onTriggerEnter(this.elementRef.nativeElement, this.payload(), event);
             this.hasPointerMoveOpened.set(true);
         }
     }
@@ -673,6 +770,35 @@ class RdxTooltipTrigger {
         this.rootContext()?.onTriggerLeave();
         this.hasPointerMoveOpened.set(false);
     }
+    handleMouseOver(event) {
+        const wasNestedTriggerHovered = this.isNestedTriggerHovered();
+        const target = getTargetElement(event);
+        const nestedTriggerHovered = this.detectNestedTriggerHover(target);
+        const trigger = this.elementRef.nativeElement;
+        const targetInsideTrigger = target ? trigger.contains(target) : false;
+        const rootContext = this.rootContext();
+        if (!rootContext) {
+            return;
+        }
+        if (nestedTriggerHovered && rootContext.isOpen() && rootContext.openChangeReason() === 'trigger-hover') {
+            rootContext.closeHoverOpen();
+            return;
+        }
+        if (wasNestedTriggerHovered &&
+            !nestedTriggerHovered &&
+            targetInsideTrigger &&
+            !this.isDisabled() &&
+            !rootContext.isOpen() &&
+            isMouseLikePointerType(this.pointerType)) {
+            rootContext.setDelays(this.delay(), this.closeDelay());
+            rootContext.onTriggerEnter(trigger, this.payload(), event);
+            this.hasPointerMoveOpened.set(true);
+        }
+    }
+    handleMouseLeave() {
+        this.isNestedTriggerHovered.set(false);
+        this.pointerType = undefined;
+    }
     async handlePointerDown(event) {
         const user = this.userOnPointerDown();
         let result;
@@ -685,13 +811,28 @@ class RdxTooltipTrigger {
             return;
         }
         this.isPointerDown.set(true);
+        this.triggerInteraction.recordPointerDown(event);
+        this.pointerType = event.pointerType;
+        if (this.closeOnClick() && !this.rootContext()?.isOpen()) {
+            this.rootContext()?.cancelPendingOpen();
+        }
         const handlePointerUp = () => {
             setTimeout(() => this.isPointerDown.set(false), 1);
         };
         document.addEventListener('pointerup', handlePointerUp, { once: true });
     }
+    detectNestedTriggerHover(target) {
+        const trigger = this.elementRef.nativeElement;
+        const nearestTrigger = closestEnabledTooltipTrigger(target);
+        const nestedTriggerHovered = nearestTrigger !== null && nearestTrigger !== trigger && trigger.contains(nearestTrigger);
+        this.isNestedTriggerHovered.set(nestedTriggerHovered);
+        if (nestedTriggerHovered) {
+            this.rootContext()?.cancelPendingOpen();
+        }
+        return nestedTriggerHovered;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-grace-area-trigger": "''" }, listeners: { "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave()", "pointerdown": "handlePointerDown($event)", "focus": "handleFocus()", "blur": "handleBlur()", "click": "handleClick()" }, properties: { "id": "triggerId()", "attr.aria-describedby": "isOpen() ? rootContext()?.contentId : undefined", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-trigger-disabled": "isDisabled() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button", "data-grace-area-trigger": "''" }, listeners: { "pointerenter": "handlePointerEnter($event)", "pointermove": "handlePointerMove($event)", "pointerleave": "handlePointerLeave()", "mouseover": "handleMouseOver($event)", "mouseleave": "handleMouseLeave()", "pointerdown": "handlePointerDown($event)", "focus": "handleFocus($event)", "blur": "handleBlur($event)", "click": "handleClick($event)" }, properties: { "id": "triggerId()", "attr.aria-describedby": "isOpen() ? rootContext()?.contentId : undefined", "attr.data-popup-open": "triggerInteraction.dataPopupOpen()", "attr.data-trigger-disabled": "triggerInteraction.disabled() ? \"\" : undefined", "attr.data-rdx-tooltip-trigger": "isDisabled() ? undefined : \"\"" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
             type: Directive,
@@ -703,14 +844,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         'data-grace-area-trigger': "''",
                         '[id]': 'triggerId()',
                         '[attr.aria-describedby]': 'isOpen() ? rootContext()?.contentId : undefined',
-                        '[attr.data-popup-open]': 'isOpen() ? "" : undefined',
-                        '[attr.data-trigger-disabled]': 'isDisabled() ? "" : undefined',
+                        '[attr.data-popup-open]': 'triggerInteraction.dataPopupOpen()',
+                        '[attr.data-trigger-disabled]': 'triggerInteraction.disabled() ? "" : undefined',
+                        '[attr.data-rdx-tooltip-trigger]': 'isDisabled() ? undefined : ""',
+                        '(pointerenter)': 'handlePointerEnter($event)',
                         '(pointermove)': 'handlePointerMove($event)',
                         '(pointerleave)': 'handlePointerLeave()',
+                        '(mouseover)': 'handleMouseOver($event)',
+                        '(mouseleave)': 'handleMouseLeave()',
                         '(pointerdown)': 'handlePointerDown($event)',
-                        '(focus)': 'handleFocus()',
-                        '(blur)': 'handleBlur()',
-                        '(click)': 'handleClick()'
+                        '(focus)': 'handleFocus($event)',
+                        '(blur)': 'handleBlur($event)',
+                        '(click)': 'handleClick($event)'
                     }
                 }]
         }], ctorParameters: () => [], propDecorators: { handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], userOnPointerDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "rdxOnPointerDown", required: false }] }] } });