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

package/fesm2022/radix-ng-primitives-preview-card.mjs

@@ -0,0 +1,997 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, model, input, booleanAttribute, output, computed, effect, untracked, Directive, ElementRef, numberAttribute, afterNextRender, NgModule } from '@angular/core';
+import * as i1 from '@radix-ng/primitives/popper';
+import { RdxPopper, RdxPopperContentWrapper, RdxPopperArrow, RdxPopperContent, provideRdxPopperContentConfig, RdxPopperAnchor } from '@radix-ng/primitives/popper';
+import { createContext, useTransitionStatus, injectId, useGraceArea } from '@radix-ng/primitives/core';
+import { outputFromObservable, outputToObservable } from '@angular/core/rxjs-interop';
+import * as i2 from '@radix-ng/primitives/dismissable-layer';
+import { RdxDismissableLayer, provideRdxDismissableLayerConfig } from '@radix-ng/primitives/dismissable-layer';
+import * as i1$1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$2 from '@radix-ng/primitives/presence';
+import { provideRdxPresenceContext, RdxPresenceDirective } from '@radix-ng/primitives/presence';
+
+const context = () => contextFor(inject(RdxPreviewCardRoot));
+const [injectRdxPreviewCardRootContext, provideRdxPreviewCardRootContext] = createContext('RdxPreviewCardRootContext');
+/**
+ * Groups all parts of the preview-card.
+ */
+class RdxPreviewCardRoot {
+    constructor() {
+        this.popper = inject(RdxPopper);
+        this.destroyRef = inject(DestroyRef);
+        /** Shared open/close transition state machine (completes on the real animationend). */
+        this.transition = useTransitionStatus((open) => {
+            this.instant.set(false);
+            this.onOpenChangeComplete.emit(open);
+        });
+        this.hasAppliedDefaultOpen = false;
+        this.hasAppliedDefaultTriggerId = false;
+        this.hoverDelay = 600;
+        this.hoverCloseDelay = 300;
+        this.isHoverActive = signal(false, ...(ngDevMode ? [{ debugName: "isHoverActive" }] : /* istanbul ignore next */ []));
+        this.instant = signal(false, ...(ngDevMode ? [{ debugName: "instant" }] : /* istanbul ignore next */ []));
+        this.openChangeReason = signal('none', ...(ngDevMode ? [{ debugName: "openChangeReason" }] : /* istanbul ignore next */ []));
+        this.transitionStatus = this.transition.status;
+        /**
+         * Whether the preview-card is currently open.
+         */
+        this.open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the preview-card is initially open.
+         */
+        this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * ID of the trigger associated with a controlled preview-card.
+         */
+        this.triggerId = model(null, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        /**
+         * ID of the trigger associated with an initially open uncontrolled preview-card.
+         */
+        this.defaultTriggerId = input(null, ...(ngDevMode ? [{ debugName: "defaultTriggerId" }] : /* istanbul ignore next */ []));
+        /**
+         * Associates this root with detached trigger elements.
+         */
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        this.contentId = injectId('rdx-preview-card-content-');
+        this.trigger = signal(undefined, ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+        this.triggers = signal([], ...(ngDevMode ? [{ debugName: "triggers" }] : /* istanbul ignore next */ []));
+        this.payload = signal(undefined, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+        this.isPointerDownOnTrigger = signal(false, ...(ngDevMode ? [{ debugName: "isPointerDownOnTrigger" }] : /* istanbul ignore next */ []));
+        this.onOpenChange = output();
+        this.onOpenChangeComplete = output();
+        this.registeredTriggers = new Map();
+        this.viewportTriggerChange = new Set();
+        this.state = computed(() => (this.open() ? 'open' : 'closed'), ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        let previousOpen = this.open();
+        effect(() => {
+            const defaultOpen = this.defaultOpen();
+            if (!this.hasAppliedDefaultOpen && defaultOpen) {
+                this.hasAppliedDefaultOpen = true;
+                this.open.set(defaultOpen);
+            }
+        });
+        effect(() => {
+            const defaultTriggerId = this.defaultTriggerId();
+            if (!this.hasAppliedDefaultTriggerId && defaultTriggerId !== null) {
+                this.hasAppliedDefaultTriggerId = true;
+                this.triggerId.set(defaultTriggerId);
+            }
+        });
+        effect(() => {
+            const triggerId = this.triggerId();
+            untracked(() => this.syncTriggerId(triggerId));
+        });
+        effect(() => {
+            const open = this.open();
+            if (open !== previousOpen) {
+                previousOpen = open;
+                untracked(() => this.transition.start(open));
+            }
+        });
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerRoot(contextFor(this))));
+            }
+        });
+        effect(() => this.popper.anchorOverride.set(this.trigger()));
+        this.destroyRef.onDestroy(() => {
+            this.clearHoverTimers();
+            if (this.instantFrame !== undefined) {
+                cancelAnimationFrame(this.instantFrame);
+            }
+        });
+    }
+    show(trigger = this.trigger(), payload, triggerId, reason = 'none', event = new Event('preview-card.open-change'), fromHover = false) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(fromHover);
+        this.openChangeReason.set(reason);
+        const previousTrigger = this.trigger();
+        const changedTriggerWhileOpen = this.open() && previousTrigger !== trigger;
+        this.instant.set(changedTriggerWhileOpen || reason === 'trigger-focus');
+        if (changedTriggerWhileOpen) {
+            this.scheduleInstantReset();
+        }
+        if (trigger) {
+            if (previousTrigger && previousTrigger !== trigger) {
+                this.viewportTriggerChange.forEach((notify) => notify(previousTrigger, trigger));
+            }
+            this.trigger.set(trigger);
+        }
+        if (triggerId !== undefined) {
+            this.triggerId.set(triggerId);
+        }
+        this.payload.set(payload);
+        const changed = !this.open() || previousTrigger !== trigger;
+        this.open.set(true);
+        if (changed) {
+            this.emitOpenChange(true, reason, event);
+        }
+    }
+    close(reason = 'none', event = new Event('preview-card.open-change')) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(false);
+        if (!this.open()) {
+            return;
+        }
+        this.instant.set(reason !== 'none' && reason !== 'trigger-hover');
+        this.openChangeReason.set(reason);
+        this.open.set(false);
+        this.emitOpenChange(false, reason, event);
+    }
+    toggle(triggerId, trigger, payload, event) {
+        this.clearHoverTimers();
+        if (this.open() && this.trigger() === trigger) {
+            this.close('trigger-press', event);
+            return;
+        }
+        this.show(trigger, payload, triggerId, 'trigger-press', event);
+    }
+    openWithDelay(trigger, payload, triggerId, reason, event) {
+        this.clearHoverTimers();
+        this.isHoverActive.set(true);
+        if (this.open()) {
+            this.show(trigger, payload, triggerId, reason, event, true);
+            return;
+        }
+        this.openTimer = setTimeout(() => this.show(trigger, payload, triggerId, reason, event, true), this.hoverDelay);
+    }
+    closeOnHover() {
+        if (!this.isHoverActive()) {
+            return;
+        }
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+        this.closeTimer = setTimeout(() => this.close('trigger-hover', new Event('preview-card.hover-close')), this.hoverCloseDelay);
+    }
+    cancelHoverClose() {
+        this.clearCloseTimer();
+    }
+    cancelHoverOpen() {
+        this.clearOpenTimer();
+    }
+    setHoverDelays(delay, closeDelay) {
+        this.hoverDelay = delay;
+        this.hoverCloseDelay = closeDelay;
+    }
+    registerTrigger(id, trigger, payload) {
+        this.registeredTriggers.set(id, { element: trigger, payload });
+        this.triggers.update((triggers) => (triggers.includes(trigger) ? triggers : [...triggers, trigger]));
+        if (this.triggerId() === id) {
+            this.trigger.set(trigger);
+            this.payload.set(payload());
+        }
+        else if (!this.trigger() && this.triggerId() === null) {
+            this.trigger.set(trigger);
+            this.payload.set(payload());
+        }
+        return () => {
+            if (this.registeredTriggers.get(id)?.element === trigger) {
+                this.registeredTriggers.delete(id);
+            }
+            this.triggers.update((triggers) => triggers.filter((candidate) => candidate !== trigger));
+            if (this.destroyRef.destroyed) {
+                return;
+            }
+            if (this.trigger() === trigger) {
+                const next = this.registeredTriggers.entries().next().value;
+                if (this.triggerId() !== null) {
+                    this.triggerId.set(next?.[0] ?? null);
+                }
+                this.trigger.set(next?.[1].element);
+                this.payload.set(next?.[1].payload());
+                if (!next && !this.destroyRef.destroyed) {
+                    this.close();
+                }
+            }
+        };
+    }
+    registerViewport(onTriggerChange) {
+        this.viewportTriggerChange.add(onTriggerChange);
+        return () => this.viewportTriggerChange.delete(onTriggerChange);
+    }
+    registerTransitionElement(element) {
+        return this.transition.registerElement(element);
+    }
+    syncTriggerId(triggerId) {
+        if (triggerId === null) {
+            this.trigger.set(undefined);
+            this.payload.set(undefined);
+            return;
+        }
+        const trigger = this.registeredTriggers.get(triggerId);
+        if (!trigger) {
+            this.trigger.set(undefined);
+            this.payload.set(undefined);
+            return;
+        }
+        if (trigger.element === this.trigger()) {
+            return;
+        }
+        const previousTrigger = this.trigger();
+        if (previousTrigger && this.open()) {
+            this.viewportTriggerChange.forEach((notify) => notify(previousTrigger, trigger.element));
+        }
+        this.trigger.set(trigger.element);
+        this.payload.set(trigger.payload());
+    }
+    emitOpenChange(open, reason, event) {
+        this.onOpenChange.emit({
+            open,
+            triggerId: this.triggerId(),
+            trigger: this.trigger(),
+            reason,
+            event
+        });
+    }
+    clearHoverTimers() {
+        this.clearOpenTimer();
+        this.clearCloseTimer();
+    }
+    clearOpenTimer() {
+        if (this.openTimer !== undefined) {
+            clearTimeout(this.openTimer);
+            this.openTimer = undefined;
+        }
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== undefined) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+    }
+    scheduleInstantReset() {
+        if (this.instantFrame !== undefined) {
+            cancelAnimationFrame(this.instantFrame);
+        }
+        this.instantFrame = requestAnimationFrame(() => {
+            this.instantFrame = undefined;
+            if (!this.destroyRef.destroyed && this.open()) {
+                this.instant.set(false);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardRoot, isStandalone: true, selector: "[rdxPreviewCardRoot]", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, triggerId: { classPropertyName: "triggerId", publicName: "triggerId", isSignal: true, isRequired: false, transformFunction: null }, defaultTriggerId: { classPropertyName: "defaultTriggerId", publicName: "defaultTriggerId", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", triggerId: "triggerIdChange", onOpenChange: "onOpenChange", onOpenChangeComplete: "onOpenChangeComplete" }, providers: [provideRdxPreviewCardRootContext(context)], exportAs: ["rdxPreviewCardRoot"], hostDirectives: [{ directive: i1.RdxPopper }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardRoot]',
+                    exportAs: 'rdxPreviewCardRoot',
+                    providers: [provideRdxPreviewCardRootContext(context)],
+                    hostDirectives: [RdxPopper]
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], triggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerId", required: false }] }, { type: i0.Output, args: ["triggerIdChange"] }], defaultTriggerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultTriggerId", required: false }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], onOpenChange: [{ type: i0.Output, args: ["onOpenChange"] }], onOpenChangeComplete: [{ type: i0.Output, args: ["onOpenChangeComplete"] }] } });
+function contextFor(root) {
+    return {
+        contentId: root.contentId,
+        isOpen: root.open.asReadonly(),
+        trigger: root.trigger.asReadonly(),
+        triggers: root.triggers.asReadonly(),
+        payload: root.payload.asReadonly(),
+        isHoverActive: root.isHoverActive.asReadonly(),
+        instant: root.instant.asReadonly(),
+        openChangeReason: root.openChangeReason.asReadonly(),
+        isPointerDownOnTrigger: root.isPointerDownOnTrigger.asReadonly(),
+        close: (reason, event) => root.close(reason, event),
+        cancelHoverClose: () => root.cancelHoverClose(),
+        cancelHoverOpen: () => root.cancelHoverOpen(),
+        closeOnHover: () => root.closeOnHover(),
+        open: (trigger, payload, triggerId, reason, event) => root.show(trigger, payload, triggerId, reason, event),
+        openWithDelay: (trigger, payload, triggerId, reason, event) => root.openWithDelay(trigger, payload, triggerId, reason, event),
+        registerTrigger: (id, trigger, payload) => root.registerTrigger(id, trigger, payload),
+        setPointerDownOnTrigger: (pointerDown) => root.isPointerDownOnTrigger.set(pointerDown),
+        setHoverDelays: (delay, closeDelay) => root.setHoverDelays(delay, closeDelay),
+        registerTransitionElement: (element) => root.registerTransitionElement(element),
+        transitionStatus: root.transitionStatus,
+        registerViewport: (onTriggerChange) => root.registerViewport(onTriggerChange),
+        toggle: (triggerId, trigger, payload, event) => root.toggle(triggerId, trigger, payload, event)
+    };
+}
+
+/**
+ * An optional arrow element rendered alongside the preview-card.
+ */
+class RdxPreviewCardArrow {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.uncentered = computed(() => this.wrapper?.arrowUncentered() ?? false, ...(ngDevMode ? [{ debugName: "uncentered" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardArrow, isStandalone: true, selector: "[rdxPreviewCardArrow]", host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-side": "side()", "attr.data-align": "align()", "attr.data-uncentered": "uncentered() ? \"\" : undefined" } }, hostDirectives: [{ directive: i1.RdxPopperArrow }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardArrow]',
+                    hostDirectives: [RdxPopperArrow],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-side]': 'side()',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-uncentered]': 'uncentered() ? "" : undefined'
+                    }
+                }]
+        }] });
+
+/**
+ * An optional backdrop rendered behind the popup.
+ */
+class RdxPreviewCardBackdrop {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardBackdrop, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardBackdrop, isStandalone: true, selector: "[rdxPreviewCardBackdrop]", host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardBackdrop, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardBackdrop]',
+                    host: {
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
+                    }
+                }]
+        }] });
+
+/**
+ * A container for the preview-card contents.
+ */
+class RdxPreviewCardPopup {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+        this.dismissableLayer = inject(RdxDismissableLayer);
+        this.wrapper = inject(RdxPopperContentWrapper, { optional: true });
+        this.align = computed(() => this.wrapper?.placedAlign(), ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        this.side = computed(() => this.wrapper?.placedSide(), ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        this.dismissDetails = {
+            reason: 'none',
+            event: new Event('preview-card.dismiss')
+        };
+        /**
+         * 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 popup. Can be prevented.
+         */
+        this.pointerDownOutside = outputFromObservable(outputToObservable(this.dismissableLayer.pointerDownOutside));
+        /**
+         * Event handler called when focus moves outside of the popup. Can be prevented.
+         */
+        this.focusOutside = outputFromObservable(outputToObservable(this.dismissableLayer.focusOutside));
+        /**
+         * Event handler called when an interaction happens outside of the popup. Can be prevented.
+         */
+        this.interactOutside = outputFromObservable(outputToObservable(this.dismissableLayer.interactOutside));
+        const unregisterTransitionElement = this.rootContext.registerTransitionElement(inject(ElementRef).nativeElement);
+        inject(DestroyRef).onDestroy(() => {
+            unregisterTransitionElement();
+        });
+        this.dismissableLayer.pointerDownOutside.subscribe((event) => {
+            this.dismissDetails = { reason: 'outside-press', event };
+            if (this.rootContext.triggers().some((trigger) => trigger.contains(event.target))) {
+                event.preventDefault();
+            }
+        });
+        this.dismissableLayer.focusOutside.subscribe((event) => {
+            this.dismissDetails = { reason: 'none', event };
+            if (this.rootContext.isPointerDownOnTrigger()) {
+                event.preventDefault();
+            }
+        });
+        this.dismissableLayer.escapeKeyDown.subscribe((event) => {
+            this.dismissDetails = { reason: 'escape-key', event };
+        });
+        this.dismissableLayer.dismiss.subscribe(() => {
+            this.rootContext.close(this.dismissDetails.reason, this.dismissDetails.event);
+            this.dismissDetails = { reason: 'none', event: new Event('preview-card.dismiss') };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPopup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPopup, isStandalone: true, selector: "[rdxPreviewCardPopup]", outputs: { escapeKeyDown: "escapeKeyDown", pointerDownOutside: "pointerDownOutside", focusOutside: "focusOutside", interactOutside: "interactOutside" }, host: { listeners: { "pointerenter": "rootContext.cancelHoverClose()" }, properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-ending-style": "rootContext.transitionStatus() === \"ending\" ? \"\" : undefined", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-starting-style": "rootContext.transitionStatus() === \"starting\" ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"", "attr.data-align": "align()", "attr.data-side": "side()", "id": "rootContext.contentId" } }, providers: [
+            provideRdxDismissableLayerConfig(() => {
+                return {
+                    disableOutsidePointerEvents: signal(false)
+                };
+            })
+        ], hostDirectives: [{ directive: i1.RdxPopperContent }, { directive: i2.RdxDismissableLayer }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPopup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardPopup]',
+                    hostDirectives: [RdxPopperContent, RdxDismissableLayer],
+                    providers: [
+                        provideRdxDismissableLayerConfig(() => {
+                            return {
+                                disableOutsidePointerEvents: signal(false)
+                            };
+                        })
+                    ],
+                    host: {
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-ending-style]': 'rootContext.transitionStatus() === "ending" ? "" : undefined',
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-starting-style]': 'rootContext.transitionStatus() === "starting" ? "" : undefined',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"',
+                        '[attr.data-align]': 'align()',
+                        '[attr.data-side]': 'side()',
+                        '[id]': 'rootContext.contentId',
+                        '(pointerenter)': 'rootContext.cancelHoverClose()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { escapeKeyDown: [{ type: i0.Output, args: ["escapeKeyDown"] }], pointerDownOutside: [{ type: i0.Output, args: ["pointerDownOutside"] }], focusOutside: [{ type: i0.Output, args: ["focusOutside"] }], interactOutside: [{ type: i0.Output, args: ["interactOutside"] }] } });
+
+/**
+ * Moves the preview-card to a different part of the DOM.
+ */
+class RdxPreviewCardPortal {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+        /**
+         * Optional container to portal the content into. Defaults to `document.body`.
+         */
+        this.container = input(...(ngDevMode ? [undefined, { debugName: "container" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardPortal, isStandalone: true, selector: "[rdxPreviewCardPortal]", inputs: { container: { classPropertyName: "container", publicName: "container", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-state": "rootContext.isOpen() ? \"open\" : \"closed\"" } }, hostDirectives: [{ directive: i1$1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardPortal]',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ],
+                    host: {
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-state]': 'rootContext.isOpen() ? "open" : "closed"'
+                    }
+                }]
+        }], propDecorators: { container: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }] } });
+
+/**
+ * Mounts the portal while the preview-card is open and waits for CSS exit keyframes before unmounting.
+ */
+class RdxPreviewCardPortalPresence {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortalPresence, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardPortalPresence, isStandalone: true, selector: "ng-template[rdxPreviewCardPortalPresence]", providers: [
+            provideRdxPresenceContext(() => {
+                const context = injectRdxPreviewCardRootContext();
+                return { present: context.isOpen };
+            })
+        ], hostDirectives: [{ directive: i1$2.RdxPresenceDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPortalPresence, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[rdxPreviewCardPortalPresence]',
+                    hostDirectives: [RdxPresenceDirective],
+                    providers: [
+                        provideRdxPresenceContext(() => {
+                            const context = injectRdxPreviewCardRootContext();
+                            return { present: context.isOpen };
+                        })
+                    ]
+                }]
+        }] });
+
+/**
+ * Positions the preview-card against its trigger.
+ */
+class RdxPreviewCardPositioner {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+        this.wrapper = inject(RdxPopperContentWrapper);
+        this.elementRef = inject(ElementRef);
+        this.triggerEl = signal(null, ...(ngDevMode ? [{ debugName: "triggerEl" }] : /* istanbul ignore next */ []));
+        this.containerEl = signal(this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "containerEl" }] : /* istanbul ignore next */ []));
+        this.graceArea = useGraceArea(this.triggerEl, this.containerEl);
+        /**
+         * An element to position the popup against. Defaults to the trigger.
+         */
+        this.anchor = input(...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
+        /**
+         * The preferred side of the trigger to render against when open.
+         */
+        this.side = input('bottom', ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+        /**
+         * Distance between the trigger and the popup in pixels.
+         */
+        this.sideOffset = input(0, { ...(ngDevMode ? { debugName: "sideOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * How to align the popup relative to the specified side.
+         */
+        this.align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+        /**
+         * An offset in pixels from the `start` or `end` alignment options.
+         */
+        this.alignOffset = input(0, { ...(ngDevMode ? { debugName: "alignOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Minimum distance to maintain between the arrow and the edges of the popup.
+         */
+        this.arrowPadding = input(5, { ...(ngDevMode ? { debugName: "arrowPadding" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * Whether to override side and alignment preferences to prevent collisions.
+         */
+        this.avoidCollisions = input(true, { ...(ngDevMode ? { debugName: "avoidCollisions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The element used as the collision boundary.
+         */
+        this.collisionBoundary = input(...(ngDevMode ? [undefined, { debugName: "collisionBoundary" }] : /* istanbul ignore next */ []));
+        /**
+         * Distance in pixels from the boundary edges where collision detection should occur.
+         */
+        this.collisionPadding = input(5, ...(ngDevMode ? [{ debugName: "collisionPadding" }] : /* istanbul ignore next */ []));
+        /**
+         * The sticky behavior on the alignment axis.
+         */
+        this.sticky = input('partial', ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to hide the popup when the trigger becomes fully occluded.
+         */
+        this.hideWhenDetached = input(false, { ...(ngDevMode ? { debugName: "hideWhenDetached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * The CSS position strategy used by Floating UI.
+         */
+        this.positionStrategy = input('fixed', ...(ngDevMode ? [{ debugName: "positionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether to update position on every animation frame.
+         */
+        this.updatePositionStrategy = input('always', ...(ngDevMode ? [{ debugName: "updatePositionStrategy" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the popup has been placed.
+         */
+        this.placed = outputFromObservable(outputToObservable(inject(RdxPopperContentWrapper).placed));
+        effect(() => this.triggerEl.set(this.rootContext.trigger() ?? null));
+        this.graceArea.onPointerExit(() => {
+            this.rootContext.closeOnHover();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardPositioner, isStandalone: true, selector: "[rdxPreviewCardPositioner]", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, sideOffset: { classPropertyName: "sideOffset", publicName: "sideOffset", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, alignOffset: { classPropertyName: "alignOffset", publicName: "alignOffset", isSignal: true, isRequired: false, transformFunction: null }, arrowPadding: { classPropertyName: "arrowPadding", publicName: "arrowPadding", isSignal: true, isRequired: false, transformFunction: null }, avoidCollisions: { classPropertyName: "avoidCollisions", publicName: "avoidCollisions", isSignal: true, isRequired: false, transformFunction: null }, collisionBoundary: { classPropertyName: "collisionBoundary", publicName: "collisionBoundary", isSignal: true, isRequired: false, transformFunction: null }, collisionPadding: { classPropertyName: "collisionPadding", publicName: "collisionPadding", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, hideWhenDetached: { classPropertyName: "hideWhenDetached", publicName: "hideWhenDetached", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, updatePositionStrategy: { classPropertyName: "updatePositionStrategy", publicName: "updatePositionStrategy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placed: "placed" }, host: { properties: { "attr.data-open": "rootContext.isOpen() ? \"\" : undefined", "attr.data-closed": "rootContext.isOpen() ? undefined : \"\"", "attr.data-anchor-hidden": "wrapper.anchorHidden() ? \"\" : undefined", "attr.data-align": "wrapper.placedAlign()", "attr.data-side": "wrapper.placedSide()", "attr.data-instant": "rootContext.instant() ? \"\" : undefined", "style": "{\n            '--anchor-width': 'var(--radix-popper-anchor-width)',\n            '--anchor-height': 'var(--radix-popper-anchor-height)',\n            '--available-width': 'var(--radix-popper-available-width)',\n            '--available-height': 'var(--radix-popper-available-height)',\n            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',\n            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',\n            '--transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-preview-card-content-transform-origin': 'var(--radix-popper-transform-origin)',\n            '--radix-preview-card-content-available-width': 'var(--radix-popper-available-width)',\n            '--radix-preview-card-content-available-height': 'var(--radix-popper-available-height)',\n            '--radix-preview-card-trigger-width': 'var(--radix-popper-anchor-width)',\n            '--radix-preview-card-trigger-height': 'var(--radix-popper-anchor-height)'\n        }" } }, providers: [
+            provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+        ], hostDirectives: [{ directive: i1.RdxPopperContentWrapper, inputs: ["anchor", "anchor", "side", "side", "sideOffset", "sideOffset", "align", "align", "alignOffset", "alignOffset", "arrowPadding", "arrowPadding", "avoidCollisions", "avoidCollisions", "collisionBoundary", "collisionBoundary", "collisionPadding", "collisionPadding", "sticky", "sticky", "hideWhenDetached", "hideWhenDetached", "positionStrategy", "positionStrategy", "updatePositionStrategy", "updatePositionStrategy"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardPositioner]',
+                    providers: [
+                        provideRdxPopperContentConfig({ arrowPadding: 5, collisionPadding: 5, updatePositionStrategy: 'always' })
+                    ],
+                    hostDirectives: [
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'anchor',
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'positionStrategy',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[attr.data-open]': 'rootContext.isOpen() ? "" : undefined',
+                        '[attr.data-closed]': 'rootContext.isOpen() ? undefined : ""',
+                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
+                        '[attr.data-align]': 'wrapper.placedAlign()',
+                        '[attr.data-side]': 'wrapper.placedSide()',
+                        '[attr.data-instant]': 'rootContext.instant() ? "" : undefined',
+                        '[style]': `{
+            '--anchor-width': 'var(--radix-popper-anchor-width)',
+            '--anchor-height': 'var(--radix-popper-anchor-height)',
+            '--available-width': 'var(--radix-popper-available-width)',
+            '--available-height': 'var(--radix-popper-available-height)',
+            '--positioner-width': 'var(--radix-popper-content-wrapper-width)',
+            '--positioner-height': 'var(--radix-popper-content-wrapper-height)',
+            '--transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-preview-card-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-preview-card-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-preview-card-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-preview-card-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-preview-card-trigger-height': 'var(--radix-popper-anchor-height)'
+        }`
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], sideOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideOffset", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], alignOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignOffset", required: false }] }], arrowPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPadding", required: false }] }], avoidCollisions: [{ type: i0.Input, args: [{ isSignal: true, alias: "avoidCollisions", required: false }] }], collisionBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionBoundary", required: false }] }], collisionPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "collisionPadding", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], hideWhenDetached: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideWhenDetached", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], updatePositionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "updatePositionStrategy", required: false }] }], placed: [{ type: i0.Output, args: ["placed"] }] } });
+
+/**
+ * A link or element that opens the preview card.
+ */
+class RdxPreviewCardTrigger {
+    constructor() {
+        this.parentRootContext = injectRdxPreviewCardRootContext(true);
+        this.elementRef = inject(ElementRef);
+        /**
+         * Associates this trigger with a detached preview-card root.
+         */
+        this.handle = input(...(ngDevMode ? [undefined, { debugName: "handle" }] : /* istanbul ignore next */ []));
+        /**
+         * Data associated with this trigger while it is active.
+         */
+        this.payload = input(...(ngDevMode ? [undefined, { debugName: "payload" }] : /* istanbul ignore next */ []));
+        /**
+         * ID used to identify this trigger when opening a detached preview-card imperatively.
+         */
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the trigger should ignore user interaction.
+         */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * How long to wait before opening the preview-card on hover, in milliseconds.
+         */
+        this.delay = input(600, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /**
+         * How long to wait before closing a hover-opened preview-card, in milliseconds.
+         */
+        this.closeDelay = input(300, { ...(ngDevMode ? { debugName: "closeDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.triggerId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []));
+        this.rootContext = computed(() => this.handle()?.context() ?? this.parentRootContext, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.isOpen = computed(() => this.rootContext()?.isOpen() === true && this.rootContext()?.trigger() === this.elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+        this.isPressed = computed(() => this.isOpen() && this.rootContext()?.openChangeReason() === 'trigger-press', ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+        this.generatedId = injectId('rdx-preview-card-trigger-');
+        effect((onCleanup) => {
+            const handle = this.handle();
+            if (handle) {
+                onCleanup(untracked(() => handle.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
+            else if (this.parentRootContext) {
+                onCleanup(untracked(() => this.parentRootContext.registerTrigger(this.triggerId(), this.elementRef.nativeElement, () => this.payload())));
+            }
+        });
+    }
+    handleClick(event) {
+        if (this.disabled()) {
+            return;
+        }
+        this.rootContext()?.setPointerDownOnTrigger(false);
+        this.rootContext()?.close('trigger-press', event);
+    }
+    handlePointerEnter(event) {
+        const rootContext = this.rootContext();
+        if (event.pointerType === 'touch' || !rootContext || this.disabled()) {
+            return;
+        }
+        rootContext.setHoverDelays(this.delay(), this.closeDelay());
+        rootContext.openWithDelay(this.elementRef.nativeElement, this.payload(), this.triggerId(), 'trigger-hover', event);
+    }
+    handlePointerLeave(event) {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        this.rootContext()?.cancelHoverOpen();
+    }
+    handleFocus(event) {
+        const rootContext = this.rootContext();
+        if (!rootContext || this.disabled()) {
+            return;
+        }
+        rootContext.setHoverDelays(this.delay(), this.closeDelay());
+        rootContext.openWithDelay(this.elementRef.nativeElement, this.payload(), this.triggerId(), 'trigger-focus', event);
+    }
+    handleBlur(event) {
+        this.rootContext()?.close('trigger-focus', event);
+    }
+    handlePointerDown() {
+        this.rootContext()?.setPointerDownOnTrigger(true);
+    }
+    handlePointerUp() {
+        this.rootContext()?.setPointerDownOnTrigger(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxPreviewCardTrigger, isStandalone: true, selector: "[rdxPreviewCardTrigger]", inputs: { handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, closeDelay: { classPropertyName: "closeDelay", publicName: "closeDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "handleClick($event)", "pointerenter": "handlePointerEnter($event)", "pointerleave": "handlePointerLeave($event)", "focus": "handleFocus($event)", "blur": "handleBlur($event)", "pointerdown": "handlePointerDown()", "pointerup": "handlePointerUp()", "pointercancel": "handlePointerUp()" }, properties: { "attr.aria-controls": "rootContext()?.contentId", "attr.aria-disabled": "disabled() ? \"true\" : undefined", "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"dialog\"", "attr.data-disabled": "disabled() ? \"\" : undefined", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.data-popup-open": "isOpen() ? \"\" : undefined", "attr.data-pressed": "isPressed() ? \"\" : undefined", "id": "triggerId()" } }, hostDirectives: [{ directive: i1.RdxPopperAnchor }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardTrigger]',
+                    hostDirectives: [RdxPopperAnchor],
+                    host: {
+                        '[attr.aria-controls]': 'rootContext()?.contentId',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : undefined',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.data-disabled]': 'disabled() ? "" : undefined',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.data-popup-open]': 'isOpen() ? "" : undefined',
+                        '[attr.data-pressed]': 'isPressed() ? "" : undefined',
+                        '[id]': 'triggerId()',
+                        '(click)': 'handleClick($event)',
+                        '(pointerenter)': 'handlePointerEnter($event)',
+                        '(pointerleave)': 'handlePointerLeave($event)',
+                        '(focus)': 'handleFocus($event)',
+                        '(blur)': 'handleBlur($event)',
+                        '(pointerdown)': 'handlePointerDown()',
+                        '(pointerup)': 'handlePointerUp()',
+                        '(pointercancel)': 'handlePointerUp()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], payload: [{ type: i0.Input, args: [{ isSignal: true, alias: "payload", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], closeDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDelay", required: false }] }] } });
+
+/**
+ * A viewport for animating content changes when a preview-card moves between triggers.
+ *
+ * Render one direct child inside the viewport. It is marked with `data-current`;
+ * when the active trigger changes, a DOM snapshot is retained as `data-previous`
+ * until its CSS animation or transition completes.
+ */
+class RdxPreviewCardViewport {
+    constructor() {
+        this.rootContext = injectRdxPreviewCardRootContext();
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.activationDirection = signal(undefined, ...(ngDevMode ? [{ debugName: "activationDirection" }] : /* istanbul ignore next */ []));
+        this.transitioning = signal(false, ...(ngDevMode ? [{ debugName: "transitioning" }] : /* istanbul ignore next */ []));
+        const unregister = this.rootContext.registerViewport((previousTrigger, nextTrigger) => {
+            this.startTransition(previousTrigger, nextTrigger);
+        });
+        afterNextRender(() => {
+            this.markCurrent();
+            this.observer = new MutationObserver(() => this.markCurrent());
+            this.observer.observe(this.elementRef.nativeElement, { childList: true });
+        });
+        this.destroyRef.onDestroy(() => {
+            unregister();
+            this.observer?.disconnect();
+            this.cleanupPrevious();
+        });
+    }
+    startTransition(previousTrigger, nextTrigger) {
+        const current = this.current();
+        if (!current) {
+            return;
+        }
+        this.cleanupPrevious();
+        this.activationDirection.set(getActivationDirection(previousTrigger, nextTrigger));
+        const previous = current.cloneNode(true);
+        const popup = this.elementRef.nativeElement.closest('[rdxPreviewCardPopup]');
+        const popupRect = popup?.getBoundingClientRect();
+        previous.removeAttribute('data-current');
+        previous.setAttribute('data-previous', '');
+        previous.setAttribute('aria-hidden', 'true');
+        previous.setAttribute('inert', '');
+        removeIds(previous);
+        if (popupRect) {
+            previous.style.setProperty('--popup-width', `${popupRect.width}px`);
+            previous.style.setProperty('--popup-height', `${popupRect.height}px`);
+        }
+        previous.addEventListener('animationend', () => this.cleanupPrevious(), { once: true });
+        previous.addEventListener('transitionend', () => this.cleanupPrevious(), { once: true });
+        this.previous = previous;
+        this.elementRef.nativeElement.insertBefore(previous, current);
+        this.transitioning.set(true);
+        queueMicrotask(() => this.scheduleCleanup(previous));
+    }
+    markCurrent() {
+        this.current()?.setAttribute('data-current', '');
+    }
+    current() {
+        return Array.from(this.elementRef.nativeElement.children).find((child) => child instanceof HTMLElement && !child.hasAttribute('data-previous'));
+    }
+    scheduleCleanup(previous) {
+        if (this.previous !== previous) {
+            return;
+        }
+        const style = getComputedStyle(previous);
+        const duration = Math.max(getMaxDuration(style.animationDuration, style.animationDelay), getMaxDuration(style.transitionDuration, style.transitionDelay));
+        this.cleanupTimer = setTimeout(() => this.cleanupPrevious(), duration > 0 ? duration + 50 : 0);
+    }
+    cleanupPrevious() {
+        if (this.cleanupTimer !== undefined) {
+            clearTimeout(this.cleanupTimer);
+            this.cleanupTimer = undefined;
+        }
+        this.previous?.remove();
+        this.previous = undefined;
+        this.transitioning.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPreviewCardViewport, isStandalone: true, selector: "[rdxPreviewCardViewport]", host: { properties: { "attr.data-activation-direction": "activationDirection()", "attr.data-transitioning": "transitioning() ? \"\" : undefined" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxPreviewCardViewport]',
+                    host: {
+                        '[attr.data-activation-direction]': 'activationDirection()',
+                        '[attr.data-transitioning]': 'transitioning() ? "" : undefined'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+function getActivationDirection(previous, next) {
+    const previousRect = previous.getBoundingClientRect();
+    const nextRect = next.getBoundingClientRect();
+    const previousCenter = getCenter(previousRect);
+    const nextCenter = getCenter(nextRect);
+    const directions = [];
+    if (nextCenter.x < previousCenter.x) {
+        directions.push('left');
+    }
+    else if (nextCenter.x > previousCenter.x) {
+        directions.push('right');
+    }
+    if (nextCenter.y < previousCenter.y) {
+        directions.push('up');
+    }
+    else if (nextCenter.y > previousCenter.y) {
+        directions.push('down');
+    }
+    return directions.join(' ') || undefined;
+}
+function removeIds(element) {
+    element.removeAttribute('id');
+    element.querySelectorAll('[id]').forEach((child) => child.removeAttribute('id'));
+}
+function getCenter(rect) {
+    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+}
+function getMaxDuration(durations, delays) {
+    const durationValues = durations.split(',').map(parseDuration);
+    const delayValues = delays.split(',').map(parseDuration);
+    return durationValues.reduce((max, duration, index) => {
+        const delay = delayValues[index % delayValues.length] ?? 0;
+        return Math.max(max, duration + delay);
+    }, 0);
+}
+function parseDuration(value) {
+    const duration = Number.parseFloat(value);
+    if (Number.isNaN(duration)) {
+        return 0;
+    }
+    return value.trim().endsWith('ms') ? duration : duration * 1000;
+}
+
+class RdxPreviewCardHandle {
+    constructor() {
+        this.rootContext = signal(undefined, ...(ngDevMode ? [{ debugName: "rootContext" }] : /* istanbul ignore next */ []));
+        this.triggers = new Map();
+        this.rootTriggerCleanups = new Map();
+        this.isOpen = computed(() => this.rootContext()?.isOpen() ?? false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    }
+    open(triggerId) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No preview-card trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.open(trigger.element, trigger.payload(), triggerId, 'imperative-action', new Event('preview-card.open'));
+    }
+    close() {
+        this.rootContext()?.close('imperative-action', new Event('preview-card.close'));
+    }
+    toggle(triggerId, event = new Event('preview-card.toggle')) {
+        const trigger = this.triggers.get(triggerId);
+        if (!trigger) {
+            throw new Error(`No preview-card trigger registered with id "${triggerId}".`);
+        }
+        this.rootContext()?.toggle(triggerId, trigger.element, trigger.payload(), event);
+    }
+    registerRoot(rootContext) {
+        this.rootContext.set(rootContext);
+        this.triggers.forEach((trigger, id) => {
+            this.rootTriggerCleanups.set(id, rootContext.registerTrigger(id, trigger.element, trigger.payload));
+        });
+        return () => {
+            if (this.rootContext() === rootContext) {
+                this.rootTriggerCleanups.forEach((cleanup) => cleanup());
+                this.rootTriggerCleanups.clear();
+                this.rootContext.set(undefined);
+            }
+        };
+    }
+    registerTrigger(id, trigger, payload) {
+        this.rootTriggerCleanups.get(id)?.();
+        this.triggers.set(id, { element: trigger, payload });
+        const unregisterFromRoot = this.rootContext()?.registerTrigger(id, trigger, payload);
+        if (unregisterFromRoot) {
+            this.rootTriggerCleanups.set(id, unregisterFromRoot);
+        }
+        return () => {
+            this.rootTriggerCleanups.get(id)?.();
+            this.rootTriggerCleanups.delete(id);
+            if (this.triggers.get(id)?.element === trigger) {
+                this.triggers.delete(id);
+            }
+        };
+    }
+    context() {
+        return this.rootContext();
+    }
+}
+function createRdxPreviewCardHandle() {
+    return new RdxPreviewCardHandle();
+}
+
+const previewCardImports = [
+    RdxPreviewCardRoot,
+    RdxPreviewCardTrigger,
+    RdxPreviewCardPortalPresence,
+    RdxPreviewCardPortal,
+    RdxPreviewCardBackdrop,
+    RdxPreviewCardPositioner,
+    RdxPreviewCardPopup,
+    RdxPreviewCardArrow,
+    RdxPreviewCardViewport
+];
+class RdxPreviewCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardModule, imports: [RdxPreviewCardRoot,
+            RdxPreviewCardTrigger,
+            RdxPreviewCardPortalPresence,
+            RdxPreviewCardPortal,
+            RdxPreviewCardBackdrop,
+            RdxPreviewCardPositioner,
+            RdxPreviewCardPopup,
+            RdxPreviewCardArrow,
+            RdxPreviewCardViewport], exports: [RdxPreviewCardRoot,
+            RdxPreviewCardTrigger,
+            RdxPreviewCardPortalPresence,
+            RdxPreviewCardPortal,
+            RdxPreviewCardBackdrop,
+            RdxPreviewCardPositioner,
+            RdxPreviewCardPopup,
+            RdxPreviewCardArrow,
+            RdxPreviewCardViewport] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPreviewCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...previewCardImports],
+                    exports: [...previewCardImports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxPreviewCardArrow, RdxPreviewCardBackdrop, RdxPreviewCardHandle, RdxPreviewCardModule, RdxPreviewCardPopup, RdxPreviewCardPortal, RdxPreviewCardPortalPresence, RdxPreviewCardPositioner, RdxPreviewCardRoot, RdxPreviewCardTrigger, RdxPreviewCardViewport, createRdxPreviewCardHandle, injectRdxPreviewCardRootContext, previewCardImports, provideRdxPreviewCardRootContext };
+//# sourceMappingURL=radix-ng-primitives-preview-card.mjs.map