@radix-ng/primitives 0.50.0 → 1.0.0-beta.0

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

@@ -1,1208 +1,819 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, DestroyRef, computed, input, numberAttribute, booleanAttribute, output, effect, untracked, SimpleChange, Directive, ElementRef, NgZone, Renderer2, isDevMode, VERSION, Injectable, makeEnvironmentProviders, signal, contentChild, ViewContainerRef, afterNextRender, assertInInjectionContext, forwardRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/cdk/overlay';
-import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { RdxPositionSide, RdxPositionAlign, RDX_POSITIONING_DEFAULTS, getContentPosition, getAllPossibleConnectedPositions, injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from '@radix-ng/primitives/core';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { filter, tap, Subject, map, debounce, timer } from 'rxjs';
+import { InjectionToken, inject, signal, numberAttribute, DestroyRef, input, Directive, model, booleanAttribute, output, computed, effect, untracked, ElementRef, afterNextRender } from '@angular/core';
+import { createContext, injectId, watch, useGraceArea } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$2 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i1$3 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer } from '@radix-ng/primitives/dismissable-layer';
 
-const RdxTooltipAnchorToken = new InjectionToken('RdxTooltipAnchorToken');
-
-const RdxTooltipArrowToken = new InjectionToken('RdxTooltipArrowToken');
-
-const RdxTooltipCloseToken = new InjectionToken('RdxTooltipCloseToken');
+const defaultTooltipConfig = {
+    delay: 600,
+    closeDelay: 0,
+    timeout: 400,
+    disableHoverablePopup: false
+};
+const RdxTooltipDefaultsToken = new InjectionToken('RdxTooltipDefaultsToken');
+function provideRdxTooltipConfig(config) {
+    return [
+        {
+            provide: RdxTooltipDefaultsToken,
+            useValue: { ...defaultTooltipConfig, ...config }
+        }
+    ];
+}
+function injectRdxTooltipConfig() {
+    return { ...defaultTooltipConfig, ...inject(RdxTooltipDefaultsToken, { optional: true }) };
+}
 
-const RdxTooltipContentAttributesToken = new InjectionToken('RdxTooltipContentAttributesToken');
+/**
+ * Tracks the shared "instant" window for a group of tooltips. Once one tooltip
+ * opens, sibling tooltips open instantly until `timeout` ms after the last close.
+ */
+function createTooltipInstantController(timeout, destroyRef) {
+    const instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+    const timer = useTimeoutFn(() => instant.set(false), timeout, { immediate: false }, destroyRef);
+    return {
+        isInstant: instant.asReadonly(),
+        onOpen: () => {
+            timer.stop();
+            instant.set(true);
+        },
+        onClose: () => {
+            timer.start();
+        }
+    };
+}
+function useTimeoutFn(cb, delay, options = {}, destroyRef) {
+    let id = null;
+    const resolveDelay = () => (typeof delay === 'function' ? delay() : delay);
+    const stop = () => {
+        if (id != null) {
+            clearTimeout(id);
+            id = null;
+        }
+    };
+    const start = () => {
+        stop();
+        const ms = resolveDelay();
+        if (ms <= 0) {
+            queueMicrotask(cb);
+            return;
+        }
+        id = window.setTimeout(() => {
+            id = null;
+            cb();
+        }, ms);
+    };
+    if (options.immediate) {
+        start();
+    }
+    if (destroyRef) {
+        destroyRef.onDestroy(stop);
+    }
+    return { start, stop, isPending: () => id != null };
+}
 
-var RdxTooltipState;
-(function (RdxTooltipState) {
-    RdxTooltipState["OPEN"] = "open";
-    RdxTooltipState["CLOSED"] = "closed";
-})(RdxTooltipState || (RdxTooltipState = {}));
-var RdxTooltipAction;
-(function (RdxTooltipAction) {
-    RdxTooltipAction["OPEN"] = "open";
-    RdxTooltipAction["CLOSE"] = "close";
-})(RdxTooltipAction || (RdxTooltipAction = {}));
-var RdxTooltipAttachDetachEvent;
-(function (RdxTooltipAttachDetachEvent) {
-    RdxTooltipAttachDetachEvent["ATTACH"] = "attach";
-    RdxTooltipAttachDetachEvent["DETACH"] = "detach";
-})(RdxTooltipAttachDetachEvent || (RdxTooltipAttachDetachEvent = {}));
-var RdxTooltipAnimationStatus;
-(function (RdxTooltipAnimationStatus) {
-    RdxTooltipAnimationStatus["OPEN_STARTED"] = "open_started";
-    RdxTooltipAnimationStatus["OPEN_ENDED"] = "open_ended";
-    RdxTooltipAnimationStatus["CLOSED_STARTED"] = "closed_started";
-    RdxTooltipAnimationStatus["CLOSED_ENDED"] = "closed_ended";
-})(RdxTooltipAnimationStatus || (RdxTooltipAnimationStatus = {}));
+const [injectRdxTooltipProviderContext, provideRdxTooltipProviderContext] = createContext('RdxTooltipProviderContext');
+const numberOrUndefined = (value) => (value == null ? undefined : numberAttribute(value));
+const providerContext = () => {
+    const provider = inject(RdxTooltipProvider);
+    return {
+        delay: provider.delay,
+        closeDelay: provider.closeDelay,
+        isInstant: provider.instant.isInstant,
+        onOpen: () => provider.instant.onOpen(),
+        onClose: () => provider.instant.onClose()
+    };
+};
+/**
+ * Shares delay configuration and an instant-open window across a group of tooltips.
+ * Once one tooltip opens, adjacent ones open instantly until `timeout` ms after the last close.
+ */
+class RdxTooltipProvider {
+    constructor() {
+        this.defaultConfig = injectRdxTooltipConfig();
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * How long to wait before opening tooltips in this group. Specified in milliseconds.
+         */
+        this.delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        /**
+         * How long to wait before closing tooltips in this group. Specified in milliseconds.
+         */
+        this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberOrUndefined });
+        /**
+         * The window during which an adjacent tooltip opens instantly. Specified in milliseconds.
+         */
+        this.timeout = input(this.defaultConfig.timeout, { ...(ngDevMode ? { debugName: "timeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.instant = createTooltipInstantController(() => this.timeout(), this.destroyRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipProvider, isStandalone: true, selector: "[rdxTooltipProvider]", inputs: { delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideRdxTooltipProviderContext(providerContext)], exportAs: ["rdxTooltipProvider"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipProvider]',
+                    exportAs: 'rdxTooltipProvider',
+                    providers: [provideRdxTooltipProviderContext(providerContext)]
+                }]
+        }], propDecorators: { delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }] } });
 
-class RdxTooltipContentDirective {
+const [injectRdxTooltipContext, provideRdxTooltipContext] = createContext('RdxTooltipContext');
+const context = () => contextFor(inject(RdxTooltip));
+class RdxTooltip {
     constructor() {
-        /** @ignore */
-        this.rootDirective = injectTooltipRoot();
-        /** @ignore */
-        this.templateRef = inject(TemplateRef);
-        /** @ignore */
-        this.overlay = inject(Overlay);
-        /** @ignore */
+        this.defaultConfig = injectRdxTooltipConfig();
+        this.provider = injectRdxTooltipProviderContext(true);
+        this.popper = inject(RdxPopper);
         this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.connectedOverlay = inject(CdkConnectedOverlay);
-        /** @ignore */
-        this.name = computed(() => `rdx-tooltip-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.hasAppliedDefaultOpen = false;
         /**
-         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-         * @default top
+         * Whether the tooltip is currently open.
          */
-        this.side = input(RdxPositionSide.Top, ...(ngDevMode ? [{ debugName: "side" }] : []));
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
         /**
-         * @description The distance in pixels from the trigger.
-         * @default undefined
+         * Whether the tooltip is initially open. Uncontrolled.
          */
-        this.sideOffset = input(NaN, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description The preferred alignment against the trigger. May change when collisions occur.
-         * @default center
+         * How long to wait before opening the tooltip. Specified in milliseconds.
+         * Falls back to the surrounding provider, then to the global config.
          */
-        this.align = input(RdxPositionAlign.Center, ...(ngDevMode ? [{ debugName: "align" }] : []));
+        this.delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
         /**
-         * @description An offset in pixels from the "start" or "end" alignment options.
-         * @default undefined
+         * How long to wait before closing the tooltip. Specified in milliseconds.
          */
-        this.alignOffset = input(NaN, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
+        this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
         /**
-         * @description Whether to add some alternate positions of the content.
-         * @default false
+         * When `true`, the tooltip closes as the pointer leaves the trigger instead of
+         * staying open while the pointer moves over the popup.
          */
-        this.alternatePositionsDisabled = input(false, ...(ngDevMode ? [{ debugName: "alternatePositionsDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
-        this.onOverlayEscapeKeyDownDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayEscapeKeyDownDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
-        this.onOverlayOutsideClickDisabled = input(false, ...(ngDevMode ? [{ debugName: "onOverlayOutsideClickDisabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.disableHoverablePopup = input(this.defaultConfig.disableHoverablePopup, { ...(ngDevMode ? { debugName: "disableHoverablePopup" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Event handler called when the escape key is down.
-         * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
+         * Determines which axis the tooltip should track the cursor on.
          */
-        this.onOverlayEscapeKeyDown = output();
+        this.trackCursorAxis = input('none', ...(ngDevMode ? [{ debugName: "trackCursorAxis" }] : /* istanbul ignore next */ []));
         /**
-         * @description Event handler called when a pointer event occurs outside the bounds of the component.
-         * It can be prevented by setting `onOverlayOutsideClickDisabled` input to `true`.
+         * When `true`, the tooltip will not open.
          */
-        this.onOverlayOutsideClick = output();
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Event handler called after the overlay is open
+         * Associates this root with detached trigger elements.
          */
-        this.onOpen = output();
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         /**
-         * @description Event handler called after the overlay is closed
+         * Event handler called when the open state changes.
          */
-        this.onClosed = output();
-        /** @ingore */
-        this.positions = computed(() => this.computePositions(), ...(ngDevMode ? [{ debugName: "positions" }] : []));
-        this.onOriginChangeEffect();
-        this.onPositionChangeEffect();
+        this.onOpenChange = output();
+        this.contentId = injectId('rdx-tooltip-content-');
+        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        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.openedInstant = signal(false, ...(ngDevMode ? [{ debugName: "openedInstant" }] : /* istanbul ignore next */ []));
+        /** 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;
+        /** Per-trigger overrides set by the active trigger, taking precedence over the root/provider. */
+        this.triggerDelay = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerDelay" }] : /* istanbul ignore next */ []));
+        this.triggerCloseDelay = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerCloseDelay" }] : /* istanbul ignore next */ []));
+        this.resolvedDelay = computed(() => this.triggerDelay() ?? this.delay() ?? this.provider?.delay() ?? this.defaultConfig.delay, ...(ngDevMode ? [{ debugName: "resolvedDelay" }] : /* istanbul ignore next */ []));
+        this.resolvedCloseDelay = computed(() => this.triggerCloseDelay() ??
+            this.closeDelay() ??
+            this.provider?.closeDelay() ??
+            this.defaultConfig.closeDelay, ...(ngDevMode ? [{ debugName: "resolvedCloseDelay" }] : /* istanbul ignore next */ []));
+        /** Whether the most recent open happened without the delay. */
+        this.instant = this.openedInstant.asReadonly();
+        this.virtualAnchor = computed(() => {
+            const axis = this.trackCursorAxis();
+            const element = this.trigger();
+            if (axis === 'none' || !element) {
+                return element;
+            }
+            const position = this.cursorPosition();
+            if (!position) {
+                return element;
+            }
+            const followX = axis === 'x' || axis === 'both';
+            const followY = axis === 'y' || axis === 'both';
+            return {
+                getBoundingClientRect: () => {
+                    const rect = element.getBoundingClientRect();
+                    const width = followX ? 0 : rect.width;
+                    const height = followY ? 0 : rect.height;
+                    const x = followX ? position.x : rect.x;
+                    const y = followY ? position.y : rect.y;
+                    return { width, height, x, y, top: y, left: x, right: x + width, bottom: y + height };
+                }
+            };
+        }, ...(ngDevMode ? [{ debugName: "virtualAnchor" }] : /* istanbul ignore next */ []));
+        this.openTimer = useTimeoutFn(() => this.applyOpen(false), () => this.resolvedDelay(), { immediate: false }, this.destroyRef);
+        this.closeTimer = useTimeoutFn(() => this.applyClose(), () => this.resolvedCloseDelay(), { immediate: false }, this.destroyRef);
+        effect(() => {
+            const defaultOpen = this.defaultOpen();
+            if (!this.hasAppliedDefaultOpen && defaultOpen) {
+                this.hasAppliedDefaultOpen = true;
+                this.open.set(defaultOpen);
+            }
+        });
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerRoot(contextFor(this))));
+            }
+        });
+        // Keep the popper anchored to the active trigger, or to the cursor while tracking.
+        effect(() => this.popper.anchorOverride.set(this.virtualAnchor()));
+        watch([this.open], ([isOpen]) => {
+            this.onOpenChange.emit(isOpen);
+            if (isOpen) {
+                this.instantGroup.onOpen();
+            }
+            else {
+                this.instantGroup.onClose();
+                this.openedInstant.set(false);
+            }
+        }, { defer: true });
     }
-    /** @ignore */
-    ngOnInit() {
-        this.setScrollStrategy();
-        this.setHasBackdrop();
-        this.setDisableClose();
-        this.onAttach();
-        this.onDetach();
-        this.connectKeydownEscape();
-        this.connectOutsideClick();
+    /** Opens immediately, optionally switching the active trigger/payload. */
+    show(trigger = this.trigger(), payload) {
+        this.applyOpen(true, trigger, payload);
     }
-    /** @ignore */
-    open() {
-        if (this.connectedOverlay.open) {
-            return;
+    close() {
+        this.openTimer.stop();
+        this.closeTimer.stop();
+        this.applyClose();
+    }
+    /** Closes after the resolved close delay, e.g. when the pointer or focus leaves. */
+    scheduleClose() {
+        this.openTimer.stop();
+        if (this.resolvedCloseDelay() <= 0) {
+            this.applyClose();
+        }
+        else {
+            this.closeTimer.start();
         }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = true;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
     }
-    /** @ignore */
-    close() {
-        if (!this.connectedOverlay.open) {
+    /** Hover/focus entered — open after the delay, or instantly within the instant window. */
+    onTriggerEnter(trigger = this.trigger(), payload) {
+        if (this.disabled()) {
             return;
         }
-        const prevOpen = this.connectedOverlay.open;
-        this.connectedOverlay.open = false;
-        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
-    }
-    /** @ignore */
-    positionChange() {
-        return this.connectedOverlay.positionChange.asObservable();
-    }
-    /** @ignore */
-    connectKeydownEscape() {
-        this.connectedOverlay.overlayKeydown
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayEscapeKeyDownDisabled() &&
-            !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayEscapeKeyDown')), filter((event) => event.key === 'Escape'), tap((event) => {
-            this.onOverlayEscapeKeyDown.emit(event);
-        }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
-            this.rootDirective.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    connectOutsideClick() {
-        this.connectedOverlay.overlayOutsideClick
-            .asObservable()
-            .pipe(filter(() => !this.onOverlayOutsideClickDisabled() &&
-            !this.rootDirective.rdxCdkEventService?.primitivePreventedFromCdkEvent(this.rootDirective, 'cdkOverlayOutsideClick')), 
-        /**
-         * Handle the situation when an anchor is added and the anchor becomes the origin of the overlay
-         * hence  the trigger will be considered the outside element
-         */
-        filter((event) => {
-            return (!this.rootDirective.anchorDirective() ||
-                !this.rootDirective
-                    .triggerDirective()
-                    .elementRef.nativeElement.contains(event.target));
-        }), tap((event) => {
-            this.onOverlayOutsideClick.emit(event);
-        }), filter(() => !this.rootDirective.firstDefaultOpen()), tap(() => {
-            this.rootDirective.handleClose();
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    onAttach() {
-        this.connectedOverlay.attach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onOpen.emit();` is being delegated to the rootDirective directive due to the opening animation
-             */
-            this.rootDirective.attachDetachEvent.set(RdxTooltipAttachDetachEvent.ATTACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    onDetach() {
-        this.connectedOverlay.detach
-            .asObservable()
-            .pipe(tap(() => {
-            /**
-             * `this.onClosed.emit();` is being delegated to the rootDirective directive due to the closing animation
-             */
-            this.rootDirective.attachDetachEvent.set(RdxTooltipAttachDetachEvent.DETACH);
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe();
-    }
-    /** @ignore */
-    setScrollStrategy() {
-        const prevScrollStrategy = this.connectedOverlay.scrollStrategy;
-        this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();
-        this.fireOverlayNgOnChanges('scrollStrategy', this.connectedOverlay.scrollStrategy, prevScrollStrategy);
+        if (trigger) {
+            this.trigger.set(trigger);
+        }
+        this.payload.set(payload);
+        this.closeTimer.stop();
+        if (this.instantGroup.isInstant() || this.resolvedDelay() <= 0) {
+            this.applyOpen(true, trigger, payload);
+        }
+        else {
+            this.openTimer.start();
+        }
     }
-    /** @ignore */
-    setHasBackdrop() {
-        const prevHasBackdrop = this.connectedOverlay.hasBackdrop;
-        this.connectedOverlay.hasBackdrop = false;
-        this.fireOverlayNgOnChanges('hasBackdrop', this.connectedOverlay.hasBackdrop, prevHasBackdrop);
+    onTriggerLeave() {
+        this.openTimer.stop();
+        if (this.disableHoverablePopup()) {
+            this.scheduleClose();
+        }
+        // Otherwise the positioner's grace area decides when to close.
     }
-    /** @ignore */
-    setDisableClose() {
-        const prevDisableClose = this.connectedOverlay.disableClose;
-        this.connectedOverlay.disableClose = true;
-        this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
+    registerTrigger(trigger) {
+        this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        if (!this.trigger()) {
+            this.trigger.set(trigger);
+        }
+        return () => {
+            this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            if (this.trigger() === trigger) {
+                const nextTrigger = this.triggers()[0];
+                this.trigger.set(nextTrigger);
+                if (!nextTrigger && !this.destroyRef.destroyed) {
+                    this.applyClose();
+                }
+            }
+        };
     }
-    /** @ignore */
-    setOrigin(origin) {
-        const prevOrigin = this.connectedOverlay.origin;
-        this.connectedOverlay.origin = origin;
-        this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
+    setCursorPosition(position) {
+        this.cursorPosition.set(position);
     }
-    /** @ignore */
-    setPositions(positions) {
-        const prevPositions = this.connectedOverlay.positions;
-        this.connectedOverlay.positions = positions;
-        this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
-        this.connectedOverlay.overlayRef?.updatePosition();
+    /** Applies per-trigger delay overrides from the trigger that is becoming active. */
+    setDelays(delay, closeDelay) {
+        this.triggerDelay.set(delay);
+        this.triggerCloseDelay.set(closeDelay);
     }
-    /** @ignore */
-    computePositions() {
-        const arrowHeight = this.rootDirective.arrowDirective()?.height() ?? 0;
-        const offsets = {
-            sideOffset: arrowHeight + (isNaN(this.sideOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.side : this.sideOffset()),
-            alignOffset: isNaN(this.alignOffset()) ? RDX_POSITIONING_DEFAULTS.offsets.align : this.alignOffset()
-        };
-        const basePosition = getContentPosition({
-            side: this.side(),
-            align: this.align(),
-            sideOffset: offsets.sideOffset,
-            alignOffset: offsets.alignOffset
-        });
-        const positions = [basePosition];
-        if (!this.alternatePositionsDisabled()) {
-            /**
-             * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)
-             */
-            const allPossibleConnectedPositions = getAllPossibleConnectedPositions();
-            allPossibleConnectedPositions.forEach((_, key) => {
-                const sideAndAlignArray = key.split('|');
-                if (sideAndAlignArray[0] !== this.side() ||
-                    sideAndAlignArray[1] !== this.align()) {
-                    positions.push(getContentPosition({
-                        side: sideAndAlignArray[0],
-                        align: sideAndAlignArray[1],
-                        sideOffset: offsets.sideOffset,
-                        alignOffset: offsets.alignOffset
-                    }));
-                }
-            });
+    applyOpen(instant, trigger = this.trigger(), payload) {
+        if (this.disabled()) {
+            return;
         }
-        return positions;
+        this.openTimer.stop();
+        this.closeTimer.stop();
+        if (trigger) {
+            this.trigger.set(trigger);
+        }
+        if (payload !== undefined) {
+            this.payload.set(payload);
+        }
+        this.openedInstant.set(instant || this.instantGroup.isInstant());
+        this.open.set(true);
     }
-    onOriginChangeEffect() {
-        effect(() => {
-            const origin = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective())
-                .overlayOrigin;
-            untracked(() => {
-                this.setOrigin(origin);
-            });
-        });
+    applyClose() {
+        this.openedInstant.set(this.instantGroup.isInstant());
+        this.open.set(false);
     }
-    /** @ignore */
-    onPositionChangeEffect() {
-        effect(() => {
-            const positions = this.positions();
-            this.alternatePositionsDisabled();
-            untracked(() => {
-                this.setPositions(positions);
-            });
-        });
-    }
-    /** @ignore */
-    fireOverlayNgOnChanges(input, currentValue, previousValue, firstChange = false) {
-        this.connectedOverlay.ngOnChanges({
-            [input]: new SimpleChange(previousValue, currentValue, firstChange)
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltip, isStandalone: true, selector: "[rdxTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", 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 }, disableHoverablePopup: { classPropertyName: "disableHoverablePopup", publicName: "disableHoverablePopup", isSignal: true, isRequired: false, transformFunction: null }, trackCursorAxis: { classPropertyName: "trackCursorAxis", publicName: "trackCursorAxis", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", onOpenChange: "onOpenChange" }, providers: [provideRdxTooltipContext(context)], exportAs: ["rdxTooltip"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltip]',
+                    exportAs: 'rdxTooltip',
+                    providers: [provideRdxTooltipContext(context)],
+                    hostDirectives: [RdxPopper]
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }], disableHoverablePopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableHoverablePopup", required: false }] }], trackCursorAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackCursorAxis", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }] } });
+function contextFor(root) {
+    return {
+        contentId: root.contentId,
+        isOpen: root.open,
+        instant: root.instant,
+        disabled: root.disabled,
+        disableHoverablePopup: root.disableHoverablePopup,
+        trackCursorAxis: root.trackCursorAxis,
+        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(),
+        registerTrigger: (trigger) => root.registerTrigger(trigger),
+        onTriggerEnter: (trigger, payload) => root.onTriggerEnter(trigger, payload),
+        onTriggerLeave: () => root.onTriggerLeave(),
+        setCursorPosition: (position) => root.setCursorPosition(position),
+        setDelays: (delay, closeDelay) => root.setDelays(delay, closeDelay)
+    };
+}
+
+class RdxTooltipArrow {
+    constructor() {
+        this.rootContext = injectRdxTooltipContext();
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+        this.isVisuallyHidden = !!inject(RdxVisuallyHiddenDirective, {
+            optional: true
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTooltipContentDirective, isStandalone: true, selector: "[rdxTooltipContent]", inputs: { side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, alternatePositionsDisabled: { classPropertyName: "alternatePositionsDisabled", publicName: "alternatePositionsDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayEscapeKeyDownDisabled: { classPropertyName: "onOverlayEscapeKeyDownDisabled", publicName: "onOverlayEscapeKeyDownDisabled", isSignal: true, isRequired: false, transformFunction: null }, onOverlayOutsideClickDisabled: { classPropertyName: "onOverlayOutsideClickDisabled", publicName: "onOverlayOutsideClickDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOverlayEscapeKeyDown: "onOverlayEscapeKeyDown", onOverlayOutsideClick: "onOverlayOutsideClick", onOpen: "onOpen", onClosed: "onClosed" }, hostDirectives: [{ directive: i1.CdkConnectedOverlay }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipArrow, isStandalone: true, selector: "[rdxTooltipArrow]", host: { properties: { "hidden": "isVisuallyHidden", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipArrow, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipContent]',
-                    hostDirectives: [CdkConnectedOverlay]
+                    selector: '[rdxTooltipArrow]',
+                    hostDirectives: [RdxPopperArrow],
+                    host: {
+                        '[hidden]': 'isVisuallyHidden',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-uncentered]': 'uncentered() ? "" : undefined'
+                    }
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class RdxTooltipTriggerDirective {
+/**
+ * The tooltip popup. Renders the content with `role="tooltip"`.
+ */
+class RdxTooltipPopup {
     constructor() {
-        /** @ignore */
-        this.rootDirective = injectTooltipRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.name = computed(() => `rdx-tooltip-trigger-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    pointerenter() {
-        this.rootDirective.handleOpen();
+        this.rootContext = injectRdxTooltipContext();
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     }
-    /** @ignore */
-    pointerleave() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    focus() {
-        this.rootDirective.handleOpen();
-    }
-    /** @ignore */
-    blur() {
-        this.rootDirective.handleClose();
-    }
-    /** @ignore */
-    click() {
-        this.rootDirective.handleClose();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipTriggerDirective, isStandalone: true, selector: "[rdxTooltipTrigger]", host: { attributes: { "type": "button" }, listeners: { "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()", "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"", "attr.aria-expanded": "rootDirective.isOpen()", "attr.aria-controls": "rootDirective.contentDirective().name()", "attr.data-state": "rootDirective.state()" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPopup, isStandalone: true, selector: "[rdxTooltipPopup]", host: { attributes: { "role": "tooltip" }, properties: { "id": "rootContext.contentId", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-side": "side()", "attr.data-align": "align()" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPopup, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipTrigger]',
-                    hostDirectives: [CdkOverlayOrigin],
+                    selector: '[rdxTooltipPopup]',
+                    hostDirectives: [RdxPopperContent],
                     host: {
-                        type: 'button',
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '[attr.aria-expanded]': 'rootDirective.isOpen()',
-                        '[attr.aria-controls]': 'rootDirective.contentDirective().name()',
-                        '[attr.data-state]': 'rootDirective.state()',
-                        '(pointerenter)': 'pointerenter()',
-                        '(pointerleave)': 'pointerleave()',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()',
-                        '(click)': 'click()'
+                        role: 'tooltip',
+                        '[id]': 'rootContext.contentId',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-align]': 'align()'
                     }
                 }]
         }] });
 
-const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
+/**
+ * Moves the tooltip to a different part of the DOM.
+ */
+class RdxTooltipPortal {
+    constructor() {
+        this.container = input.required(...(ngDevMode ? [{ debugName: "container" }] : /* istanbul ignore next */ []));
+    }
+    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: "17.1.0", version: "21.2.9", type: RdxTooltipPortal, isStandalone: true, selector: "[rdxTooltipPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipPortal]',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: true }] }] } });
 
-function eventTypeAsPrimitiveConfigKey(eventType) {
-    return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
+class RdxTooltipPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxTooltipPortalPresence, isStandalone: true, selector: "ng-template[rdxTooltipPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectRdxTooltipContext();
+                return { present: context.isOpen };
+            })
+        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
 }
-class RdxCdkEventService {
-    #clickDomRootEventCallbacks;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxTooltipPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectRdxTooltipContext();
+                            return { present: context.isOpen };
+                        })
+                    ]
+                }]
+        }] });
+
+/**
+ * Positions the tooltip popup against its trigger (or a custom anchor).
+ */
+class RdxTooltipPositioner {
     constructor() {
-        this.document = injectDocument();
+        this.rootContext = injectRdxTooltipContext();
+        this.wrapper = inject(RdxPopperContentWrapper);
         this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.renderer2 = inject(Renderer2);
-        this.window = injectWindow();
-        this.onDestroyCallbacks = new Set([() => deleteRdxCdkEventServiceWindowKey(this.window)]);
-        this.#clickDomRootEventCallbacks = new Set();
-        this.#listenToClickDomRootEvent();
-        this.#registerOnDestroyCallbacks();
-    }
-    registerPrimitive(primitiveInstance) {
-        if (!this.primitiveConfigs) {
-            this.primitiveConfigs = new Map();
-        }
-        if (!this.primitiveConfigs.has(primitiveInstance)) {
-            this.primitiveConfigs.set(primitiveInstance, {});
-        }
-    }
-    deregisterPrimitive(primitiveInstance) {
-        if (this.primitiveConfigs?.has(primitiveInstance)) {
-            this.primitiveConfigs.delete(primitiveInstance);
-        }
-    }
-    preventPrimitiveFromCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-    }
-    allowPrimitiveForCdkEvent(primitiveInstance, eventType) {
-        this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-    }
-    preventPrimitiveFromCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, true);
-        });
-    }
-    allowPrimitiveForCdkMultiEvents(primitiveInstance, eventTypes) {
-        eventTypes.forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, false);
-        });
-    }
-    setPreventPrimitiveFromCdkMixEvents(primitiveInstance, eventTypes) {
-        Object.keys(eventTypes).forEach((eventType) => {
-            this.#setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, eventTypes[eventTypeAsPrimitiveConfigKey(eventType)]);
-        });
-    }
-    primitivePreventedFromCdkEvent(primitiveInstance, eventType) {
-        return this.primitiveConfigs?.get(primitiveInstance)?.[eventTypeAsPrimitiveConfigKey(eventType)];
-    }
-    addClickDomRootEventCallback(callback) {
-        this.#clickDomRootEventCallbacks.add(callback);
-    }
-    removeClickDomRootEventCallback(callback) {
-        return this.#clickDomRootEventCallbacks.delete(callback);
-    }
-    #setPreventPrimitiveFromCdkEvent(primitiveInstance, eventType, value) {
-        if (!this.primitiveConfigs?.has(primitiveInstance)) {
-            isDevMode() &&
-                console.error('[RdxCdkEventService.preventPrimitiveFromCdkEvent] RDX Primitive instance has not been registered!', primitiveInstance);
-            return;
-        }
-        switch (eventType) {
-            case 'cdkOverlayOutsideClick':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayOutsideClick = value;
-                break;
-            case 'cdkOverlayEscapeKeyDown':
-                this.primitiveConfigs.get(primitiveInstance).preventCdkOverlayEscapeKeyDown = value;
-                break;
-        }
-    }
-    #registerOnDestroyCallbacks() {
-        this.destroyRef.onDestroy(() => {
-            this.onDestroyCallbacks.forEach((onDestroyCallback) => onDestroyCallback());
-            this.onDestroyCallbacks.clear();
-        });
-    }
-    #listenToClickDomRootEvent() {
-        const target = this.document;
-        const eventName = 'click';
-        const options = { capture: true };
-        const callback = (event) => {
-            this.#clickDomRootEventCallbacks.forEach((clickDomRootEventCallback) => clickDomRootEventCallback(event));
-        };
-        const major = parseInt(VERSION.major);
-        const minor = parseInt(VERSION.minor);
-        let destroyClickDomRootEventListener;
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.elementRef = inject(ElementRef);
         /**
-         * @see src/cdk/platform/features/backwards-compatibility.ts in @angular/cdk
+         * An element to position the popup against. Defaults to the trigger.
          */
-        if (major > 19 || (major === 19 && minor > 0) || (major === 0 && minor === 0)) {
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                const destroyClickDomRootEventListenerInternal = this.renderer2.listen(target, eventName, callback, options);
-                return () => {
-                    destroyClickDomRootEventListenerInternal();
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        else {
-            /**
-             * This part can get removed when v19.1 or higher is on the board
-             */
-            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
-                target.addEventListener(eventName, callback, options);
-                return () => {
-                    this.ngZone.runOutsideAngular(() => target.removeEventListener(eventName, callback, options));
-                    this.#clickDomRootEventCallbacks.clear();
-                };
-            });
-        }
-        this.onDestroyCallbacks.add(destroyClickDomRootEventListener);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCdkEventService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-const RdxCdkEventServiceToken = new InjectionToken('RdxCdkEventServiceToken');
-const existsErrorMessage = 'RdxCdkEventService should be provided only once!';
-const deleteRdxCdkEventServiceWindowKey = (window) => {
-    delete window[RdxCdkEventServiceWindowKey];
-};
-const getProvider = (throwWhenExists = true) => ({
-    provide: RdxCdkEventServiceToken,
-    useFactory: () => {
-        isDevMode() && console.log('providing RdxCdkEventService...');
-        const window = injectWindow();
-        if (window[RdxCdkEventServiceWindowKey]) {
-            if (throwWhenExists) {
-                throw Error(existsErrorMessage);
-            }
-            else {
-                isDevMode() && console.warn(existsErrorMessage);
-            }
-        }
-        window[RdxCdkEventServiceWindowKey] ??= new RdxCdkEventService();
-        return window[RdxCdkEventServiceWindowKey];
-    }
-});
-const provideRdxCdkEventServiceInRoot = () => makeEnvironmentProviders([getProvider()]);
-const provideRdxCdkEventService = () => getProvider(false);
-const injectRdxCdkEventService = () => inject(RdxCdkEventServiceToken, { optional: true });
-
-let nextId = 0;
-class RdxTooltipRootDirective {
-    constructor() {
-        /** @ignore */
-        this.uniqueId = signal(++nextId, ...(ngDevMode ? [{ debugName: "uniqueId" }] : []));
-        /** @ignore */
-        this.name = computed(() => `rdx-tooltip-root-${this.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
+        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
         /**
-         * @description The anchor directive that comes form outside the tooltip rootDirective
-         * @default undefined
+         * The preferred side of the anchor to render against when open.
          */
-        this.anchor = input(void 0, ...(ngDevMode ? [{ debugName: "anchor" }] : []));
+        this.side = input('top', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
         /**
-         * @description The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
-         * @default false
+         * The distance in pixels from the anchor.
          */
-        this.defaultOpen = input(false, ...(ngDevMode ? [{ debugName: "defaultOpen", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * @description The controlled state of the tooltip. `open` input take precedence of `defaultOpen` input.
-         * @default undefined
+         * The preferred alignment against the anchor.
          */
-        this.open = input(void 0, ...(ngDevMode ? [{ debugName: "open", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
         /**
-         * To customise the open delay for a specific tooltip.
+         * An offset in pixels from the `start` or `end` alignment options.
          */
-        this.openDelay = input(500, ...(ngDevMode ? [{ debugName: "openDelay", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * To customise the close delay for a specific tooltip.
+         * The padding between the arrow and the edges of the content.
          */
-        this.closeDelay = input(200, ...(ngDevMode ? [{ debugName: "closeDelay", transform: numberAttribute }] : [{
-                transform: numberAttribute
-            }]));
+        this.arrowPadding = input(5, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /**
-         * @description Whether to control the state of the tooltip from external. Use in conjunction with `open` input.
-         * @default undefined
+         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
          */
-        this.externalControl = input(void 0, ...(ngDevMode ? [{ debugName: "externalControl", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Whether to take into account CSS opening/closing animations.
-         * @default false
+         * The element used as the collision boundary.
          */
-        this.cssAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
         /**
-         * @description Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
-         * @default false
+         * The distance in pixels from the boundary edges where collision detection should occur.
          */
-        this.cssOpeningAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssOpeningAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.collisionPadding = input(5, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
         /**
-         * @description Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
-         * @default false
+         * The sticky behavior on the `align` axis.
          */
-        this.cssClosingAnimation = input(false, ...(ngDevMode ? [{ debugName: "cssClosingAnimation", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
-        /** @ignore */
-        this.cssAnimationStatus = signal(null, ...(ngDevMode ? [{ debugName: "cssAnimationStatus" }] : []));
-        /** @ignore */
-        this.contentDirective = contentChild.required(RdxTooltipContentDirective);
-        /** @ignore */
-        this.triggerDirective = contentChild.required(RdxTooltipTriggerDirective);
-        /** @ignore */
-        this.arrowDirective = contentChild(RdxTooltipArrowToken, ...(ngDevMode ? [{ debugName: "arrowDirective" }] : []));
-        /** @ignore */
-        this.closeDirective = contentChild(RdxTooltipCloseToken, ...(ngDevMode ? [{ debugName: "closeDirective" }] : []));
-        /** @ignore */
-        this.contentAttributesComponent = contentChild(RdxTooltipContentAttributesToken, ...(ngDevMode ? [{ debugName: "contentAttributesComponent" }] : []));
-        /** @ignore */
-        this.internalAnchorDirective = contentChild(RdxTooltipAnchorToken, ...(ngDevMode ? [{ debugName: "internalAnchorDirective" }] : []));
-        /** @ignore */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** @ignore */
-        this.rdxCdkEventService = injectRdxCdkEventService();
-        /** @ignore */
-        this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.state = signal(RdxTooltipState.CLOSED, ...(ngDevMode ? [{ debugName: "state" }] : []));
-        /** @ignore */
-        this.attachDetachEvent = signal(RdxTooltipAttachDetachEvent.DETACH, ...(ngDevMode ? [{ debugName: "attachDetachEvent" }] : []));
-        /** @ignore */
-        this.isFirstDefaultOpen = signal(false, ...(ngDevMode ? [{ debugName: "isFirstDefaultOpen" }] : []));
-        /** @ignore */
-        this.anchorDirective = computed(() => this.internalAnchorDirective() ?? this.anchor(), ...(ngDevMode ? [{ debugName: "anchorDirective" }] : []));
-        /** @ignore */
-        this.actionSubject$ = new Subject();
-        /** @ignore */
-        this.onAnchorChangeEffect = () => {
-            effect(() => {
-                const anchor = this.anchor();
-                untracked(() => {
-                    if (anchor) {
-                        anchor.setRoot(this);
-                    }
-                });
-            });
-        };
-        this.rdxCdkEventService?.registerPrimitive(this);
-        this.destroyRef.onDestroy(() => this.rdxCdkEventService?.deregisterPrimitive(this));
-        this.actionSubscription();
-        this.onStateChangeEffect();
-        this.onCssAnimationStatusChangeChangeEffect();
-        this.onOpenChangeEffect();
-        this.onIsFirstDefaultOpenChangeEffect();
-        this.onAnchorChangeEffect();
-        this.emitOpenOrClosedEventEffect();
-        afterNextRender({
-            write: () => {
-                if (this.defaultOpen() && !this.open()) {
-                    this.isFirstDefaultOpen.set(true);
-                }
-            }
-        });
-    }
-    /** @ignore */
-    getAnimationParamsSnapshot() {
-        return {
-            cssAnimation: this.cssAnimation(),
-            cssOpeningAnimation: this.cssOpeningAnimation(),
-            cssClosingAnimation: this.cssClosingAnimation(),
-            cssAnimationStatus: this.cssAnimationStatus(),
-            attachDetachEvent: this.attachDetachEvent(),
-            state: this.state(),
-            canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
-        };
-    }
-    /** @ignore */
-    controlledExternally() {
-        return this.externalControl;
-    }
-    /** @ignore */
-    firstDefaultOpen() {
-        return this.isFirstDefaultOpen();
-    }
-    /** @ignore */
-    handleOpen() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.actionSubject$.next(RdxTooltipAction.OPEN);
-    }
-    /** @ignore */
-    handleClose(closeButton) {
-        if (this.isFirstDefaultOpen()) {
-            this.isFirstDefaultOpen.set(false);
-        }
-        if (!closeButton && this.externalControl()) {
-            return;
-        }
-        this.actionSubject$.next(RdxTooltipAction.CLOSE);
-    }
-    /** @ignore */
-    handleToggle() {
-        if (this.externalControl()) {
-            return;
-        }
-        this.isOpen() ? this.handleClose() : this.handleOpen();
-    }
-    /** @ignore */
-    isOpen(state) {
-        return (state ?? this.state()) === RdxTooltipState.OPEN;
-    }
-    /** @ignore */
-    setState(state = RdxTooltipState.CLOSED) {
-        if (state === this.state()) {
-            return;
-        }
-        this.state.set(state);
-    }
-    /** @ignore */
-    openContent() {
-        this.contentDirective().open();
-        if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    closeContent() {
-        this.contentDirective().close();
-        if (!this.cssAnimation() || !this.cssClosingAnimation()) {
-            this.cssAnimationStatus.set(null);
-        }
-    }
-    /** @ignore */
-    emitOnOpen() {
-        this.contentDirective().onOpen.emit();
-    }
-    /** @ignore */
-    emitOnClosed() {
-        this.contentDirective().onClosed.emit();
-    }
-    /** @ignore */
-    ifOpenOrCloseWithoutAnimations(state) {
-        return (!this.contentAttributesComponent() ||
-            !this.cssAnimation() ||
-            (this.cssAnimation() && !this.cssClosingAnimation() && state === RdxTooltipState.CLOSED) ||
-            (this.cssAnimation() && !this.cssOpeningAnimation() && state === RdxTooltipState.OPEN) ||
-            // !this.cssAnimationStatus() ||
-            (this.cssOpeningAnimation() &&
-                state === RdxTooltipState.OPEN &&
-                [RdxTooltipAnimationStatus.OPEN_STARTED].includes(this.cssAnimationStatus())) ||
-            (this.cssClosingAnimation() &&
-                state === RdxTooltipState.CLOSED &&
-                [RdxTooltipAnimationStatus.CLOSED_STARTED].includes(this.cssAnimationStatus())));
-    }
-    /** @ignore */
-    ifOpenOrCloseWithAnimations(cssAnimationStatus) {
-        return (this.contentAttributesComponent() &&
-            this.cssAnimation() &&
-            cssAnimationStatus &&
-            ((this.cssOpeningAnimation() &&
-                this.state() === RdxTooltipState.OPEN &&
-                [RdxTooltipAnimationStatus.OPEN_ENDED].includes(cssAnimationStatus)) ||
-                (this.cssClosingAnimation() &&
-                    this.state() === RdxTooltipState.CLOSED &&
-                    [RdxTooltipAnimationStatus.CLOSED_ENDED].includes(cssAnimationStatus))));
-    }
-    /** @ignore */
-    openOrClose(state) {
-        const isOpen = this.isOpen(state);
-        isOpen ? this.openContent() : this.closeContent();
-    }
-    /** @ignore */
-    emitOnOpenOrOnClosed(state) {
-        this.isOpen(state)
-            ? this.attachDetachEvent() === RdxTooltipAttachDetachEvent.ATTACH && this.emitOnOpen()
-            : this.attachDetachEvent() === RdxTooltipAttachDetachEvent.DETACH && this.emitOnClosed();
-    }
-    /** @ignore */
-    canEmitOnOpenOrOnClosed() {
-        return (!this.cssAnimation() ||
-            (!this.cssOpeningAnimation() && this.state() === RdxTooltipState.OPEN) ||
-            (this.cssOpeningAnimation() &&
-                this.state() === RdxTooltipState.OPEN &&
-                this.cssAnimationStatus() === RdxTooltipAnimationStatus.OPEN_ENDED) ||
-            (!this.cssClosingAnimation() && this.state() === RdxTooltipState.CLOSED) ||
-            (this.cssClosingAnimation() &&
-                this.state() === RdxTooltipState.CLOSED &&
-                this.cssAnimationStatus() === RdxTooltipAnimationStatus.CLOSED_ENDED));
-    }
-    /** @ignore */
-    onStateChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const state = this.state();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithoutAnimations(state)) {
-                    return;
-                }
-                this.openOrClose(state);
-            });
-        }, {});
-    }
-    /** @ignore */
-    onCssAnimationStatusChangeChangeEffect() {
-        let isFirst = true;
-        effect(() => {
-            const cssAnimationStatus = this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                if (!this.ifOpenOrCloseWithAnimations(cssAnimationStatus)) {
-                    return;
-                }
-                this.openOrClose(this.state());
-            });
-        });
-    }
-    /** @ignore */
-    emitOpenOrClosedEventEffect() {
-        let isFirst = true;
-        effect(() => {
-            this.attachDetachEvent();
-            this.cssAnimationStatus();
-            untracked(() => {
-                if (isFirst) {
-                    isFirst = false;
-                    return;
-                }
-                const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
-                if (!canEmitOpenClose) {
-                    return;
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the content when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The CSS position strategy used by Floating UI.
+         */
+        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to update the position of the floating element on every animation frame if required.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the element is placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(this.wrapper.placed));
+        /**
+         * Event handler called when the escape key is down. Can be prevented.
+         */
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        /**
+         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(null, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.graceArea = useGraceArea(this.triggerEl, this.containerEl, 300);
+        this.afterNextRender = afterNextRender(() => {
+            this.triggerEl.set(this.rootContext.trigger() ?? null);
+            this.containerEl.set(this.elementRef.nativeElement);
+            const handleScroll = (event) => {
+                const target = event.target;
+                const trigger = this.rootContext.trigger();
+                if (trigger && target?.contains(trigger)) {
+                    this.rootContext.close();
                 }
-                this.emitOnOpenOrOnClosed(this.state());
-            });
-        });
-    }
-    /** @ignore */
-    onOpenChangeEffect() {
-        effect(() => {
-            const open = this.open();
-            untracked(() => {
-                this.setState(open ? RdxTooltipState.OPEN : RdxTooltipState.CLOSED);
+            };
+            window.addEventListener('scroll', handleScroll, { capture: true });
+            this.destroyRef.onDestroy(() => {
+                window.removeEventListener('scroll', handleScroll, { capture: true });
             });
-        });
-    }
-    /** @ignore */
-    onIsFirstDefaultOpenChangeEffect() {
-        const effectRef = effect(() => {
-            const defaultOpen = this.defaultOpen();
-            untracked(() => {
-                if (!defaultOpen || this.open()) {
-                    effectRef.destroy();
+            this.graceArea.onPointerExit(() => {
+                if (this.rootContext.disableHoverablePopup())
                     return;
-                }
-                this.handleOpen();
+                this.rootContext.closeDelayed();
             });
-        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : []));
-    }
-    /** @ignore */
-    actionSubscription() {
-        this.actionSubject$
-            .asObservable()
-            .pipe(map((action) => {
-            switch (action) {
-                case RdxTooltipAction.OPEN:
-                    return { action, duration: this.openDelay() };
-                case RdxTooltipAction.CLOSE:
-                    return { action, duration: this.closeDelay() };
-            }
-        }), debounce((config) => timer(config.duration)), tap((config) => {
-            switch (config.action) {
-                case RdxTooltipAction.OPEN:
-                    this.setState(RdxTooltipState.OPEN);
-                    break;
-                case RdxTooltipAction.CLOSE:
-                    this.setState(RdxTooltipState.CLOSED);
-                    break;
-            }
-        }), takeUntilDestroyed())
-            .subscribe();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxTooltipRootDirective, isStandalone: true, selector: "[rdxTooltipRoot]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, openDelay: { classPropertyName: "openDelay", publicName: "openDelay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, externalControl: { classPropertyName: "externalControl", publicName: "externalControl", isSignal: true, isRequired: false, transformFunction: null }, cssAnimation: { classPropertyName: "cssAnimation", publicName: "cssAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssOpeningAnimation: { classPropertyName: "cssOpeningAnimation", publicName: "cssOpeningAnimation", isSignal: true, isRequired: false, transformFunction: null }, cssClosingAnimation: { classPropertyName: "cssClosingAnimation", publicName: "cssClosingAnimation", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "contentDirective", first: true, predicate: RdxTooltipContentDirective, descendants: true, isSignal: true }, { propertyName: "triggerDirective", first: true, predicate: RdxTooltipTriggerDirective, descendants: true, isSignal: true }, { propertyName: "arrowDirective", first: true, predicate: RdxTooltipArrowToken, descendants: true, isSignal: true }, { propertyName: "closeDirective", first: true, predicate: RdxTooltipCloseToken, descendants: true, isSignal: true }, { propertyName: "contentAttributesComponent", first: true, predicate: RdxTooltipContentAttributesToken, descendants: true, isSignal: true }, { propertyName: "internalAnchorDirective", first: true, predicate: RdxTooltipAnchorToken, descendants: true, isSignal: true }], exportAs: ["rdxTooltipRoot"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipRootDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxTooltipRoot]',
-                    exportAs: 'rdxTooltipRoot'
-                }]
-        }], ctorParameters: () => [] });
-
-function injectTooltipRoot(optional = false) {
-    isDevMode() && assertInInjectionContext(injectTooltipRoot);
-    return inject(RdxTooltipRootDirective, { optional });
-}
-
-class RdxTooltipAnchorDirective {
-    constructor() {
-        /**
-         * @ignore
-         * If outside the rootDirective then null, otherwise the rootDirective directive - with optional `true` passed in as the first param.
-         * If outside the rootDirective and non-null value that means the html structure is wrong - tooltip inside tooltip.
-         * */
-        this.rootDirective = injectTooltipRoot(true);
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.overlayOrigin = inject(CdkOverlayOrigin);
-        /** @ignore */
-        this.document = injectDocument();
-        /** @ignore */
-        this.name = computed(() => `rdx-tooltip-external-anchor-${this.rootDirective?.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-    }
-    /** @ignore */
-    click() {
-        this.emitOutsideClick();
-    }
-    /** @ignore */
-    setRoot(root) {
-        this.rootDirective = root;
-    }
-    emitOutsideClick() {
-        if (!this.rootDirective?.isOpen() || this.rootDirective?.contentDirective().onOverlayOutsideClickDisabled()) {
-            return;
-        }
-        const clickEvent = new MouseEvent('click', {
-            view: this.document.defaultView,
-            bubbles: true,
-            cancelable: true,
-            relatedTarget: this.elementRef.nativeElement
         });
-        this.rootDirective?.triggerDirective().elementRef.nativeElement.dispatchEvent(clickEvent);
+        this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
+        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.close());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipAnchorDirective, isStandalone: true, selector: "[rdxTooltipAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
-            {
-                provide: RdxTooltipAnchorToken,
-                useExisting: forwardRef(() => RdxTooltipAnchorDirective)
-            }
-        ], exportAs: ["rdxTooltipAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxTooltipPositioner, isStandalone: true, selector: "[rdxTooltipPositioner]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "wrapper.placedSide()", "attr.data-align": "wrapper.placedAlign()", "style": "{\n            '--anchor-width': 'var(--radix-popper-anchor-width)',\n            '--anchor-height': 'var(--radix-popper-anchor-height)',\n            '--available-width': 'var(--radix-popper-available-width)',\n            '--available-height': 'var(--radix-popper-available-height)',\n            '--transform-origin': 'var(--radix-popper-transform-origin)'\n        }" } }, providers: [provideRdxPopperContentConfig({ side: 'top', arrowPadding: 5, collisionPadding: 5 })], hostDirectives: [{ directive: i1$3.RdxDismissableLayer }, { directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipAnchorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipPositioner, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipAnchor]',
-                    exportAs: 'rdxTooltipAnchor',
-                    hostDirectives: [CdkOverlayOrigin],
-                    host: {
-                        type: 'button',
-                        '[attr.id]': 'name()',
-                        '[attr.aria-haspopup]': '"dialog"',
-                        '(click)': 'click()'
-                    },
-                    providers: [
+                    selector: '[rdxTooltipPositioner]',
+                    providers: [provideRdxPopperContentConfig({ side: 'top', arrowPadding: 5, collisionPadding: 5 })],
+                    hostDirectives: [
+                        RdxDismissableLayer,
                         {
-                            provide: RdxTooltipAnchorToken,
-                            useExisting: forwardRef(() => RdxTooltipAnchorDirective)
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'anchor',
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'positionStrategy',
+                                'updatePositionStrategy'
+                            ]
                         }
-                    ]
+                    ],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-side]': 'wrapper.placedSide()',
+                        '[attr.data-align]': 'wrapper.placedAlign()',
+                        '[style]': `{
+            '--anchor-width': 'var(--radix-popper-anchor-width)',
+            '--anchor-height': 'var(--radix-popper-anchor-height)',
+            '--available-width': 'var(--radix-popper-available-width)',
+            '--available-height': 'var(--radix-popper-available-height)',
+            '--transform-origin': 'var(--radix-popper-transform-origin)'
+        }`
+                    }
                 }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }], escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }] } });
 
-class RdxTooltipArrowDirective {
+class RdxTooltipTrigger {
     constructor() {
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        /** @ignore */
-        this.rootDirective = injectTooltipRoot();
-        /** @ignore */
+        this.parentRootContext = injectRdxTooltipContext(true);
         this.elementRef = inject(ElementRef);
+        this.generatedId = injectId('rdx-tooltip-trigger-');
         /**
-         * @description The width of the arrow in pixels.
-         * @default 10
+         * Associates this trigger with a detached tooltip root.
          */
-        this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, ...(ngDevMode ? [{ debugName: "width", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
         /**
-         * @description The height of the arrow in pixels.
-         * @default 5
+         * Data associated with this trigger while it is active.
          */
-        this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, ...(ngDevMode ? [{ debugName: "height", transform: numberAttribute }] : [{ transform: numberAttribute }]));
-        /** @ignore */
-        this.arrowSvgElement = computed(() => {
-            const width = this.width();
-            const height = this.height();
-            const svgElement = this.renderer.createElement('svg', 'svg');
-            this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');
-            this.renderer.setAttribute(svgElement, 'width', String(width));
-            this.renderer.setAttribute(svgElement, 'height', String(height));
-            const polygonElement = this.renderer.createElement('polygon', 'svg');
-            this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');
-            this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');
-            this.renderer.appendChild(svgElement, polygonElement);
-            return svgElement;
-        }, ...(ngDevMode ? [{ debugName: "arrowSvgElement" }] : []));
-        /** @ignore */
-        this.currentArrowSvgElement = signal(void 0, ...(ngDevMode ? [{ debugName: "currentArrowSvgElement" }] : []));
-        /** @ignore */
-        this.position = toSignal(this.rootDirective.contentDirective().positionChange());
-        afterNextRender({
-            write: () => {
-                if (this.elementRef.nativeElement.parentElement) {
-                    this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');
-                }
-                this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');
-                this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');
-                this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');
+        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        /**
+         * ID used to identify this trigger when opening a detached tooltip imperatively.
+         */
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the tooltip should close when the trigger is clicked.
+         * @defaultValue true
+         */
+        this.closeOnClick = input(true, { ...(ngDevMode ? { debugName: "closeOnClick" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Whether this trigger is disabled. A disabled trigger never opens the tooltip.
+         * @defaultValue false
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Overrides the open delay (ms) for this trigger. Falls back to the root/provider/global delay.
+         */
+        this.delay = input(undefined, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
+        /**
+         * Overrides the close delay (ms) for this trigger. Falls back to the root/provider/global delay.
+         */
+        this.closeDelay = input(undefined, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: (value) => (value == null ? undefined : numberAttribute(value)) });
+        this.userOnPointerDown = input(undefined, { ...(ngDevMode ? { debugName: "userOnPointerDown" } : /* istanbul ignore next */ {}), alias: 'rdxOnPointerDown' });
+        this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        /** Disabled if either the root or this trigger is disabled. */
+        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.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : /* istanbul ignore next */ []));
+        this.hasPointerMoveOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
+            else if (this.parentRootContext) {
+                onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.elementRef.nativeElement)));
             }
         });
-        this.onArrowSvgElementChangeEffect();
-        this.onContentPositionAndArrowDimensionsChangeEffect();
     }
-    /** @ignore */
-    setAnchorOrTriggerRect() {
-        this.anchorOrTriggerRect = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective()).elementRef.nativeElement.getBoundingClientRect();
+    handleFocus() {
+        const rootContext = this.rootContext();
+        if (!rootContext || this.isDisabled() || this.isPointerDown()) {
+            return;
+        }
+        rootContext.setDelays(this.delay(), this.closeDelay());
+        rootContext.open(this.elementRef.nativeElement, this.payload());
     }
-    /** @ignore */
-    setPosition(position, arrowDimensions) {
-        this.setAnchorOrTriggerRect();
-        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair), { width: arrowDimensions.width, height: arrowDimensions.height }, { width: this.anchorOrTriggerRect.width, height: this.anchorOrTriggerRect.height });
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', '');
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'right', '');
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'transformOrigin', posParams.transformOrigin);
+    handleBlur() {
+        this.rootContext()?.closeDelayed();
     }
-    /** @ignore */
-    onArrowSvgElementChangeEffect() {
-        effect(() => {
-            const arrowElement = this.arrowSvgElement();
-            untracked(() => {
-                const currentArrowSvgElement = this.currentArrowSvgElement();
-                if (currentArrowSvgElement) {
-                    this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);
-                }
-                this.currentArrowSvgElement.set(arrowElement);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);
-                this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);
-                this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());
-            });
-        });
-    }
-    /** @ignore */
-    onContentPositionAndArrowDimensionsChangeEffect() {
-        effect(() => {
-            const position = this.position();
-            const arrowDimensions = { width: this.width(), height: this.height() };
-            untracked(() => {
-                if (!position) {
-                    return;
-                }
-                this.setPosition(position, arrowDimensions);
-            });
-        });
+    handleClick() {
+        const rootContext = this.rootContext();
+        if (rootContext?.isOpen() && this.closeOnClick()) {
+            rootContext.close();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTooltipArrowDirective, isStandalone: true, selector: "[rdxTooltipArrow]", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
-            {
-                provide: RdxTooltipArrowToken,
-                useExisting: forwardRef(() => RdxTooltipArrowDirective)
-            }
-        ], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipArrowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxTooltipArrow]',
-                    providers: [
-                        {
-                            provide: RdxTooltipArrowToken,
-                            useExisting: forwardRef(() => RdxTooltipArrowDirective)
-                        }
-                    ]
-                }]
-        }], ctorParameters: () => [] });
-
-/**
- * TODO: to be removed? But it seems to be useful when controlled from outside
- */
-class RdxTooltipCloseDirective {
-    constructor() {
-        /** @ignore */
-        this.rootDirective = injectTooltipRoot();
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        this.onIsControlledExternallyEffect();
+    handlePointerMove(event) {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        const rootContext = this.rootContext();
+        if (!rootContext || this.isDisabled()) {
+            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());
+            this.hasPointerMoveOpened.set(true);
+        }
     }
-    /** @ignore */
-    onIsControlledExternallyEffect() {
-        effect(() => {
-            const isControlledExternally = this.rootDirective.controlledExternally()();
-            untracked(() => {
-                this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? null : 'none');
-            });
-        });
+    handlePointerLeave() {
+        this.rootContext()?.onTriggerLeave();
+        this.hasPointerMoveOpened.set(false);
+    }
+    async handlePointerDown(event) {
+        const user = this.userOnPointerDown();
+        let result;
+        if (user) {
+            result = user(event);
+            if (result instanceof Promise)
+                result = await result;
+        }
+        if (event.defaultPrevented || result === false) {
+            return;
+        }
+        this.isPointerDown.set(true);
+        const handlePointerUp = () => {
+            setTimeout(() => this.isPointerDown.set(false), 1);
+        };
+        document.addEventListener('pointerup', handlePointerUp, { once: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipCloseDirective, isStandalone: true, selector: "[rdxTooltipClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootDirective.handleClose(true)" } }, providers: [
-            {
-                provide: RdxTooltipCloseToken,
-                useExisting: forwardRef(() => RdxTooltipCloseDirective)
-            }
-        ], ngImport: i0 }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipCloseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipClose]',
+                    selector: '[rdxTooltipTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
                     host: {
                         type: 'button',
-                        '(click)': 'rootDirective.handleClose(true)'
-                    },
-                    providers: [
-                        {
-                            provide: RdxTooltipCloseToken,
-                            useExisting: forwardRef(() => RdxTooltipCloseDirective)
-                        }
-                    ]
+                        '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',
+                        '(pointermove)': 'handlePointerMove($event)',
+                        '(pointerleave)': 'handlePointerLeave()',
+                        '(pointerdown)': 'handlePointerDown($event)',
+                        '(focus)': 'handleFocus()',
+                        '(blur)': 'handleBlur()',
+                        '(click)': 'handleClick()'
+                    }
                 }]
-        }], ctorParameters: () => [] });
+        }], 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 }] }] } });
 
-class RdxTooltipContentAttributesComponent {
+class RdxTooltipHandle {
     constructor() {
-        /** @ignore */
-        this.rootDirective = injectTooltipRoot();
-        /** @ignore */
-        this.name = computed(() => `rdx-tooltip-content-attributes-${this.rootDirective.uniqueId()}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
-        /** @ignore */
-        this.disableAnimation = computed(() => !this.canAnimate(), ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
-    }
-    /** @ignore */
-    onAnimationStart(_) {
-        this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxTooltipState.OPEN
-            ? RdxTooltipAnimationStatus.OPEN_STARTED
-            : RdxTooltipAnimationStatus.CLOSED_STARTED);
-    }
-    /** @ignore */
-    onAnimationEnd(_) {
-        this.rootDirective.cssAnimationStatus.set(this.rootDirective.state() === RdxTooltipState.OPEN
-            ? RdxTooltipAnimationStatus.OPEN_ENDED
-            : RdxTooltipAnimationStatus.CLOSED_ENDED);
-    }
-    /** @ignore */
-    pointerenter() {
-        this.rootDirective.handleOpen();
+        this.rootContext = signal(undefined, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.triggers = new Map();
+        this.rootTriggerCleanups = new Map();
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    }
+    open(triggerId) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No tooltip trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.open(trigger.element, trigger.payload());
     }
-    /** @ignore */
-    pointerleave() {
-        this.rootDirective.handleClose();
+    close() {
+        this.rootContext()?.close();
     }
-    /** @ignore */
-    focus() {
-        this.rootDirective.handleOpen();
+    registerRoot(rootContext) {
+        this.rootContext.set(rootContext);
+        this.triggers.forEach((trigger, id) => {
+            this.rootTriggerCleanups.set(id, rootContext.registerTrigger(trigger.element));
+        });
+        return () => {
+            if (this.rootContext() === rootContext) {
+                this.rootTriggerCleanups.forEach((cleanup) => cleanup());
+                this.rootTriggerCleanups.clear();
+                this.rootContext.set(undefined);
+            }
+        };
     }
-    /** @ignore */
-    blur() {
-        this.rootDirective.handleClose();
+    registerTrigger(id, trigger, payload) {
+        this.rootTriggerCleanups.get(id)?.();
+        this.triggers.set(id, { element: trigger, payload });
+        const unregisterFromRoot = this.rootContext()?.registerTrigger(trigger);
+        if (unregisterFromRoot) {
+            this.rootTriggerCleanups.set(id, unregisterFromRoot);
+        }
+        return () => {
+            this.rootTriggerCleanups.get(id)?.();
+            this.rootTriggerCleanups.delete(id);
+            if (this.triggers.get(id)?.element === trigger) {
+                this.triggers.delete(id);
+            }
+        };
     }
-    /** @ignore */
-    canAnimate() {
-        return (this.rootDirective.cssAnimation() &&
-            ((this.rootDirective.cssOpeningAnimation() && this.rootDirective.state() === RdxTooltipState.OPEN) ||
-                (this.rootDirective.cssClosingAnimation() && this.rootDirective.state() === RdxTooltipState.CLOSED)));
+    context() {
+        return this.rootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipContentAttributesComponent, isStandalone: true, selector: "[rdxTooltipContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)", "pointerenter": "pointerenter()", "pointerleave": "pointerleave()", "focus": "focus()", "blur": "blur()" }, properties: { "attr.role": "\"dialog\"", "attr.id": "name()", "attr.data-state": "rootDirective.state()", "attr.data-side": "rootDirective.contentDirective().side()", "attr.data-align": "rootDirective.contentDirective().align()", "style": "disableAnimation() ? {animation: \"none !important\"} : null" } }, providers: [
-            {
-                provide: RdxTooltipContentAttributesToken,
-                useExisting: forwardRef(() => RdxTooltipContentAttributesComponent)
-            }
-        ], ngImport: i0, template: `
-        <ng-content />
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentAttributesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[rdxTooltipContentAttributes]',
-                    template: `
-        <ng-content />
-    `,
-                    host: {
-                        '[attr.role]': '"dialog"',
-                        '[attr.id]': 'name()',
-                        '[attr.data-state]': 'rootDirective.state()',
-                        '[attr.data-side]': 'rootDirective.contentDirective().side()',
-                        '[attr.data-align]': 'rootDirective.contentDirective().align()',
-                        '[style]': 'disableAnimation() ? {animation: "none !important"} : null',
-                        '(animationstart)': 'onAnimationStart($event)',
-                        '(animationend)': 'onAnimationEnd($event)',
-                        '(pointerenter)': 'pointerenter()',
-                        '(pointerleave)': 'pointerleave()',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()'
-                    },
-                    providers: [
-                        {
-                            provide: RdxTooltipContentAttributesToken,
-                            useExisting: forwardRef(() => RdxTooltipContentAttributesComponent)
-                        }
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
+function createRdxTooltipHandle() {
+    return new RdxTooltipHandle();
+}
 
-const _imports = [
-    RdxTooltipArrowDirective,
-    RdxTooltipCloseDirective,
-    RdxTooltipContentDirective,
-    RdxTooltipTriggerDirective,
-    RdxTooltipRootDirective,
-    RdxTooltipAnchorDirective,
-    RdxTooltipContentAttributesComponent
+const tooltipImports = [
+    RdxTooltip,
+    RdxTooltipArrow,
+    RdxTooltipPopup,
+    RdxTooltipPortal,
+    RdxTooltipPortalPresence,
+    RdxTooltipPositioner,
+    RdxTooltipProvider,
+    RdxTooltipTrigger
 ];
-class RdxTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipModule, imports: [RdxTooltipArrowDirective,
-            RdxTooltipCloseDirective,
-            RdxTooltipContentDirective,
-            RdxTooltipTriggerDirective,
-            RdxTooltipRootDirective,
-            RdxTooltipAnchorDirective,
-            RdxTooltipContentAttributesComponent], exports: [RdxTooltipArrowDirective,
-            RdxTooltipCloseDirective,
-            RdxTooltipContentDirective,
-            RdxTooltipTriggerDirective,
-            RdxTooltipRootDirective,
-            RdxTooltipAnchorDirective,
-            RdxTooltipContentAttributesComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [..._imports],
-                    exports: [..._imports]
-                }]
-        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RdxTooltipAnchorDirective, RdxTooltipArrowDirective, RdxTooltipCloseDirective, RdxTooltipContentAttributesComponent, RdxTooltipContentDirective, RdxTooltipModule, RdxTooltipRootDirective, RdxTooltipTriggerDirective };
+export { RdxTooltip, RdxTooltipArrow, RdxTooltipDefaultsToken, RdxTooltipHandle, RdxTooltipPopup, RdxTooltipPortal, RdxTooltipPortalPresence, RdxTooltipPositioner, RdxTooltipProvider, RdxTooltipTrigger, createRdxTooltipHandle, defaultTooltipConfig, injectRdxTooltipConfig, injectRdxTooltipContext, injectRdxTooltipProviderContext, provideRdxTooltipConfig, provideRdxTooltipContext, provideRdxTooltipProviderContext, tooltipImports };
 //# sourceMappingURL=radix-ng-primitives-tooltip.mjs.map