@radix-ng/primitives 0.24.0 → 0.25.0

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

@@ -1,8 +1,9 @@
 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 { InjectionToken, inject, ElementRef, Directive, ViewContainerRef, DestroyRef, PLATFORM_ID, input, output, signal, computed, contentChild, effect, untracked, forwardRef, Renderer2, afterNextRender, TemplateRef, NgModule } from '@angular/core';
+import { injectDocument, injectWindow, getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions, RdxPositionSide, RdxPositionAlign, getContentPosition } from '@radix-ng/primitives/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { filter, take, asyncScheduler } from 'rxjs';
 
@@ -10,107 +11,6 @@ const RdxTooltipArrowToken = new InjectionToken('RdxTooltipArrowToken');
 
 const RdxTooltipContentToken = new InjectionToken('RdxTooltipContentToken');
 
-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 = {}));
-
-class RdxTooltipArrowDirective {
-    constructor() {
-        /** @ignore */
-        this.renderer = inject(Renderer2);
-        /** @ignore */
-        this.contentDirective = inject(RdxTooltipContentToken);
-        /** @ignore */
-        this.elementRef = inject(ElementRef);
-        /**
-         * The width of the arrow in pixels.
-         */
-        this.width = input(10);
-        /**
-         * The height of the arrow in pixels.
-         */
-        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;
-        });
-        /** @ignore */
-        this.onArrowSvgElementChangeEffect = effect(() => {
-            const arrowElement = this.arrowSvgElement();
-            this.renderer.appendChild(this.elementRef.nativeElement, arrowElement);
-        });
-        /** @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%)';
-                }
-            }
-        });
-    }
-    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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipArrowDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[rdxTooltipArrow]',
-                    standalone: true,
-                    providers: [
-                        {
-                            provide: RdxTooltipArrowToken,
-                            useExisting: forwardRef(() => RdxTooltipArrowDirective)
-                        }
-                    ]
-                }]
-        }] });
-
 class RdxTooltipTriggerDirective {
     constructor() {
         /** @ignore */
@@ -158,10 +58,10 @@ class RdxTooltipTriggerDirective {
     onClick() {
         this.tooltipRoot.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: { listeners: { "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()", "pointerdown": "onPointerDown()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()" }, properties: { "attr.data-state": "tooltipRoot.state()" } }, 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]',
@@ -210,7 +110,9 @@ class RdxTooltipRootDirective {
         /** @ignore */
         this.platformId = inject(PLATFORM_ID);
         /** @ignore */
-        this.document = inject(DOCUMENT);
+        this.document = injectDocument();
+        /** @ignore */
+        this.window = injectWindow();
         /** @ignore */
         this.tooltipConfig = injectTooltipConfig();
         /**
@@ -249,7 +151,7 @@ class RdxTooltipRootDirective {
         /** @ignore */
         this.tooltipContentDirective = contentChild.required(RdxTooltipContentToken);
         /** @ignore */
-        this.tooltipTriggerElementRef = contentChild.required(RdxTooltipTriggerDirective, { read: ElementRef });
+        this.tooltipTriggerDirective = contentChild.required(RdxTooltipTriggerDirective);
         /** @ignore */
         this.openTimer = 0;
         /** @ignore */
@@ -320,7 +222,7 @@ class RdxTooltipRootDirective {
     onClose() {
         this.clearTimeout(this.skipDelayTimer);
         if (isPlatformBrowser(this.platformId)) {
-            this.skipDelayTimer = window.setTimeout(() => {
+            this.skipDelayTimer = this.window.setTimeout(() => {
                 this.isOpenDelayed.set(true);
             }, this.tooltipConfig.skipDelayDuration);
         }
@@ -370,7 +272,7 @@ class RdxTooltipRootDirective {
     handleDelayedOpen() {
         this.clearTimeout(this.openTimer);
         if (isPlatformBrowser(this.platformId)) {
-            this.openTimer = window.setTimeout(() => {
+            this.openTimer = this.window.setTimeout(() => {
                 this.wasOpenDelayed.set(true);
                 this.setOpen(true);
             }, this.delayDuration());
@@ -437,7 +339,7 @@ class RdxTooltipRootDirective {
     getPositionStrategy(connectedPosition) {
         return this.overlay
             .position()
-            .flexibleConnectedTo(this.tooltipTriggerElementRef())
+            .flexibleConnectedTo(this.tooltipTriggerDirective().elementRef)
             .withFlexibleDimensions(false)
             .withPositions([
             connectedPosition
@@ -447,18 +349,18 @@ class RdxTooltipRootDirective {
     /** @ignore */
     clearTimeout(timeoutId) {
         if (isPlatformBrowser(this.platformId)) {
-            window.clearTimeout(timeoutId);
+            this.window.clearTimeout(timeoutId);
         }
     }
-    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: 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: { 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: [
             {
                 provide: RdxTooltipRootToken,
                 useExisting: forwardRef(() => RdxTooltipRootDirective)
             }
-        ], 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 }); }
+        ], queries: [{ propertyName: "tooltipContentDirective", first: true, predicate: RdxTooltipContentToken, descendants: true, isSignal: true }, { propertyName: "tooltipTriggerDirective", first: true, predicate: RdxTooltipTriggerDirective, descendants: true, isSignal: true }], exportAs: ["rdxTooltipRoot"], 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: RdxTooltipRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipRoot]',
@@ -473,15 +375,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }] });
 
+class RdxTooltipArrowDirective {
+    constructor() {
+        /** @ignore */
+        this.tooltipRoot = injectTooltipRoot();
+        /** @ignore */
+        this.renderer = inject(Renderer2);
+        /** @ignore */
+        this.contentDirective = inject(RdxTooltipContentToken);
+        /** @ignore */
+        this.elementRef = inject(ElementRef);
+        /**
+         * The width of the arrow in pixels.
+         */
+        this.width = input(10);
+        /**
+         * The height of the arrow in pixels.
+         */
+        this.height = input(5);
+        /** @ignore */
+        this.currentArrowSvgElement = signal(void 0);
+        /** @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.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 */
+        this.onContentPositionAndArrowDimensionsChangeEffect = effect(() => {
+            const position = this.contentDirective.position();
+            const arrowDimensions = { width: this.width(), height: this.height() };
+            untracked(() => {
+                if (!position) {
+                    return;
+                }
+                this.setPosition(position, arrowDimensions);
+            });
+        });
+        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');
+            }
+        });
+    }
+    /** @ignore */
+    setTriggerRect() {
+        this.triggerRect = this.tooltipRoot.tooltipTriggerDirective().elementRef.nativeElement.getBoundingClientRect();
+    }
+    /** @ignore */
+    setPosition(position, arrowDimensions) {
+        this.setTriggerRect();
+        const posParams = getArrowPositionParams(getSideAndAlignFromAllPossibleConnectedPositions(position), { width: arrowDimensions.width, height: arrowDimensions.height }, { width: this.triggerRect.width, height: this.triggerRect.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);
+    }
+    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: "19.0.5", ngImport: i0, type: RdxTooltipArrowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipArrow]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: RdxTooltipArrowToken,
+                            useExisting: forwardRef(() => RdxTooltipArrowDirective)
+                        }
+                    ]
+                }]
+        }], ctorParameters: () => [] });
+
 class RdxTooltipContentAttributesDirective {
     constructor() {
         this.tooltipRoot = inject(RdxTooltipRootDirective);
         this.tooltipContent = inject(RdxTooltipContentToken);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipContentAttributesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: RdxTooltipContentAttributesDirective, isStandalone: true, selector: "[rdxTooltipContentAttributes]", host: { properties: { "attr.data-state": "tooltipRoot.state()", "attr.data-side": "tooltipContent.side()" } }, 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: RdxTooltipContentAttributesDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipContentAttributes]',
@@ -493,118 +501,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
                 }]
         }] });
 
-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'
-        }
-    }
-};
-
-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;
-    }
-    if ([RdxTooltipAlign.Start, RdxTooltipAlign.End].includes(align) && alignOffset) {
-        const alignOffsetFactor = align === RdxTooltipAlign.End ? -1 : 1;
-        position.offsetX = alignOffsetFactor * alignOffset;
-    }
-    return position;
-}
-
 class RdxTooltipContentDirective {
     constructor() {
         /** @ignore */
@@ -612,7 +508,7 @@ class RdxTooltipContentDirective {
         /**
          * 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);
+        this.side = input(RdxPositionSide.Top);
         /**
          * The distance in pixels from the trigger.
          */
@@ -620,13 +516,18 @@ class RdxTooltipContentDirective {
         /**
          * The preferred alignment against the trigger. May change when collisions occur.
          */
-        this.align = input(RdxTooltipAlign.Center);
+        this.align = input(RdxPositionAlign.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()));
+        this.position = computed(() => getContentPosition({
+            side: this.side(),
+            align: this.align(),
+            sideOffset: this.sideOffset(),
+            alignOffset: this.alignOffset()
+        }));
         /**
          * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
          */
@@ -636,10 +537,10 @@ class RdxTooltipContentDirective {
          */
         this.onPointerDownOutside = output();
     }
-    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: 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 } }, outputs: { onEscapeKeyDown: "onEscapeKeyDown", onPointerDownOutside: "onPointerDownOutside" }, providers: [{ provide: RdxTooltipContentToken, useExisting: forwardRef(() => RdxTooltipContentDirective) }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxTooltipContent]',
@@ -656,8 +557,8 @@ const _imports = [
     RdxTooltipRootDirective
 ];
 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,
             RdxTooltipContentDirective,
             RdxTooltipTriggerDirective,
             RdxTooltipContentAttributesDirective,
@@ -666,9 +567,9 @@ class RdxTooltipModule {
             RdxTooltipTriggerDirective,
             RdxTooltipContentAttributesDirective,
             RdxTooltipRootDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule }); }
+    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 +581,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 { RdxTooltipArrowDirective, RdxTooltipContentAttributesDirective, RdxTooltipContentDirective, RdxTooltipModule, RdxTooltipRootDirective, RdxTooltipRootToken, RdxTooltipTriggerDirective, injectTooltipRoot };
 //# sourceMappingURL=radix-ng-primitives-tooltip.mjs.map