@radix-ng/primitives 0.17.0 → 0.18.0

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

@@ -0,0 +1,684 @@
+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';
+
+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 */
+        this.tooltipRoot = injectTooltipRoot();
+        /** @ignore */
+        this.elementRef = inject((ElementRef));
+        /** @ignore */
+        this.isPointerDown = false;
+        /** @ignore */
+        this.isPointerInside = false;
+    }
+    /** @ignore */
+    onPointerMove(event) {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        if (!this.isPointerInside) {
+            this.tooltipRoot.onTriggerEnter();
+            this.isPointerInside = true;
+        }
+    }
+    /** @ignore */
+    onPointerLeave() {
+        this.isPointerInside = false;
+        this.tooltipRoot.onTriggerLeave();
+    }
+    /** @ignore */
+    onPointerDown() {
+        this.isPointerDown = true;
+        this.elementRef.nativeElement.addEventListener('pointerup', () => {
+            this.isPointerDown = false;
+        }, { once: true });
+    }
+    /** @ignore */
+    onFocus() {
+        if (!this.isPointerDown) {
+            this.tooltipRoot.handleOpen();
+        }
+    }
+    /** @ignore */
+    onBlur() {
+        this.tooltipRoot.handleClose();
+    }
+    /** @ignore */
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipTrigger]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'tooltipRoot.state()',
+                        '(pointermove)': 'onPointerMove($event)',
+                        '(pointerleave)': 'onPointerLeave()',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(focus)': 'onFocus()',
+                        '(blur)': 'onBlur()',
+                        '(click)': 'onClick()'
+                    }
+                }]
+        }] });
+
+const defaultTooltipConfig = {
+    delayDuration: 700,
+    skipDelayDuration: 300
+};
+const RdxTooltipConfigToken = new InjectionToken('RdxTooltipConfigToken');
+function provideRdxTooltipConfig(config) {
+    return [
+        {
+            provide: RdxTooltipConfigToken,
+            useValue: { ...defaultTooltipConfig, ...config }
+        }
+    ];
+}
+function injectTooltipConfig() {
+    return inject(RdxTooltipConfigToken, { optional: true }) ?? defaultTooltipConfig;
+}
+
+const RdxTooltipRootToken = new InjectionToken('RdxTooltipRootToken');
+function injectTooltipRoot() {
+    return inject(RdxTooltipRootToken);
+}
+class RdxTooltipRootDirective {
+    constructor() {
+        /** @ignore */
+        this.viewContainerRef = inject(ViewContainerRef);
+        /** @ignore */
+        this.destroyRef = inject(DestroyRef);
+        /** @ignore */
+        this.overlay = inject(Overlay);
+        /** @ignore */
+        this.platformId = inject(PLATFORM_ID);
+        /** @ignore */
+        this.document = inject(DOCUMENT);
+        /** @ignore */
+        this.tooltipConfig = injectTooltipConfig();
+        /**
+         * The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
+         */
+        this.defaultOpen = input(false);
+        /**
+         * The controlled open state of the tooltip. Must be used in conjunction with onOpenChange.
+         */
+        this.open = input();
+        /**
+         * Override the duration given to the configuration to customise the open delay for a specific tooltip.
+         */
+        this.delayDuration = input(this.tooltipConfig.delayDuration);
+        /** @ignore */
+        this.disableHoverableContent = input(this.tooltipConfig.disableHoverableContent ?? false);
+        /**
+         * Event handler called when the open state of the tooltip changes.
+         */
+        this.onOpenChange = output();
+        /** @ignore */
+        this.isOpen = signal(this.defaultOpen());
+        /** @ignore */
+        this.isOpenDelayed = signal(true);
+        /** @ignore */
+        this.wasOpenDelayed = signal(false);
+        /** @ignore */
+        this.state = computed(() => {
+            const currentIsOpen = this.isOpen();
+            const currentWasOpenDelayed = this.wasOpenDelayed();
+            if (currentIsOpen) {
+                return currentWasOpenDelayed ? 'delayed-open' : 'instant-open';
+            }
+            return 'closed';
+        });
+        /** @ignore */
+        this.tooltipContentDirective = contentChild.required(RdxTooltipContentToken);
+        /** @ignore */
+        this.tooltipTriggerElementRef = contentChild.required(RdxTooltipTriggerDirective, { read: ElementRef });
+        /** @ignore */
+        this.openTimer = 0;
+        /** @ignore */
+        this.skipDelayTimer = 0;
+        /** @ignore */
+        this.isControlledExternally = false;
+        /** @ignore */
+        this.onIsOpenChangeEffect = effect(() => {
+            const isOpen = this.isOpen();
+            untracked(() => {
+                if (isOpen) {
+                    this.show();
+                }
+                else {
+                    this.hide();
+                }
+            });
+        });
+        /** @ignore */
+        this.onPositionChangeEffect = effect(() => {
+            const position = this.tooltipContentDirective().position();
+            if (this.overlayRef) {
+                const positionStrategy = this.getPositionStrategy(position);
+                this.overlayRef.updatePositionStrategy(positionStrategy);
+            }
+        });
+        /** @ignore */
+        this.onOpenChangeEffect = effect(() => {
+            const currentOpen = this.open();
+            this.isControlledExternally = currentOpen !== undefined;
+            untracked(() => {
+                if (this.isControlledExternally) {
+                    this.setOpen(currentOpen);
+                }
+            });
+        });
+    }
+    /** @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();
+    }
+    /** @ignore */
+    onOpen() {
+        this.clearTimeout(this.skipDelayTimer);
+        this.isOpenDelayed.set(false);
+    }
+    /** @ignore */
+    onClose() {
+        this.clearTimeout(this.skipDelayTimer);
+        if (isPlatformBrowser(this.platformId)) {
+            this.skipDelayTimer = window.setTimeout(() => {
+                this.isOpenDelayed.set(true);
+            }, this.tooltipConfig.skipDelayDuration);
+        }
+    }
+    /** @ignore */
+    handleOpen() {
+        if (this.isControlledExternally) {
+            return;
+        }
+        this.wasOpenDelayed.set(false);
+        this.setOpen(true);
+    }
+    /** @ignore */
+    handleClose() {
+        if (this.isControlledExternally) {
+            return;
+        }
+        this.clearTimeout(this.openTimer);
+        this.setOpen(false);
+    }
+    /** @ignore */
+    handleOverlayKeydown() {
+        if (!this.overlayRef) {
+            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();
+            }
+        });
+    }
+    /** @ignore */
+    handlePointerDownOutside() {
+        if (!this.overlayRef) {
+            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());
+        }
+    }
+    /** @ignore */
+    setOpen(open = false) {
+        if (open) {
+            this.onOpen();
+            this.document.dispatchEvent(new CustomEvent('tooltip.open'));
+        }
+        else {
+            this.onClose();
+        }
+        this.isOpen.set(open);
+        this.onOpenChange.emit(open);
+    }
+    /** @ignore */
+    createOverlayRef() {
+        if (this.overlayRef) {
+            return this.overlayRef;
+        }
+        this.overlayRef = this.overlay.create({
+            direction: undefined,
+            positionStrategy: this.getPositionStrategy(this.tooltipContentDirective().position()),
+            scrollStrategy: this.overlay.scrollStrategies.close()
+        });
+        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();
+        }
+    }
+    /** @ignore */
+    hide() {
+        if (this.isControlledExternally && this.open()) {
+            return;
+        }
+        asyncScheduler.schedule(() => {
+            this.instance?.destroy();
+        }, this.tooltipConfig.hideDelayDuration ?? 0);
+    }
+    /** @ignore */
+    getPositionStrategy(connectedPosition) {
+        return this.overlay
+            .position()
+            .flexibleConnectedTo(this.tooltipTriggerElementRef())
+            .withFlexibleDimensions(false)
+            .withPositions([
+            connectedPosition
+        ])
+            .withLockedPosition();
+    }
+    /** @ignore */
+    clearTimeout(timeoutId) {
+        if (isPlatformBrowser(this.platformId)) {
+            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: [
+            {
+                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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipRootDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipRoot]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: RdxTooltipRootToken,
+                            useExisting: forwardRef(() => RdxTooltipRootDirective)
+                        }
+                    ],
+                    exportAs: 'rdxTooltipRoot'
+                }]
+        }] });
+
+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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipContentAttributesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipContentAttributes]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'tooltipRoot.state()',
+                        '[attr.data-side]': 'tooltipContent.side()'
+                    }
+                }]
+        }] });
+
+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 */
+        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();
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipContent]',
+                    standalone: true,
+                    providers: [{ provide: RdxTooltipContentToken, useExisting: forwardRef(() => RdxTooltipContentDirective) }]
+                }]
+        }] });
+
+const _imports = [
+    RdxTooltipArrowDirective,
+    RdxTooltipContentDirective,
+    RdxTooltipTriggerDirective,
+    RdxTooltipContentAttributesDirective,
+    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,
+            RdxTooltipContentDirective,
+            RdxTooltipTriggerDirective,
+            RdxTooltipContentAttributesDirective,
+            RdxTooltipRootDirective], exports: [RdxTooltipArrowDirective,
+            RdxTooltipContentDirective,
+            RdxTooltipTriggerDirective,
+            RdxTooltipContentAttributesDirective,
+            RdxTooltipRootDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: RdxTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [..._imports],
+                    exports: [..._imports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxTooltipAlign, RdxTooltipArrowDirective, RdxTooltipContentAttributesDirective, RdxTooltipContentDirective, RdxTooltipModule, RdxTooltipRootDirective, RdxTooltipRootToken, RdxTooltipSide, RdxTooltipTriggerDirective, injectTooltipRoot };
+//# sourceMappingURL=radix-ng-primitives-tooltip.mjs.map