@radix-ng/primitives 0.24.0 → 0.26.0

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

@@ -1,674 +1,1186 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Renderer2, ElementRef, input, computed, effect, forwardRef, Directive, ViewContainerRef, DestroyRef, PLATFORM_ID, output, signal, contentChild, untracked, TemplateRef, NgModule } from '@angular/core';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, take, asyncScheduler } from 'rxjs';
+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, Component, ChangeDetectionStrategy, 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';
+
+const RdxTooltipAnchorToken = new InjectionToken('RdxTooltipAnchorToken');
 
 const RdxTooltipArrowToken = new InjectionToken('RdxTooltipArrowToken');
 
-const RdxTooltipContentToken = new InjectionToken('RdxTooltipContentToken');
+const RdxTooltipCloseToken = new InjectionToken('RdxTooltipCloseToken');
 
-var RdxTooltipSide;
-(function (RdxTooltipSide) {
-    RdxTooltipSide["Top"] = "top";
-    RdxTooltipSide["Right"] = "right";
-    RdxTooltipSide["Bottom"] = "bottom";
-    RdxTooltipSide["Left"] = "left";
-})(RdxTooltipSide || (RdxTooltipSide = {}));
-var RdxTooltipAlign;
-(function (RdxTooltipAlign) {
-    RdxTooltipAlign["Start"] = "start";
-    RdxTooltipAlign["Center"] = "center";
-    RdxTooltipAlign["End"] = "end";
-})(RdxTooltipAlign || (RdxTooltipAlign = {}));
+const RdxTooltipContentAttributesToken = new InjectionToken('RdxTooltipContentAttributesToken');
 
-class RdxTooltipArrowDirective {
+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 = {}));
+
+class RdxTooltipContentDirective {
     constructor() {
         /** @ignore */
-        this.renderer = inject(Renderer2);
+        this.rootDirective = injectTooltipRoot();
         /** @ignore */
-        this.contentDirective = inject(RdxTooltipContentToken);
+        this.templateRef = inject(TemplateRef);
         /** @ignore */
-        this.elementRef = inject(ElementRef);
+        this.overlay = inject(Overlay);
+        /** @ignore */
+        this.destroyRef = inject(DestroyRef);
+        /** @ignore */
+        this.connectedOverlay = inject(CdkConnectedOverlay);
+        /** @ignore */
+        this.name = computed(() => `rdx-tooltip-trigger-${this.rootDirective.uniqueId()}`);
         /**
-         * The width of the arrow in pixels.
+         * @description The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+         * @default top
          */
-        this.width = input(10);
+        this.side = input(RdxPositionSide.Top);
         /**
-         * The height of the arrow in pixels.
+         * @description The distance in pixels from the trigger.
+         * @default undefined
          */
-        this.height = input(5);
-        /** @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;
+        this.sideOffset = input(NaN, {
+            transform: numberAttribute
         });
-        /** @ignore */
-        this.onArrowSvgElementChangeEffect = effect(() => {
-            const arrowElement = this.arrowSvgElement();
-            this.renderer.appendChild(this.elementRef.nativeElement, arrowElement);
+        /**
+         * @description The preferred alignment against the trigger. May change when collisions occur.
+         * @default center
+         */
+        this.align = input(RdxPositionAlign.Center);
+        /**
+         * @description An offset in pixels from the "start" or "end" alignment options.
+         * @default undefined
+         */
+        this.alignOffset = input(NaN, {
+            transform: numberAttribute
         });
-        /** @ignore */
-        this.onSideChangeEffect = effect(() => {
-            const side = this.contentDirective.side();
-            this.elementRef.nativeElement.parentElement?.setAttribute('style', `position: relative;`);
-            this.elementRef.nativeElement.style.position = 'absolute';
-            this.elementRef.nativeElement.style.boxSizing = '';
-            this.elementRef.nativeElement.style.width = `${this.width()}px`;
-            this.elementRef.nativeElement.style.height = `${this.height()}px`;
-            this.elementRef.nativeElement.style.fontSize = '0px';
-            if ([RdxTooltipSide.Top, RdxTooltipSide.Bottom].includes(side)) {
-                this.elementRef.nativeElement.style.left = `calc(50% - ${this.width() / 2}px)`;
-                this.elementRef.nativeElement.style.top = '100%';
-                if (side === RdxTooltipSide.Bottom) {
-                    this.elementRef.nativeElement.style.transform = 'rotate(180deg)';
-                    this.elementRef.nativeElement.style.top = `-${this.height()}px`;
-                }
-            }
-            if ([RdxTooltipSide.Left, RdxTooltipSide.Right].includes(side)) {
-                this.elementRef.nativeElement.style.top = `calc(50% - ${this.height() / 2}px)`;
-                if (side === RdxTooltipSide.Left) {
-                    this.elementRef.nativeElement.style.left = `100%`;
-                    this.elementRef.nativeElement.style.transform = 'rotate(-90deg) translate(0, -50%)';
-                }
-                if (side === RdxTooltipSide.Right) {
-                    this.elementRef.nativeElement.style.right = `100%`;
-                    this.elementRef.nativeElement.style.transform = 'rotate(90deg) translate(0, -50%)';
+        /**
+         * @description Whether to add some alternate positions of the content.
+         * @default false
+         */
+        this.alternatePositionsDisabled = input(false, { transform: booleanAttribute });
+        /** @description Whether to prevent `onOverlayEscapeKeyDown` handler from calling. */
+        this.onOverlayEscapeKeyDownDisabled = input(false, { transform: booleanAttribute });
+        /** @description Whether to prevent `onOverlayOutsideClick` handler from calling. */
+        this.onOverlayOutsideClickDisabled = input(false, { transform: booleanAttribute });
+        /**
+         * @description Event handler called when the escape key is down.
+         * It can be prevented by setting `onOverlayEscapeKeyDownDisabled` input to `true`.
+         */
+        this.onOverlayEscapeKeyDown = output();
+        /**
+         * @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`.
+         */
+        this.onOverlayOutsideClick = output();
+        /**
+         * @description Event handler called after the overlay is open
+         */
+        this.onOpen = output();
+        /**
+         * @description Event handler called after the overlay is closed
+         */
+        this.onClosed = output();
+        /** @ingore */
+        this.positions = computed(() => this.computePositions());
+        this.onOriginChangeEffect();
+        this.onPositionChangeEffect();
+    }
+    /** @ignore */
+    ngOnInit() {
+        this.setScrollStrategy();
+        this.setHasBackdrop();
+        this.setDisableClose();
+        this.onAttach();
+        this.onDetach();
+        this.connectKeydownEscape();
+        this.connectOutsideClick();
+    }
+    /** @ignore */
+    open() {
+        if (this.connectedOverlay.open) {
+            return;
+        }
+        const prevOpen = this.connectedOverlay.open;
+        this.connectedOverlay.open = true;
+        this.fireOverlayNgOnChanges('open', this.connectedOverlay.open, prevOpen);
+    }
+    /** @ignore */
+    close() {
+        if (!this.connectedOverlay.open) {
+            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);
+    }
+    /** @ignore */
+    setHasBackdrop() {
+        const prevHasBackdrop = this.connectedOverlay.hasBackdrop;
+        this.connectedOverlay.hasBackdrop = false;
+        this.fireOverlayNgOnChanges('hasBackdrop', this.connectedOverlay.hasBackdrop, prevHasBackdrop);
+    }
+    /** @ignore */
+    setDisableClose() {
+        const prevDisableClose = this.connectedOverlay.disableClose;
+        this.connectedOverlay.disableClose = true;
+        this.fireOverlayNgOnChanges('disableClose', this.connectedOverlay.disableClose, prevDisableClose);
+    }
+    /** @ignore */
+    setOrigin(origin) {
+        const prevOrigin = this.connectedOverlay.origin;
+        this.connectedOverlay.origin = origin;
+        this.fireOverlayNgOnChanges('origin', this.connectedOverlay.origin, prevOrigin);
+    }
+    /** @ignore */
+    setPositions(positions) {
+        const prevPositions = this.connectedOverlay.positions;
+        this.connectedOverlay.positions = positions;
+        this.fireOverlayNgOnChanges('positions', this.connectedOverlay.positions, prevPositions);
+        this.connectedOverlay.overlayRef?.updatePosition();
+    }
+    /** @ignore */
+    computePositions() {
+        const arrowHeight = this.rootDirective.arrowDirective()?.height() ?? 0;
+        const offsets = {
+            sideOffset: isNaN(this.sideOffset())
+                ? arrowHeight || 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
+                    }));
                 }
-            }
+            });
+        }
+        return positions;
+    }
+    onOriginChangeEffect() {
+        effect(() => {
+            const origin = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective())
+                .overlayOrigin;
+            untracked(() => {
+                this.setOrigin(origin);
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", 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 }); }
+    /** @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: "19.0.5", ngImport: i0, type: RdxTooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipArrowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipArrow]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: RdxTooltipArrowToken,
-                            useExisting: forwardRef(() => RdxTooltipArrowDirective)
-                        }
+                    selector: '[rdxTooltipContent]',
+                    hostDirectives: [
+                        CdkConnectedOverlay
                     ]
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class RdxTooltipTriggerDirective {
     constructor() {
         /** @ignore */
-        this.tooltipRoot = injectTooltipRoot();
+        this.rootDirective = injectTooltipRoot();
         /** @ignore */
-        this.elementRef = inject((ElementRef));
+        this.elementRef = inject(ElementRef);
         /** @ignore */
-        this.isPointerDown = false;
+        this.overlayOrigin = inject(CdkOverlayOrigin);
         /** @ignore */
-        this.isPointerInside = false;
-    }
-    /** @ignore */
-    onPointerMove(event) {
-        if (event.pointerType === 'touch') {
-            return;
-        }
-        if (!this.isPointerInside) {
-            this.tooltipRoot.onTriggerEnter();
-            this.isPointerInside = true;
-        }
+        this.name = computed(() => `rdx-tooltip-trigger-${this.rootDirective.uniqueId()}`);
     }
     /** @ignore */
-    onPointerLeave() {
-        this.isPointerInside = false;
-        this.tooltipRoot.onTriggerLeave();
+    pointerenter() {
+        this.rootDirective.handleOpen();
     }
     /** @ignore */
-    onPointerDown() {
-        this.isPointerDown = true;
-        this.elementRef.nativeElement.addEventListener('pointerup', () => {
-            this.isPointerDown = false;
-        }, { once: true });
+    pointerleave() {
+        this.rootDirective.handleClose();
     }
     /** @ignore */
-    onFocus() {
-        if (!this.isPointerDown) {
-            this.tooltipRoot.handleOpen();
-        }
+    focus() {
+        this.rootDirective.handleOpen();
     }
     /** @ignore */
-    onBlur() {
-        this.tooltipRoot.handleClose();
+    blur() {
+        this.rootDirective.handleClose();
     }
     /** @ignore */
-    onClick() {
-        this.tooltipRoot.handleClose();
+    click() {
+        this.rootDirective.handleClose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxTooltipTriggerDirective, isStandalone: true, selector: "[rdxTooltipTrigger]", host: { listeners: { "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "pointerdown": "onPointerDown()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()" }, properties: { "attr.data-state": "tooltipRoot.state()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipTrigger]',
-                    standalone: true,
+                    hostDirectives: [CdkOverlayOrigin],
                     host: {
-                        '[attr.data-state]': 'tooltipRoot.state()',
-                        '(pointermove)': 'onPointerMove($event)',
-                        '(pointerleave)': 'onPointerLeave()',
-                        '(pointerdown)': 'onPointerDown()',
-                        '(focus)': 'onFocus()',
-                        '(blur)': 'onBlur()',
-                        '(click)': 'onClick()'
+                        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()'
                     }
                 }]
         }] });
 
-const defaultTooltipConfig = {
-    delayDuration: 700,
-    skipDelayDuration: 300
-};
-const RdxTooltipConfigToken = new InjectionToken('RdxTooltipConfigToken');
-function provideRdxTooltipConfig(config) {
-    return [
-        {
-            provide: RdxTooltipConfigToken,
-            useValue: { ...defaultTooltipConfig, ...config }
-        }
-    ];
+const RdxCdkEventServiceWindowKey = Symbol('__RdxCdkEventService__');
+
+function eventTypeAsPrimitiveConfigKey(eventType) {
+    return `prevent${eventType[0].toUpperCase()}${eventType.slice(1)}`;
 }
-function injectTooltipConfig() {
-    return inject(RdxTooltipConfigToken, { optional: true }) ?? defaultTooltipConfig;
+class RdxCdkEventService {
+    #clickDomRootEventCallbacks;
+    constructor() {
+        this.document = injectDocument();
+        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;
+        /**
+         * @see src/cdk/platform/features/backwards-compatibility.ts in @angular/cdk
+         */
+        if (major > 19 || (major === 19 && minor > 0) || (major === 0 && minor === 0)) {
+            destroyClickDomRootEventListener = this.ngZone.runOutsideAngular(() => {
+                const destroyClickDomRootEventListenerInternal = this.renderer2.listen(target, eventName, callback, 
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                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: "19.0.5", ngImport: i0, type: RdxCdkEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxCdkEventService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", 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 });
 
-const RdxTooltipRootToken = new InjectionToken('RdxTooltipRootToken');
-function injectTooltipRoot() {
-    return inject(RdxTooltipRootToken);
-}
+let nextId = 0;
 class RdxTooltipRootDirective {
     constructor() {
         /** @ignore */
-        this.viewContainerRef = inject(ViewContainerRef);
-        /** @ignore */
-        this.destroyRef = inject(DestroyRef);
-        /** @ignore */
-        this.overlay = inject(Overlay);
-        /** @ignore */
-        this.platformId = inject(PLATFORM_ID);
+        this.uniqueId = signal(++nextId);
         /** @ignore */
-        this.document = inject(DOCUMENT);
-        /** @ignore */
-        this.tooltipConfig = injectTooltipConfig();
+        this.name = computed(() => `rdx-tooltip-root-${this.uniqueId()}`);
         /**
-         * The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
+         * @description The anchor directive that comes form outside the tooltip rootDirective
+         * @default undefined
          */
-        this.defaultOpen = input(false);
+        this.anchor = input(void 0);
         /**
-         * The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.
+         * @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
          */
-        this.open = input();
+        this.defaultOpen = input(false, { transform: booleanAttribute });
         /**
-         * Override the duration given to the configuration to customise the open delay for a specific tooltip.
+         * @description The controlled state of the tooltip. `open` input take precedence of `defaultOpen` input.
+         * @default undefined
          */
-        this.delayDuration = input(this.tooltipConfig.delayDuration);
-        /** @ignore */
-        this.disableHoverableContent = input(this.tooltipConfig.disableHoverableContent ?? false);
+        this.open = input(void 0, { transform: booleanAttribute });
         /**
-         * Event handler called when the open state of the tooltip changes.
+         * To customise the open delay for a specific tooltip.
          */
-        this.onOpenChange = output();
+        this.openDelay = input(500, {
+            transform: numberAttribute
+        });
+        /**
+         * To customise the close delay for a specific tooltip.
+         */
+        this.closeDelay = input(200, {
+            transform: numberAttribute
+        });
+        /**
+         * @description Whether to control the state of the tooltip from external. Use in conjunction with `open` input.
+         * @default undefined
+         */
+        this.externalControl = input(void 0, { transform: booleanAttribute });
+        /**
+         * @description Whether to take into account CSS opening/closing animations.
+         * @default false
+         */
+        this.cssAnimation = input(false, { transform: booleanAttribute });
+        /**
+         * @description Whether to take into account CSS opening animations. `cssAnimation` input must be set to 'true'
+         * @default false
+         */
+        this.cssOpeningAnimation = input(false, { transform: booleanAttribute });
+        /**
+         * @description Whether to take into account CSS closing animations. `cssAnimation` input must be set to 'true'
+         * @default false
+         */
+        this.cssClosingAnimation = input(false, { transform: booleanAttribute });
         /** @ignore */
-        this.isOpen = signal(this.defaultOpen());
+        this.cssAnimationStatus = signal(null);
         /** @ignore */
-        this.isOpenDelayed = signal(true);
+        this.contentDirective = contentChild.required(RdxTooltipContentDirective);
         /** @ignore */
-        this.wasOpenDelayed = signal(false);
+        this.triggerDirective = contentChild.required(RdxTooltipTriggerDirective);
         /** @ignore */
-        this.state = computed(() => {
-            const currentIsOpen = this.isOpen();
-            const currentWasOpenDelayed = this.wasOpenDelayed();
-            if (currentIsOpen) {
-                return currentWasOpenDelayed ? 'delayed-open' : 'instant-open';
-            }
-            return 'closed';
-        });
+        this.arrowDirective = contentChild(RdxTooltipArrowToken);
         /** @ignore */
-        this.tooltipContentDirective = contentChild.required(RdxTooltipContentToken);
+        this.closeDirective = contentChild(RdxTooltipCloseToken);
         /** @ignore */
-        this.tooltipTriggerElementRef = contentChild.required(RdxTooltipTriggerDirective, { read: ElementRef });
+        this.contentAttributesComponent = contentChild(RdxTooltipContentAttributesToken);
         /** @ignore */
-        this.openTimer = 0;
+        this.internalAnchorDirective = contentChild(RdxTooltipAnchorToken);
         /** @ignore */
-        this.skipDelayTimer = 0;
+        this.viewContainerRef = inject(ViewContainerRef);
         /** @ignore */
-        this.isControlledExternally = false;
+        this.rdxCdkEventService = injectRdxCdkEventService();
         /** @ignore */
-        this.onIsOpenChangeEffect = effect(() => {
-            const isOpen = this.isOpen();
-            untracked(() => {
-                if (isOpen) {
-                    this.show();
-                }
-                else {
-                    this.hide();
-                }
-            });
-        });
+        this.destroyRef = inject(DestroyRef);
         /** @ignore */
-        this.onPositionChangeEffect = effect(() => {
-            const position = this.tooltipContentDirective().position();
-            if (this.overlayRef) {
-                const positionStrategy = this.getPositionStrategy(position);
-                this.overlayRef.updatePositionStrategy(positionStrategy);
-            }
-        });
+        this.state = signal(RdxTooltipState.CLOSED);
         /** @ignore */
-        this.onOpenChangeEffect = effect(() => {
-            const currentOpen = this.open();
-            this.isControlledExternally = currentOpen !== undefined;
-            untracked(() => {
-                if (this.isControlledExternally) {
-                    this.setOpen(currentOpen);
-                }
+        this.attachDetachEvent = signal(RdxTooltipAttachDetachEvent.DETACH);
+        /** @ignore */
+        this.isFirstDefaultOpen = signal(false);
+        /** @ignore */
+        this.anchorDirective = computed(() => this.internalAnchorDirective() ?? this.anchor());
+        /** @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 */
-    ngOnInit() {
-        if (this.defaultOpen()) {
-            this.handleOpen();
-        }
-        this.isControlledExternally = this.open() !== undefined;
-    }
-    /** @ignore */
-    onTriggerEnter() {
-        if (this.isControlledExternally) {
-            return;
-        }
-        if (this.isOpenDelayed()) {
-            this.handleDelayedOpen();
-        }
-        else {
-            this.handleOpen();
-        }
-    }
-    /** @ignore */
-    onTriggerLeave() {
-        this.clearTimeout(this.openTimer);
-        this.handleClose();
+    getAnimationParamsSnapshot() {
+        return {
+            cssAnimation: this.cssAnimation(),
+            cssOpeningAnimation: this.cssOpeningAnimation(),
+            cssClosingAnimation: this.cssClosingAnimation(),
+            cssAnimationStatus: this.cssAnimationStatus(),
+            attachDetachEvent: this.attachDetachEvent(),
+            state: this.state(),
+            canEmitOnOpenOrOnClosed: this.canEmitOnOpenOrOnClosed()
+        };
     }
     /** @ignore */
-    onOpen() {
-        this.clearTimeout(this.skipDelayTimer);
-        this.isOpenDelayed.set(false);
+    controlledExternally() {
+        return this.externalControl;
     }
     /** @ignore */
-    onClose() {
-        this.clearTimeout(this.skipDelayTimer);
-        if (isPlatformBrowser(this.platformId)) {
-            this.skipDelayTimer = window.setTimeout(() => {
-                this.isOpenDelayed.set(true);
-            }, this.tooltipConfig.skipDelayDuration);
-        }
+    firstDefaultOpen() {
+        return this.isFirstDefaultOpen();
     }
     /** @ignore */
     handleOpen() {
-        if (this.isControlledExternally) {
+        if (this.externalControl()) {
             return;
         }
-        this.wasOpenDelayed.set(false);
-        this.setOpen(true);
+        this.actionSubject$.next(RdxTooltipAction.OPEN);
     }
     /** @ignore */
-    handleClose() {
-        if (this.isControlledExternally) {
+    handleClose(closeButton) {
+        if (this.isFirstDefaultOpen()) {
+            this.isFirstDefaultOpen.set(false);
+        }
+        if (!closeButton && this.externalControl()) {
             return;
         }
-        this.clearTimeout(this.openTimer);
-        this.setOpen(false);
+        this.actionSubject$.next(RdxTooltipAction.CLOSE);
     }
     /** @ignore */
-    handleOverlayKeydown() {
-        if (!this.overlayRef) {
+    handleToggle() {
+        if (this.externalControl()) {
             return;
         }
-        this.overlayRef
-            .keydownEvents()
-            .pipe(filter((event) => event.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.tooltipContentDirective().onEscapeKeyDown.emit(event);
-            if (!event.defaultPrevented) {
-                this.handleClose();
-            }
-        });
+        this.isOpen() ? this.handleClose() : this.handleOpen();
     }
     /** @ignore */
-    handlePointerDownOutside() {
-        if (!this.overlayRef) {
+    isOpen(state) {
+        return (state ?? this.state()) === RdxTooltipState.OPEN;
+    }
+    /** @ignore */
+    setState(state = RdxTooltipState.CLOSED) {
+        if (state === this.state()) {
             return;
         }
-        this.overlayRef
-            .outsidePointerEvents()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => this.tooltipContentDirective().onPointerDownOutside.emit(event));
-    }
-    /** @ignore */
-    handleDelayedOpen() {
-        this.clearTimeout(this.openTimer);
-        if (isPlatformBrowser(this.platformId)) {
-            this.openTimer = window.setTimeout(() => {
-                this.wasOpenDelayed.set(true);
-                this.setOpen(true);
-            }, this.delayDuration());
-        }
+        this.state.set(state);
     }
     /** @ignore */
-    setOpen(open = false) {
-        if (open) {
-            this.onOpen();
-            this.document.dispatchEvent(new CustomEvent('tooltip.open'));
+    openContent() {
+        this.contentDirective().open();
+        if (!this.cssAnimation() || !this.cssOpeningAnimation()) {
+            this.cssAnimationStatus.set(null);
         }
-        else {
-            this.onClose();
-        }
-        this.isOpen.set(open);
-        this.onOpenChange.emit(open);
     }
     /** @ignore */
-    createOverlayRef() {
-        if (this.overlayRef) {
-            return this.overlayRef;
+    closeContent() {
+        this.contentDirective().close();
+        if (!this.cssAnimation() || !this.cssClosingAnimation()) {
+            this.cssAnimationStatus.set(null);
         }
-        this.overlayRef = this.overlay.create({
-            direction: undefined,
-            positionStrategy: this.getPositionStrategy(this.tooltipContentDirective().position()),
-            scrollStrategy: this.overlay.scrollStrategies.close()
+    }
+    /** @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());
+            });
         });
-        this.overlayRef
-            .detachments()
-            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.detach());
-        this.handleOverlayKeydown();
-        this.handlePointerDownOutside();
-        return this.overlayRef;
-    }
-    /** @ignore */
-    show() {
-        this.overlayRef = this.createOverlayRef();
-        this.detach();
-        this.portal =
-            this.portal ||
-                new TemplatePortal(this.tooltipContentDirective().templateRef, this.viewContainerRef, {
-                    state: this.state,
-                    side: this.tooltipContentDirective().side
-                });
-        this.instance = this.overlayRef.attach(this.portal);
     }
     /** @ignore */
-    detach() {
-        if (this.overlayRef?.hasAttached()) {
-            this.overlayRef.detach();
-        }
+    emitOpenOrClosedEventEffect() {
+        let isFirst = true;
+        effect(() => {
+            this.attachDetachEvent();
+            this.cssAnimationStatus();
+            untracked(() => {
+                if (isFirst) {
+                    isFirst = false;
+                    return;
+                }
+                const canEmitOpenClose = untracked(() => this.canEmitOnOpenOrOnClosed());
+                if (!canEmitOpenClose) {
+                    return;
+                }
+                this.emitOnOpenOrOnClosed(this.state());
+            });
+        });
     }
     /** @ignore */
-    hide() {
-        if (this.isControlledExternally && this.open()) {
-            return;
-        }
-        asyncScheduler.schedule(() => {
-            this.instance?.destroy();
-        }, this.tooltipConfig.hideDelayDuration ?? 0);
+    onOpenChangeEffect() {
+        effect(() => {
+            const open = this.open();
+            untracked(() => {
+                this.setState(open ? RdxTooltipState.OPEN : RdxTooltipState.CLOSED);
+            });
+        });
+    }
+    /** @ignore */
+    onIsFirstDefaultOpenChangeEffect() {
+        const effectRef = effect(() => {
+            const defaultOpen = this.defaultOpen();
+            untracked(() => {
+                if (!defaultOpen || this.open()) {
+                    effectRef.destroy();
+                    return;
+                }
+                this.handleOpen();
+            });
+        });
     }
     /** @ignore */
-    getPositionStrategy(connectedPosition) {
-        return this.overlay
-            .position()
-            .flexibleConnectedTo(this.tooltipTriggerElementRef())
-            .withFlexibleDimensions(false)
-            .withPositions([
-            connectedPosition
-        ])
-            .withLockedPosition();
+    actionSubscription() {
+        this.actionSubject$
+            .asObservable()
+            .pipe(map((action) => {
+            console.log(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: "19.0.5", ngImport: i0, type: RdxTooltipRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.0.5", 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: "19.0.5", 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()}`);
+    }
+    /** @ignore */
+    click() {
+        this.emitOutsideClick();
     }
     /** @ignore */
-    clearTimeout(timeoutId) {
-        if (isPlatformBrowser(this.platformId)) {
-            window.clearTimeout(timeoutId);
+    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);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.11", type: RdxTooltipRootDirective, isStandalone: true, selector: "[rdxTooltipRoot]", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delayDuration: { classPropertyName: "delayDuration", publicName: "delayDuration", isSignal: true, isRequired: false, transformFunction: null }, disableHoverableContent: { classPropertyName: "disableHoverableContent", publicName: "disableHoverableContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onOpenChange: "onOpenChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipAnchorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxTooltipAnchorDirective, isStandalone: true, selector: "[rdxTooltipAnchor]", host: { attributes: { "type": "button" }, listeners: { "click": "click()" }, properties: { "attr.id": "name()", "attr.aria-haspopup": "\"dialog\"" } }, providers: [
             {
-                provide: RdxTooltipRootToken,
-                useExisting: forwardRef(() => RdxTooltipRootDirective)
+                provide: RdxTooltipAnchorToken,
+                useExisting: forwardRef(() => RdxTooltipAnchorDirective)
             }
-        ], queries: [{ propertyName: "tooltipContentDirective", first: true, predicate: RdxTooltipContentToken, descendants: true, isSignal: true }, { propertyName: "tooltipTriggerElementRef", first: true, predicate: RdxTooltipTriggerDirective, descendants: true, read: ElementRef, isSignal: true }], exportAs: ["rdxTooltipRoot"], ngImport: i0 }); }
+        ], exportAs: ["rdxTooltipAnchor"], hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipAnchorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipRoot]',
-                    standalone: true,
+                    selector: '[rdxTooltipAnchor]',
+                    exportAs: 'rdxTooltipAnchor',
+                    hostDirectives: [CdkOverlayOrigin],
+                    host: {
+                        type: 'button',
+                        '[attr.id]': 'name()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '(click)': 'click()'
+                    },
                     providers: [
                         {
-                            provide: RdxTooltipRootToken,
-                            useExisting: forwardRef(() => RdxTooltipRootDirective)
+                            provide: RdxTooltipAnchorToken,
+                            useExisting: forwardRef(() => RdxTooltipAnchorDirective)
                         }
-                    ],
-                    exportAs: 'rdxTooltipRoot'
+                    ]
                 }]
         }] });
 
-class RdxTooltipContentAttributesDirective {
+class RdxTooltipArrowDirective {
     constructor() {
-        this.tooltipRoot = inject(RdxTooltipRootDirective);
-        this.tooltipContent = inject(RdxTooltipContentToken);
+        /** @ignore */
+        this.renderer = inject(Renderer2);
+        /** @ignore */
+        this.rootDirective = injectTooltipRoot();
+        /** @ignore */
+        this.elementRef = inject(ElementRef);
+        /**
+         * @description The width of the arrow in pixels.
+         * @default 10
+         */
+        this.width = input(RDX_POSITIONING_DEFAULTS.arrow.width, { transform: numberAttribute });
+        /**
+         * @description The height of the arrow in pixels.
+         * @default 5
+         */
+        this.height = input(RDX_POSITIONING_DEFAULTS.arrow.height, { 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;
+        });
+        /** @ignore */
+        this.currentArrowSvgElement = signal(void 0);
+        /** @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.onArrowSvgElementChangeEffect();
+        this.onContentPositionAndArrowDimensionsChangeEffect();
+    }
+    /** @ignore */
+    setAnchorOrTriggerRect() {
+        this.anchorOrTriggerRect = (this.rootDirective.anchorDirective() ?? this.rootDirective.triggerDirective()).elementRef.nativeElement.getBoundingClientRect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipContentAttributesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.11", type: RdxTooltipContentAttributesDirective, isStandalone: true, selector: "[rdxTooltipContentAttributes]", host: { properties: { "attr.data-state": "tooltipRoot.state()", "attr.data-side": "tooltipContent.side()" } }, ngImport: i0 }); }
+    /** @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);
+    }
+    /** @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);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipArrowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", 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: "18.2.11", ngImport: i0, type: RdxTooltipContentAttributesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipArrowDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[rdxTooltipContentAttributes]',
-                    standalone: true,
-                    host: {
-                        '[attr.data-state]': 'tooltipRoot.state()',
-                        '[attr.data-side]': 'tooltipContent.side()'
-                    }
+                    selector: '[rdxTooltipArrow]',
+                    providers: [
+                        {
+                            provide: RdxTooltipArrowToken,
+                            useExisting: forwardRef(() => RdxTooltipArrowDirective)
+                        }
+                    ]
                 }]
-        }] });
-
-const TOOLTIP_POSITIONS = {
-    [RdxTooltipSide.Top]: {
-        [RdxTooltipAlign.Center]: {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom'
-        },
-        [RdxTooltipAlign.Start]: {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom'
-        },
-        [RdxTooltipAlign.End]: {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom'
-        }
-    },
-    [RdxTooltipSide.Right]: {
-        [RdxTooltipAlign.Center]: {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center'
-        },
-        [RdxTooltipAlign.Start]: {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top'
-        },
-        [RdxTooltipAlign.End]: {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom'
-        }
-    },
-    [RdxTooltipSide.Bottom]: {
-        [RdxTooltipAlign.Center]: {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top'
-        },
-        [RdxTooltipAlign.Start]: {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top'
-        },
-        [RdxTooltipAlign.End]: {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top'
-        }
-    },
-    [RdxTooltipSide.Left]: {
-        [RdxTooltipAlign.Center]: {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center'
-        },
-        [RdxTooltipAlign.Start]: {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top'
-        },
-        [RdxTooltipAlign.End]: {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom'
-        }
-    }
-};
+        }], ctorParameters: () => [] });
 
-function getContentPosition(side, align, sideOffset, alignOffset) {
-    const position = TOOLTIP_POSITIONS[side][align] ?? TOOLTIP_POSITIONS[RdxTooltipSide.Top][RdxTooltipAlign.Center];
-    if (sideOffset > 0) {
-        let xFactor = 0;
-        let yFactor = 0;
-        switch (side) {
-            case RdxTooltipSide.Top:
-                yFactor = -1;
-                break;
-            case RdxTooltipSide.Bottom:
-                yFactor = 1;
-                break;
-            case RdxTooltipSide.Left:
-                xFactor = -1;
-                break;
-            case RdxTooltipSide.Right:
-                xFactor = 1;
-                break;
-        }
-        position.offsetX = xFactor * sideOffset;
-        position.offsetY = yFactor * sideOffset;
+/**
+ * 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();
     }
-    if ([RdxTooltipAlign.Start, RdxTooltipAlign.End].includes(align) && alignOffset) {
-        const alignOffsetFactor = align === RdxTooltipAlign.End ? -1 : 1;
-        position.offsetX = alignOffsetFactor * alignOffset;
+    /** @ignore */
+    onIsControlledExternallyEffect() {
+        effect(() => {
+            const isControlledExternally = this.rootDirective.controlledExternally()();
+            untracked(() => {
+                this.renderer.setStyle(this.elementRef.nativeElement, 'display', isControlledExternally ? null : 'none');
+            });
+        });
     }
-    return position;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxTooltipCloseDirective, isStandalone: true, selector: "[rdxTooltipClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootDirective.handleClose(true)" } }, providers: [
+            {
+                provide: RdxTooltipCloseToken,
+                useExisting: forwardRef(() => RdxTooltipCloseDirective)
+            }
+        ], ngImport: i0 }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipClose]',
+                    host: {
+                        type: 'button',
+                        '(click)': 'rootDirective.handleClose(true)'
+                    },
+                    providers: [
+                        {
+                            provide: RdxTooltipCloseToken,
+                            useExisting: forwardRef(() => RdxTooltipCloseDirective)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
 
-class RdxTooltipContentDirective {
+class RdxTooltipContentAttributesComponent {
     constructor() {
         /** @ignore */
-        this.templateRef = inject(TemplateRef);
-        /**
-         * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
-         */
-        this.side = input(RdxTooltipSide.Top);
-        /**
-         * The distance in pixels from the trigger.
-         */
-        this.sideOffset = input(0);
-        /**
-         * The preferred alignment against the trigger. May change when collisions occur.
-         */
-        this.align = input(RdxTooltipAlign.Center);
-        /**
-         * An offset in pixels from the "start" or "end" alignment options.
-         */
-        this.alignOffset = input(0);
-        /** @ingore */
-        this.position = computed(() => getContentPosition(this.side(), this.align(), this.sideOffset(), this.alignOffset()));
-        /**
-         * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
-         */
-        this.onEscapeKeyDown = output();
-        /**
-         * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
-         */
-        this.onPointerDownOutside = output();
+        this.rootDirective = injectTooltipRoot();
+        /** @ignore */
+        this.name = computed(() => `rdx-tooltip-content-attributes-${this.rootDirective.uniqueId()}`);
+        /** @ignore */
+        this.disableAnimation = computed(() => !this.canAnimate());
+    }
+    /** @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 */
+    canAnimate() {
+        return (this.rootDirective.cssAnimation() &&
+            ((this.rootDirective.cssOpeningAnimation() && this.rootDirective.state() === RdxTooltipState.OPEN) ||
+                (this.rootDirective.cssClosingAnimation() && this.rootDirective.state() === RdxTooltipState.CLOSED)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.11", 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 } }, outputs: { onEscapeKeyDown: "onEscapeKeyDown", onPointerDownOutside: "onPointerDownOutside" }, providers: [{ provide: RdxTooltipContentToken, useExisting: forwardRef(() => RdxTooltipContentDirective) }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipContentAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: RdxTooltipContentAttributesComponent, isStandalone: true, selector: "[rdxTooltipContentAttributes]", host: { listeners: { "animationstart": "onAnimationStart($event)", "animationend": "onAnimationEnd($event)" }, 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: "18.2.11", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipContentAttributesComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[rdxTooltipContent]',
-                    standalone: true,
-                    providers: [{ provide: RdxTooltipContentToken, useExisting: forwardRef(() => RdxTooltipContentDirective) }]
+                    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)'
+                    },
+                    providers: [
+                        {
+                            provide: RdxTooltipContentAttributesToken,
+                            useExisting: forwardRef(() => RdxTooltipContentAttributesComponent)
+                        }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
 const _imports = [
     RdxTooltipArrowDirective,
+    RdxTooltipCloseDirective,
     RdxTooltipContentDirective,
     RdxTooltipTriggerDirective,
-    RdxTooltipContentAttributesDirective,
-    RdxTooltipRootDirective
+    RdxTooltipRootDirective,
+    RdxTooltipAnchorDirective,
+    RdxTooltipContentAttributesComponent
 ];
 class RdxTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule, imports: [RdxTooltipArrowDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipModule, imports: [RdxTooltipArrowDirective,
+            RdxTooltipCloseDirective,
             RdxTooltipContentDirective,
             RdxTooltipTriggerDirective,
-            RdxTooltipContentAttributesDirective,
-            RdxTooltipRootDirective], exports: [RdxTooltipArrowDirective,
+            RdxTooltipRootDirective,
+            RdxTooltipAnchorDirective,
+            RdxTooltipContentAttributesComponent], exports: [RdxTooltipArrowDirective,
+            RdxTooltipCloseDirective,
             RdxTooltipContentDirective,
             RdxTooltipTriggerDirective,
-            RdxTooltipContentAttributesDirective,
-            RdxTooltipRootDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule }); }
+            RdxTooltipRootDirective,
+            RdxTooltipAnchorDirective,
+            RdxTooltipContentAttributesComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],
@@ -680,5 +1192,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { RdxTooltipAlign, RdxTooltipArrowDirective, RdxTooltipContentAttributesDirective, RdxTooltipContentDirective, RdxTooltipModule, RdxTooltipRootDirective, RdxTooltipRootToken, RdxTooltipSide, RdxTooltipTriggerDirective, injectTooltipRoot };
+export { RdxTooltipAnchorDirective, RdxTooltipArrowDirective, RdxTooltipCloseDirective, RdxTooltipContentAttributesComponent, RdxTooltipContentDirective, RdxTooltipModule, RdxTooltipRootDirective, RdxTooltipTriggerDirective };
 //# sourceMappingURL=radix-ng-primitives-tooltip.mjs.map