@radix-ng/primitives 0.42.0 → 0.44.0

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

@@ -0,0 +1,740 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, signal, Directive, InjectionToken, DestroyRef, model, numberAttribute, booleanAttribute, computed, contentChild, effect, afterNextRender } from '@angular/core';
+import { createContext, watch } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopperAnchor, RdxPopper, RdxPopperArrow, RdxPopperContent, RdxPopperContentWrapper } from '@radix-ng/primitives/popper';
+import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer } from '@radix-ng/primitives/dismissable-layer';
+import * as i1$2 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$3 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+
+class RdxTooltipTrigger {
+    constructor() {
+        this.rootContext = injectRdxTooltipContext();
+        this.elementRef = inject(ElementRef);
+        this.userOnPointerDown = input(undefined, ...(ngDevMode ? [{ debugName: "userOnPointerDown", alias: 'rdxOnPointerDown' }] : [{
+                alias: 'rdxOnPointerDown'
+            }]));
+        this.isPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDown" }] : []));
+        this.hasPointerMoveOpened = signal(false, ...(ngDevMode ? [{ debugName: "hasPointerMoveOpened" }] : []));
+    }
+    handleFocus(event) {
+        if (this.rootContext.isControlledState())
+            return;
+        if (this.isPointerDown())
+            return;
+        if (this.rootContext.ignoreNonKeyboardFocus() && !event.target.matches?.(':focus-visible')) {
+            return;
+        }
+        this.rootContext.open();
+    }
+    handleBlur() {
+        if (this.rootContext.isControlledState())
+            return;
+        this.rootContext.close();
+    }
+    handleClick() {
+        if (this.rootContext.isControlledState())
+            return;
+        if (!this.rootContext.disableClosingTrigger()) {
+            this.rootContext.close();
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'touch')
+            return;
+        if (this.rootContext.isControlledState())
+            return;
+        if (!this.hasPointerMoveOpened() && !this.rootContext.isPointerInTransit()) {
+            this.rootContext.onTriggerEnter();
+            this.hasPointerMoveOpened.set(true);
+        }
+    }
+    handlePointerLeave() {
+        if (this.rootContext.isControlledState())
+            return;
+        this.rootContext.onTriggerLeave();
+        this.hasPointerMoveOpened.set(false);
+    }
+    async handlePointerDown(event) {
+        const user = this.userOnPointerDown();
+        let result;
+        if (user) {
+            result = user(event);
+            if (result instanceof Promise)
+                result = await result;
+        }
+        if (event.defaultPrevented || result === false)
+            return;
+        if (this.rootContext.isOpen() && !this.rootContext.disableClosingTrigger()) {
+            this.rootContext.close();
+        }
+        this.isPointerDown.set(true);
+        const handlePointerUp = () => {
+            setTimeout(() => this.isPointerDown.set(false), 1);
+        };
+        document.addEventListener('pointerup', handlePointerUp, { once: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTooltipTrigger, isStandalone: true, selector: "[rdxTooltipTrigger]", inputs: { userOnPointerDown: { classPropertyName: "userOnPointerDown", publicName: "rdxOnPointerDown", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-grace-area-trigger": "''" }, listeners: { "pointermove": "rootContext.isDisabled() ? undefined : handlePointerMove($event)", "pointerleave": "rootContext.isDisabled() ? undefined : handlePointerLeave()", "pointerdown": "rootContext.isDisabled() ? undefined : handlePointerDown($event)", "focus": "rootContext.isDisabled() ? undefined : handleFocus($event)", "blur": "rootContext.isDisabled() ? undefined : handleBlur()", "click": "rootContext.isDisabled() ? undefined : handleClick()" }, properties: { "attr.aria-describedby": "rootContext.isOpen() ? rootContext.contentId : undefined", "attr.data-state": "rootContext.state()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
+                    host: {
+                        'data-grace-area-trigger': "''",
+                        '[attr.aria-describedby]': 'rootContext.isOpen() ? rootContext.contentId : undefined',
+                        '[attr.data-state]': 'rootContext.state()',
+                        '(pointermove)': 'rootContext.isDisabled() ? undefined : handlePointerMove($event)',
+                        '(pointerleave)': 'rootContext.isDisabled() ? undefined : handlePointerLeave()',
+                        '(pointerdown)': 'rootContext.isDisabled() ? undefined : handlePointerDown($event)',
+                        '(focus)': 'rootContext.isDisabled() ? undefined : handleFocus($event)',
+                        '(blur)': 'rootContext.isDisabled() ? undefined : handleBlur()',
+                        '(click)': 'rootContext.isDisabled() ? undefined : handleClick()'
+                    }
+                }]
+        }] });
+
+const defaultTooltipConfig = {
+    delayDuration: 700,
+    skipDelayDuration: 300,
+    disableHoverableContent: false,
+    disableClosingTrigger: false,
+    closeDelay: 0
+};
+const RdxTooltipDefaultsToken = new InjectionToken('RdxTooltipDefaults Token');
+function provideRdxTooltipConfig(config) {
+    return [
+        {
+            provide: RdxTooltipDefaultsToken,
+            useValue: { ...defaultTooltipConfig, ...config }
+        }
+    ];
+}
+function injectRdxTooltipConfig() {
+    return inject(RdxTooltipDefaultsToken, { optional: true }) ?? defaultTooltipConfig;
+}
+
+function useTimeoutFn(cb, delay, options = {}, destroyRef) {
+    let id = null;
+    const resolveDelay = () => (typeof delay === 'function' ? delay() : delay);
+    const stop = () => {
+        if (id != null) {
+            clearTimeout(id);
+            id = null;
+        }
+    };
+    const start = () => {
+        stop();
+        const ms = resolveDelay();
+        if (ms <= 0) {
+            queueMicrotask(cb);
+            return;
+        }
+        id = window.setTimeout(() => {
+            id = null;
+            cb();
+        }, ms);
+    };
+    if (options.immediate) {
+        start();
+    }
+    if (destroyRef) {
+        destroyRef.onDestroy(stop);
+    }
+    return { start, stop, isPending: () => id != null };
+}
+
+const context = () => {
+    const context = inject(RdxTooltip);
+    return {
+        isOpen: context.open,
+        state: context.state,
+        contentId: inject(_IdGenerator).getId('rdx-tooltip-content-'),
+        trigger: context.trigger,
+        isDisabled: context.disabled,
+        ignoreNonKeyboardFocus: context.ignoreNonKeyboardFocus,
+        disableClosingTrigger: context.disableClosingTrigger,
+        disableHoverableContent: context.disableHoverableContent,
+        isPointerInTransit: context.isPointerInTransit.asReadonly(),
+        isControlledState: context.isControlledState,
+        open() {
+            context.handleOpen();
+        },
+        close() {
+            context.handleClose();
+        },
+        onTriggerEnter() {
+            if (context.isOpenDelayed()) {
+                context.handleDelayedOpen();
+            }
+            else {
+                context.handleOpen();
+            }
+        },
+        onTriggerLeave() {
+            if (context.disableHoverableContent()) {
+                context.handleClose();
+            }
+            else {
+                // Clear the timer in case the pointer leaves the trigger before the tooltip is opened.
+                context.clearTimer();
+            }
+        }
+    };
+};
+const [injectRdxTooltipContext, provideRdxTooltipContext] = createContext('RdxTooltipContext');
+class RdxTooltip {
+    constructor() {
+        this.defaultConfig = injectRdxTooltipConfig();
+        this.destroyRef = inject(DestroyRef);
+        /**
+         * Whether the tooltip is currently open.
+         */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
+        /**
+         * The duration from when the pointer enters the trigger until the tooltip gets opened.
+         */
+        this.delayDuration = input(this.defaultConfig.delayDuration, ...(ngDevMode ? [{ debugName: "delayDuration", transform: numberAttribute }] : [{
+                transform: numberAttribute
+            }]));
+        /**
+         * How much time a user has to enter another trigger without incurring a delay again.
+         * @defaultValue 300
+         */
+        this.skipDelayDuration = input(this.defaultConfig.skipDelayDuration, ...(ngDevMode ? [{ debugName: "skipDelayDuration", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+         */
+        this.disableHoverableContent = input(this.defaultConfig.disableHoverableContent, ...(ngDevMode ? [{ debugName: "disableHoverableContent", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
+        /**
+         * When `true`, disable tooltip
+         * @defaultValue false
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * How long to wait before closing the tooltip. Specified in milliseconds.
+         */
+        this.closeDelay = input(this.defaultConfig.closeDelay, ...(ngDevMode ? [{ debugName: "closeDelay", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * When `true`, clicking on trigger will not close the content.
+         * @defaultValue false
+         */
+        this.disableClosingTrigger = input(false, ...(ngDevMode ? [{ debugName: "disableClosingTrigger", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Prevent the tooltip from opening if the focus did not come from
+         * the keyboard by matching against the `:focus-visible` selector.
+         * This is useful if you want to avoid opening it when switching
+         * browser tabs or closing a dialog.
+         * @defaultValue false
+         */
+        this.ignoreNonKeyboardFocus = input(false, ...(ngDevMode ? [{ debugName: "ignoreNonKeyboardFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * To render a controlled tooltip
+         */
+        this.isControlledState = input(false, ...(ngDevMode ? [{ debugName: "isControlledState", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.isPointerInTransit = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInTransit" }] : []));
+        this.isOpenDelayed = signal(true, ...(ngDevMode ? [{ debugName: "isOpenDelayed" }] : []));
+        this.wasOpenDelayed = signal(false, ...(ngDevMode ? [{ debugName: "wasOpenDelayed" }] : []));
+        this.state = computed(() => {
+            if (!this.open()) {
+                return 'closed';
+            }
+            return this.wasOpenDelayed() ? 'delayed-open' : 'instant-open';
+        }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.trigger = contentChild.required(RdxTooltipTrigger);
+        this.timerProvider = useTimeoutFn(() => {
+            this.isOpenDelayed.set(true);
+        }, () => this.skipDelayDuration(), { immediate: false }, this.destroyRef);
+        this.timer = useTimeoutFn(() => {
+            this.wasOpenDelayed.set(true);
+            this.open.set(true);
+        }, () => this.delayDuration(), { immediate: false }, this.destroyRef);
+        this.startTimer = () => this.timer.start();
+        this.clearTimer = () => this.timer.stop();
+        watch([this.open], ([isOpen]) => {
+            if (isOpen) {
+                this.timerProvider.stop();
+                this.isOpenDelayed.set(false);
+            }
+            else {
+                this.timerProvider.start();
+            }
+        });
+    }
+    handleOpen() {
+        this.clearTimer();
+        this.wasOpenDelayed.set(false);
+        this.open.set(true);
+    }
+    handleClose() {
+        this.clearTimer();
+        window.setTimeout(() => {
+            this.open.set(false);
+        }, this.closeDelay());
+    }
+    handleDelayedOpen() {
+        this.startTimer();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.3", type: RdxTooltip, isStandalone: true, selector: "[rdxTooltip]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delayDuration: { classPropertyName: "delayDuration", publicName: "delayDuration", isSignal: true, isRequired: false, transformFunction: null }, skipDelayDuration: { classPropertyName: "skipDelayDuration", publicName: "skipDelayDuration", isSignal: true, isRequired: false, transformFunction: null }, disableHoverableContent: { classPropertyName: "disableHoverableContent", publicName: "disableHoverableContent", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null }, disableClosingTrigger: { classPropertyName: "disableClosingTrigger", publicName: "disableClosingTrigger", isSignal: true, isRequired: false, transformFunction: null }, ignoreNonKeyboardFocus: { classPropertyName: "ignoreNonKeyboardFocus", publicName: "ignoreNonKeyboardFocus", isSignal: true, isRequired: false, transformFunction: null }, isControlledState: { classPropertyName: "isControlledState", publicName: "isControlledState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, providers: [provideRdxTooltipContext(context)], queries: [{ propertyName: "trigger", first: true, predicate: RdxTooltipTrigger, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltip]',
+                    providers: [provideRdxTooltipContext(context)],
+                    hostDirectives: [RdxPopper]
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxTooltipArrow {
+    constructor() {
+        this.isVisuallyHidden = !!inject(RdxVisuallyHiddenDirective, {
+            optional: true
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipArrow, isStandalone: true, selector: "[rdxTooltipArrow]", host: { properties: { "hidden": "isVisuallyHidden" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipArrow]',
+                    hostDirectives: [RdxPopperArrow],
+                    host: {
+                        '[hidden]': 'isVisuallyHidden'
+                    }
+                }]
+        }] });
+
+class RdxTooltipContent {
+    constructor() {
+        this.rootContext = injectRdxTooltipContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipContent, isStandalone: true, selector: "[rdxTooltipContent]", host: { attributes: { "role": "tooltip" }, properties: { "id": "rootContext.contentId" } }, hostDirectives: [{ directive: i1.RdxPopperContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipContent]',
+                    hostDirectives: [RdxPopperContent],
+                    host: {
+                        role: 'tooltip',
+                        '[id]': 'rootContext.contentId'
+                    }
+                }]
+        }] });
+
+function createSignalEvent() {
+    const handlers = new Set();
+    return {
+        on(cb) {
+            handlers.add(cb);
+            return () => handlers.delete(cb);
+        },
+        emit(v) {
+            handlers.forEach((h) => h(v));
+        },
+        emitVoid() {
+            handlers.forEach((h) => h(undefined));
+        },
+        clear() {
+            handlers.clear();
+        }
+    };
+}
+/**
+ *
+ * @param triggerEl   Signal<HTMLElement | null | undefined>
+ * @param containerEl Signal<HTMLElement | null | undefined>
+ * @param resetMs
+ */
+function useGraceArea(triggerEl, containerEl, resetMs = 300) {
+    const isPointerInTransit = signal(false, ...(ngDevMode ? [{ debugName: "isPointerInTransit" }] : []));
+    const pointerExit = createSignalEvent();
+    let pointerGraceArea = null;
+    let resetTimer = null;
+    function armInTransitAutoReset() {
+        if (resetTimer !== null)
+            window.clearTimeout(resetTimer);
+        resetTimer = window.setTimeout(() => {
+            isPointerInTransit.set(false);
+            resetTimer = null;
+        }, resetMs);
+    }
+    function clearGraceArea() {
+        pointerGraceArea = null;
+        isPointerInTransit.set(false);
+        if (resetTimer !== null) {
+            window.clearTimeout(resetTimer);
+            resetTimer = null;
+        }
+    }
+    function createGraceArea(event, hoverTarget) {
+        const currentTarget = event.currentTarget;
+        const exitPoint = { x: event.clientX, y: event.clientY };
+        const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+        const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+        const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+        pointerGraceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+        isPointerInTransit.set(true);
+        armInTransitAutoReset();
+    }
+    function trackPointerGrace(event) {
+        if (!pointerGraceArea)
+            return;
+        if (!(event.target instanceof HTMLElement))
+            return;
+        const trigger = triggerEl();
+        const container = containerEl();
+        if (!trigger || !container)
+            return;
+        const target = event.target;
+        const pointerPosition = { x: event.clientX, y: event.clientY };
+        const hasEnteredTarget = trigger.contains(target) || container.contains(target);
+        const isOutsideGrace = !isPointInPolygon(pointerPosition, pointerGraceArea);
+        const isAnotherGraceAreaTrigger = !!target.closest('[data-grace-area-trigger]');
+        if (hasEnteredTarget) {
+            clearGraceArea();
+        }
+        else if (isOutsideGrace || isAnotherGraceAreaTrigger) {
+            clearGraceArea();
+            pointerExit.emitVoid();
+        }
+    }
+    effect((onCleanupFn) => {
+        const trigger = triggerEl();
+        const container = containerEl();
+        onCleanupFn(() => {
+            const doc = trigger?.ownerDocument;
+            trigger?.removeEventListener('pointerleave', onTriggerLeave);
+            container?.removeEventListener('pointerleave', onContainerLeave);
+            doc?.removeEventListener('pointermove', trackPointerGrace);
+            trigger?.removeAttribute('data-grace-area-trigger');
+            clearGraceArea();
+        });
+        if (!trigger || !container)
+            return;
+        trigger.setAttribute('data-grace-area-trigger', '');
+        const onTriggerLeave = (e) => createGraceArea(e, container);
+        const onContainerLeave = (e) => createGraceArea(e, trigger);
+        trigger.addEventListener('pointerleave', onTriggerLeave, { passive: true });
+        container.addEventListener('pointerleave', onContainerLeave, { passive: true });
+        trigger.ownerDocument.addEventListener('pointermove', trackPointerGrace, { passive: true });
+    });
+    return {
+        isPointerInTransit: isPointerInTransit.asReadonly(),
+        onPointerExit: pointerExit.on
+    };
+}
+function getExitSideFromRect(point, rect) {
+    const top = Math.abs(rect.top - point.y);
+    const bottom = Math.abs(rect.bottom - point.y);
+    const right = Math.abs(rect.right - point.x);
+    const left = Math.abs(rect.left - point.x);
+    switch (Math.min(top, bottom, right, left)) {
+        case left:
+            return 'left';
+        case right:
+            return 'right';
+        case top:
+            return 'top';
+        case bottom:
+            return 'bottom';
+        default:
+            throw new Error('unreachable');
+    }
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
+    const pts = [];
+    switch (exitSide) {
+        case 'top':
+            pts.push({ x: exitPoint.x - padding, y: exitPoint.y + padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
+            break;
+        case 'bottom':
+            pts.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y - padding });
+            break;
+        case 'left':
+            pts.push({ x: exitPoint.x + padding, y: exitPoint.y - padding }, { x: exitPoint.x + padding, y: exitPoint.y + padding });
+            break;
+        case 'right':
+            pts.push({ x: exitPoint.x - padding, y: exitPoint.y - padding }, { x: exitPoint.x - padding, y: exitPoint.y + padding });
+            break;
+    }
+    return pts;
+}
+function getPointsFromRect(rect) {
+    const { top, right, bottom, left } = rect;
+    return [
+        { x: left, y: top },
+        { x: right, y: top },
+        { x: right, y: bottom },
+        { x: left, y: bottom }
+    ];
+}
+function isPointInPolygon(point, polygon) {
+    const { x, y } = point;
+    let inside = false;
+    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+        const xi = polygon[i].x, yi = polygon[i].y;
+        const xj = polygon[j].x, yj = polygon[j].y;
+        const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;
+        if (intersect)
+            inside = !inside;
+    }
+    return inside;
+}
+function getHull(points) {
+    const newPoints = points.slice();
+    newPoints.sort((a, b) => a.x - b.x || a.y - b.y);
+    return getHullPresorted(newPoints);
+}
+function getHullPresorted(points) {
+    if (points.length <= 1)
+        return points.slice();
+    const upper = [];
+    for (let i = 0; i < points.length; i++) {
+        const p = points[i];
+        while (upper.length >= 2) {
+            const q = upper[upper.length - 1];
+            const r = upper[upper.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
+                upper.pop();
+            else
+                break;
+        }
+        upper.push(p);
+    }
+    upper.pop();
+    const lower = [];
+    for (let i = points.length - 1; i >= 0; i--) {
+        const p = points[i];
+        while (lower.length >= 2) {
+            const q = lower[lower.length - 1];
+            const r = lower[lower.length - 2];
+            if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x))
+                lower.pop();
+            else
+                break;
+        }
+        lower.push(p);
+    }
+    lower.pop();
+    if (upper.length === 1 && lower.length === 1 && upper[0].x === lower[0].x && upper[0].y === lower[0].y) {
+        return upper;
+    }
+    else {
+        return upper.concat(lower);
+    }
+}
+
+class RdxTooltipContentWrapper {
+    constructor() {
+        this.rootContext = injectRdxTooltipContext();
+        this.destroyRef = inject(DestroyRef);
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.elementRef = inject(ElementRef);
+        /**
+         * The preferred side of the anchor to render against when open.
+         * Will be reversed when collisions occur and avoidCollisions is enabled.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : []));
+        /**
+         * The distance in pixels from the anchor.
+         */
+        this.sideOffset = input(0, ...(ngDevMode ? [{ debugName: "sideOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * The preferred alignment against the anchor. May change when collisions occur.
+         */
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : []));
+        /**
+         * An offset in pixels from the `start` or `end` alignment options.
+         */
+        this.alignOffset = input(0, ...(ngDevMode ? [{ debugName: "alignOffset", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * The padding between the arrow and the edges of the content.
+         * If your content has border-radius, this will prevent it from overflowing the corners.
+         */
+        this.arrowPadding = input(0, ...(ngDevMode ? [{ debugName: "arrowPadding", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        /**
+         * When `true`, overrides the `side` and `align` preferences to prevent collisions with boundary edges.
+         */
+        this.avoidCollisions = input(true, ...(ngDevMode ? [{ debugName: "avoidCollisions", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * The element used as the collision boundary.
+         * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : []));
+        /**
+         * The distance in pixels from the boundary edges where collision detection should occur.
+         * Accepts a number (same for all sides), or a partial padding object, for example: `{ top: 20, left: 20 }`.
+         */
+        this.collisionPadding = input(0, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : []));
+        /**
+         * The sticky behavior on the `align` axis.
+         * - `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary
+         * - `always` will keep the content in the boundary regardless.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+        /**
+         * Whether to hide the content when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, ...(ngDevMode ? [{ debugName: "hideWhenDetached", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * Whether to update the position of the floating element on every animation frame if required.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : []));
+        /**
+         * Emits when the element is placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
+        /**
+         * Event handler called when the escape key is down.
+         * Can be prevented.
+         */
+        this.escapeKeyDown = outputFromObservable(outputToObservable(this.dismissableLayer.escapeKeyDown));
+        /**
+         * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
+         * Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : []));
+        this.containerEl = signal(null, ...(ngDevMode ? [{ debugName: "containerEl" }] : []));
+        this.graceArea = useGraceArea(this.triggerEl, this.containerEl, 300);
+        this.afterNextRender = afterNextRender(() => {
+            this.triggerEl.set(this.rootContext.trigger().elementRef.nativeElement);
+            this.containerEl.set(this.elementRef.nativeElement);
+            const handleScroll = (event) => {
+                const target = event.target;
+                if (target?.contains(this.rootContext.trigger().elementRef.nativeElement)) {
+                    this.rootContext.close();
+                }
+            };
+            window.addEventListener('scroll', handleScroll, { capture: true });
+            this.destroyRef.onDestroy(() => {
+                window.removeEventListener('scroll', handleScroll, { capture: true });
+            });
+            this.graceArea.onPointerExit(() => {
+                if (this.rootContext.disableHoverableContent())
+                    return;
+                this.rootContext.close();
+            });
+        });
+        this.dismissableLayer.focusOutside.subscribe((e) => e.preventDefault());
+        this.dismissableLayer.dismiss.subscribe(() => this.rootContext.close());
+        this.dismissableLayer.pointerDownOutside.subscribe((event) => {
+            if (this.rootContext.disableClosingTrigger() &&
+                this.rootContext.trigger().elementRef.nativeElement.contains(event.target))
+                event.preventDefault();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentWrapper, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTooltipContentWrapper, isStandalone: true, selector: "[rdxTooltipContentWrapper]", 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 }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed", escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside" }, host: { properties: { "attr.data-state": "rootContext.state()", "style": "{\n          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',\n          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',\n          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',\n          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',\n          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',\n        }" } }, hostDirectives: [{ directive: i1$1.RdxDismissableLayer }, { directive: i1.RdxPopperContentWrapper, inputs: ["side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipContentWrapper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipContentWrapper]',
+                    hostDirectives: [
+                        RdxDismissableLayer,
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[attr.data-state]': 'rootContext.state()',
+                        // re-namespace exposed content custom properties
+                        '[style]': `{
+          '--radix-tooltip-content-transform-origin': 'var(--radix-popper-transform-origin)',
+          '--radix-tooltip-content-available-width': 'var(--radix-popper-available-width)',
+          '--radix-tooltip-content-available-height': 'var(--radix-popper-available-height)',
+          '--radix-tooltip-trigger-width': 'var(--radix-popper-anchor-width)',
+          '--radix-tooltip-trigger-height': 'var(--radix-popper-anchor-height)',
+        }`
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class RdxTooltipPortal {
+    constructor() {
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxTooltipPortal, isStandalone: true, selector: "[rdxTooltipPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1$2.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxTooltipPortal]',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }] });
+
+class RdxTooltipPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxTooltipPortalPresence, isStandalone: true, selector: "ng-template[rdxTooltipPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectRdxTooltipContext();
+                return { present: context.isOpen };
+            })
+        ], hostDirectives: [{ directive: i1$3.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxTooltipPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxTooltipPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectRdxTooltipContext();
+                            return { present: context.isOpen };
+                        })
+                    ]
+                }]
+        }] });
+
+const tooltipImports = [
+    RdxTooltip,
+    RdxTooltipArrow,
+    RdxTooltipContent,
+    RdxTooltipContentWrapper,
+    RdxTooltipPortal,
+    RdxTooltipTrigger,
+    RdxTooltipPortalPresence
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxTooltip, RdxTooltipArrow, RdxTooltipContent, RdxTooltipContentWrapper, RdxTooltipDefaultsToken, RdxTooltipPortal, RdxTooltipPortalPresence, RdxTooltipTrigger, defaultTooltipConfig, injectRdxTooltipConfig, injectRdxTooltipContext, provideRdxTooltipConfig, provideRdxTooltipContext, tooltipImports };
+//# sourceMappingURL=radix-ng-primitives-tooltip2.mjs.map