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

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

@@ -1,152 +1,6 @@
-import { Observable, EMPTY, of, Subject, endWith, fromEvent, filter, takeUntil, timer, race } from 'rxjs';
+import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ViewContainerRef, TemplateRef, effect, Directive } from '@angular/core';
-
-/**
- * Ensures that the observable stream runs inside Angular's NgZone.
- *
- * This function is a higher-order function that takes an observable stream as input and ensures
- * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This
- * is particularly useful for ensuring that change detection is triggered properly in Angular
- * applications.
- *
- * @template T - The type of the items emitted by the observable.
- * @param {NgZone} zone - The Angular zone to control the change detection context.
- * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input
- * and returns an observable that runs inside Angular's NgZone.
- *
- * Example usage:
- *
- * const source$ = of('some value');
- * const zoned$ = source$.pipe(runInZone(zone));
- * zoned$.subscribe(value => {
- *   console.log('Value:', value);
- * });
- */
-function runInZone(zone) {
-    return (source) => new Observable((observer) => source.subscribe({
-        next: (value) => zone.run(() => observer.next(value)),
-        error: (err) => zone.run(() => observer.error(err)),
-        complete: () => zone.run(() => observer.complete())
-    }));
-}
-/**
- * Calculates the total transition duration in milliseconds for a given HTML element.
- *
- * This function retrieves the computed style of the specified element and extracts the
- * transition duration and delay properties. It then converts these values from seconds
- * to milliseconds and returns their sum, representing the total transition duration.
- *
- * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.
- * @returns {number} - The total transition duration in milliseconds.
- *
- * Example usage:
- *
- * const durationMs = getTransitionDurationMs(element);
- * console.log(`Transition duration: ${durationMs} ms`);
- */
-function getTransitionDurationMs(element) {
-    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);
-    const transitionDelaySec = parseFloat(transitionDelay);
-    const transitionDurationSec = parseFloat(transitionDuration);
-    return (transitionDelaySec + transitionDurationSec) * 1000;
-}
-function triggerReflow(element) {
-    return (element || document.body).getBoundingClientRect();
-}
-
-const noopFn = () => {
-    /* Noop */
-};
-const TransitionsMap = new Map();
-/**
- * Manages the presence of an element with optional transition animation.
- *
- * @template T - The type of the context object used in the transition.
- * @param {NgZone} zone - The Angular zone to control the change detection context.
- * @param {HTMLElement} element - The target HTML element to apply the transition.
- * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.
- *   @param {T} [options.context] - An optional context object to pass through the transition.
- *   @param {boolean} options.animation - A flag indicating if the transition should be animated.
- *   @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.
- * @param {TransitionStartFn<T>} startFn - A function to start the transition.
- * @returns {Observable<void>} - An observable that emits when the transition completes.
- *
- * The `usePresence` function is designed to manage the presence and visibility of an HTML element,
- * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change
- * detection management and allows for different states of transitions ('start', 'continue', 'stop').
- * The function takes a start function to handle the beginning of the transition and returns an
- * observable that completes when the transition ends.
- *
- * Example usage:
- *
- * const options: TransitionOptions<MyContext> = {
- *   context: {}, // your context object
- *   animation: true,
- *   state: 'start'
- * };
- *
- * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {
- *   el.classList.add('active');
- *   return () => el.classList.remove('active');
- * };
- *
- * usePresence(zone, element, startFn, options).subscribe(() => {
- *   console.log('Transition completed');
- * });
- */
-const usePresence = (zone, element, startFn, options) => {
-    let context = options.context || {};
-    const transitionTimerDelayMs = options.transitionTimerDelayMs ?? 5;
-    const state = options.state ?? 'stop';
-    const running = TransitionsMap.get(element);
-    if (running) {
-        switch (state) {
-            case 'continue':
-                return EMPTY;
-            case 'stop':
-                zone.run(() => running.transition$.complete());
-                context = { ...running.context, ...context };
-                TransitionsMap.delete(element);
-                break;
-        }
-    }
-    const endFn = startFn(element, options.animation, context) || noopFn;
-    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {
-        zone.run(() => endFn());
-        return of(undefined).pipe(runInZone(zone));
-    }
-    const transition$ = new Subject();
-    const finishTransition$ = new Subject();
-    const stop$ = transition$.pipe(endWith(true));
-    TransitionsMap.set(element, {
-        transition$,
-        complete: () => {
-            finishTransition$.next();
-            finishTransition$.complete();
-        },
-        context
-    });
-    const transitionDurationMs = getTransitionDurationMs(element);
-    zone.runOutsideAngular(() => {
-        const transitionEnd$ = fromEvent(element, 'transitionend').pipe(filter(({ target }) => target === element), takeUntil(stop$));
-        const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));
-        race(timer$, transitionEnd$, finishTransition$)
-            .pipe(takeUntil(stop$))
-            .subscribe(() => {
-            TransitionsMap.delete(element);
-            zone.run(() => {
-                endFn();
-                transition$.next();
-                transition$.complete();
-            });
-        });
-    });
-    return transition$.asObservable();
-};
-const completeTransition = (element) => {
-    TransitionsMap.get(element)?.complete();
-};
+import { InjectionToken, inject, ViewContainerRef, TemplateRef, Injector, PLATFORM_ID, effect, afterNextRender, DestroyRef, Directive } from '@angular/core';
 
 const RDX_PRESENCE_CONTEXT = new InjectionToken('RdxPresenceContext');
 /**
@@ -160,124 +14,158 @@ const RDX_PRESENCE_CONTEXT = new InjectionToken('RdxPresenceContext');
 function provideRdxPresenceContext(contextFactory) {
     return { provide: RDX_PRESENCE_CONTEXT, useFactory: contextFactory };
 }
+/**
+ * State machine mirroring `@radix-ui/react-presence`.
+ *
+ * - `mounted`           — content rendered, `present` is `true`.
+ * - `unmountSuspended`  — `present` flipped to `false` but an exit animation is running;
+ *                         the content stays in the DOM until the animation ends.
+ * - `unmounted`         — content removed.
+ */
+const MACHINE = {
+    mounted: { UNMOUNT: 'unmounted', ANIMATION_OUT: 'unmountSuspended' },
+    unmountSuspended: { MOUNT: 'mounted', ANIMATION_END: 'unmounted' },
+    unmounted: { MOUNT: 'mounted' }
+};
+/**
+ * Headless structural directive that conditionally renders its template based on a reactive
+ * `present` signal supplied through {@link RDX_PRESENCE_CONTEXT}.
+ *
+ * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation
+ * (`@keyframes` applied for the closed state) is running, and unmounts it only once that
+ * animation finishes. If the content has no exit animation, it unmounts immediately.
+ */
 class RdxPresenceDirective {
     constructor() {
         this.context = inject(RDX_PRESENCE_CONTEXT);
         this.viewContainerRef = inject(ViewContainerRef);
         this.templateRef = inject((TemplateRef));
-        this.effectRef = effect((onCleanup) => {
-            if (this.context.present()) {
-                const view = this.viewContainerRef.createEmbeddedView(this.templateRef, { $implicit: this.context });
-                onCleanup(() => view.destroy());
+        this.injector = inject(Injector);
+        this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+        this.viewRef = null;
+        this.node = null;
+        this.removeListeners = null;
+        this.prevAnimationName = 'none';
+        this.prevPresent = this.context.present();
+        this.state = this.prevPresent ? 'mounted' : 'unmounted';
+        if (this.prevPresent) {
+            this.mountView();
+        }
+        effect(() => {
+            const present = this.context.present();
+            if (present === this.prevPresent) {
+                return;
+            }
+            this.prevPresent = present;
+            if (present) {
+                // Mount synchronously so the enter animation can start on this frame.
+                this.send('MOUNT');
+            }
+            else if (this.isBrowser) {
+                // Defer the unmount decision until the next render, so the consumer's
+                // `data-state` (and therefore the exit `@keyframes`) is applied to the DOM
+                // before we read the computed animation name.
+                afterNextRender(() => this.evaluateExit(), { injector: this.injector });
             }
-        }, ...(ngDevMode ? [{ debugName: "effectRef" }] : /* istanbul ignore next */ []));
+            else {
+                this.send('UNMOUNT');
+            }
+        });
+        inject(DestroyRef).onDestroy(() => this.destroyView());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPresenceDirective, isStandalone: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPresenceDirective, decorators: [{
-            type: Directive
-        }] });
-
-// Define constants for class names
-const COLLAPSE_CLASS = 'collapse';
-const COLLAPSING_CLASS = 'collapsing';
-const SHOW_CLASS = 'show';
-/**
- * Function to handle the start of a collapsing transition.
- *
- * @param element - The HTML element to animate.
- * @param animation - Whether to use animation or not.
- * @param context - The context containing direction and dimension information.
- * @returns A function to clean up the animation.
- */
-const transitionCollapsing = (element, animation, context) => {
-    const { direction, dimension } = context;
-    let { maxSize } = context;
-    const { classList } = element;
-    /**
-     * Sets initial classes based on the direction.
-     */
-    function setInitialClasses() {
-        classList.add(COLLAPSE_CLASS);
-        if (direction === 'show') {
-            classList.add(SHOW_CLASS);
+    /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */
+    evaluateExit() {
+        // Re-opened before this callback ran — keep the content mounted.
+        if (this.state !== 'mounted' || this.context.present()) {
+            return;
+        }
+        const styles = this.getComputedStyles();
+        const currentAnimationName = styles?.animationName || 'none';
+        if (currentAnimationName === 'none' || styles?.display === 'none') {
+            // No exit animation (or the element is hidden) — unmount right away.
+            this.send('UNMOUNT');
         }
         else {
-            classList.remove(SHOW_CLASS);
+            // Only suspend the unmount if the closed state actually starts a *different* animation.
+            const isAnimating = this.prevAnimationName !== currentAnimationName;
+            this.send(isAnimating ? 'ANIMATION_OUT' : 'UNMOUNT');
         }
     }
-    if (!animation) {
-        setInitialClasses();
-        return;
-    }
-    if (!maxSize) {
-        maxSize = measureCollapsingElementDimensionPx(element, dimension);
-        context.maxSize = maxSize;
-        // Fix the height before starting the animation
-        element.style[dimension] = direction !== 'show' ? maxSize : '0px';
-        classList.remove(COLLAPSE_CLASS, COLLAPSING_CLASS, 'show');
-        triggerReflow(element);
-        // Start the animation
-        classList.add(COLLAPSING_CLASS);
+    send(event) {
+        const next = MACHINE[this.state][event];
+        if (next === undefined || next === this.state) {
+            return;
+        }
+        this.state = next;
+        if (next === 'mounted') {
+            if (this.viewRef) {
+                // Re-opened while an exit animation was running — refresh the tracked animation.
+                this.prevAnimationName = this.getAnimationName();
+            }
+            else {
+                this.mountView();
+            }
+        }
+        else if (next === 'unmounted') {
+            this.destroyView();
+        }
+        // `unmountSuspended` keeps the existing view mounted until ANIMATION_END.
     }
-    element.style[dimension] = direction === 'show' ? maxSize : '0px';
-    return () => {
-        setInitialClasses();
-        classList.remove(COLLAPSING_CLASS);
-        element.style[dimension] = '';
-    };
-};
-/**
- * Measures the dimension of the collapsing element in pixels.
- *
- * @param element - The HTML element to measure.
- * @param dimension - The dimension ('width' or 'height') to measure.
- * @returns The size of the dimension in pixels.
- */
-function measureCollapsingElementDimensionPx(element, dimension) {
-    // SSR fix
-    if (typeof navigator === 'undefined') {
-        return '0px';
+    mountView() {
+        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);
+        this.node = this.viewRef.rootNodes.find((n) => n instanceof HTMLElement) ?? null;
+        if (this.node && this.isBrowser) {
+            this.prevAnimationName = this.getAnimationName();
+            this.addAnimationListeners(this.node);
+        }
     }
-    const { classList } = element;
-    const hasShownClass = classList.contains(SHOW_CLASS);
-    if (!hasShownClass) {
-        classList.add(SHOW_CLASS);
+    destroyView() {
+        this.removeListeners?.();
+        this.removeListeners = null;
+        this.viewRef?.destroy();
+        this.viewRef = null;
+        this.node = null;
     }
-    element.style[dimension] = '';
-    const dimensionSize = element.getBoundingClientRect()[dimension] + 'px';
-    if (!hasShownClass) {
-        classList.remove(SHOW_CLASS);
+    addAnimationListeners(node) {
+        const onStart = (event) => {
+            if (event.target === node) {
+                this.prevAnimationName = this.getAnimationName();
+            }
+        };
+        const onEnd = (event) => {
+            const isCurrentAnimation = this.getAnimationName().includes(event.animationName);
+            if (event.target === node && isCurrentAnimation) {
+                this.send('ANIMATION_END');
+            }
+        };
+        node.addEventListener('animationstart', onStart);
+        node.addEventListener('animationcancel', onEnd);
+        node.addEventListener('animationend', onEnd);
+        this.removeListeners = () => {
+            node.removeEventListener('animationstart', onStart);
+            node.removeEventListener('animationcancel', onEnd);
+            node.removeEventListener('animationend', onEnd);
+        };
     }
-    return dimensionSize;
-}
-
-const toastFadeInTransition = (element, animation) => {
-    const { classList } = element;
-    if (animation) {
-        classList.add('fade');
+    getComputedStyles() {
+        return this.node && this.isBrowser ? getComputedStyle(this.node) : null;
     }
-    else {
-        classList.add('show');
-        return;
+    getAnimationName() {
+        return this.getComputedStyles()?.animationName || 'none';
     }
-    triggerReflow(element);
-    classList.add('show', 'showing');
-    return () => {
-        classList.remove('showing');
-    };
-};
-const toastFadeOutTransition = ({ classList }) => {
-    classList.add('showing');
-    return () => {
-        classList.remove('show', 'showing');
-    };
-};
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPresenceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxPresenceDirective, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxPresenceDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, completeTransition, provideRdxPresenceContext, toastFadeInTransition, toastFadeOutTransition, transitionCollapsing, usePresence };
+export { RDX_PRESENCE_CONTEXT, RdxPresenceDirective, provideRdxPresenceContext };
 //# sourceMappingURL=radix-ng-primitives-presence.mjs.map

package/fesm2022/radix-ng-primitives-presence.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radix-ng-primitives-presence.mjs","sources":["../../../packages/primitives/presence/src/utils.ts","../../../packages/primitives/presence/src/presence.ts","../../../packages/primitives/presence/src/presence.directive.ts","../../../packages/primitives/presence/src/transitions/transition.collapse.ts","../../../packages/primitives/presence/src/transitions/transition.toast.ts","../../../packages/primitives/presence/radix-ng-primitives-presence.ts"],"sourcesContent":["import { NgZone } from '@angular/core';\nimport { Observable } from 'rxjs';\n\n/**\n * Ensures that the observable stream runs inside Angular's NgZone.\n *\n * This function is a higher-order function that takes an observable stream as input and ensures\n * that all emissions, errors, and completion notifications are run inside Angular's NgZone. This\n * is particularly useful for ensuring that change detection is triggered properly in Angular\n * applications.\n *\n * @template T - The type of the items emitted by the observable.\n * @param {NgZone} zone - The Angular zone to control the change detection context.\n * @returns {(source: Observable<T>) => Observable<T>} - A function that takes an observable as input\n * and returns an observable that runs inside Angular's NgZone.\n *\n * Example usage:\n *\n * const source$ = of('some value');\n * const zoned$ = source$.pipe(runInZone(zone));\n * zoned$.subscribe(value => {\n *   console.log('Value:', value);\n * });\n */\nfunction runInZone<T>(zone: NgZone): (source: Observable<T>) => Observable<T> {\n    return (source: Observable<T>) =>\n        new Observable((observer) =>\n            source.subscribe({\n                next: (value) => zone.run(() => observer.next(value)),\n                error: (err) => zone.run(() => observer.error(err)),\n                complete: () => zone.run(() => observer.complete())\n            })\n        );\n}\n\n/**\n * Calculates the total transition duration in milliseconds for a given HTML element.\n *\n * This function retrieves the computed style of the specified element and extracts the\n * transition duration and delay properties. It then converts these values from seconds\n * to milliseconds and returns their sum, representing the total transition duration.\n *\n * @param {HTMLElement} element - The HTML element for which to calculate the transition duration.\n * @returns {number} - The total transition duration in milliseconds.\n *\n * Example usage:\n *\n * const durationMs = getTransitionDurationMs(element);\n * console.log(`Transition duration: ${durationMs} ms`);\n */\nfunction getTransitionDurationMs(element: HTMLElement): number {\n    const { transitionDelay, transitionDuration } = window.getComputedStyle(element);\n    const transitionDelaySec = parseFloat(transitionDelay);\n    const transitionDurationSec = parseFloat(transitionDuration);\n\n    return (transitionDelaySec + transitionDurationSec) * 1000;\n}\n\nexport { getTransitionDurationMs, runInZone };\n\nexport function triggerReflow(element: HTMLElement) {\n    return (element || document.body).getBoundingClientRect();\n}\n","import { NgZone } from '@angular/core';\nimport { EMPTY, endWith, filter, fromEvent, Observable, of, race, Subject, takeUntil, timer } from 'rxjs';\nimport { TransitionContext, TransitionEndFn, TransitionOptions, TransitionStartFn } from './types';\nimport { getTransitionDurationMs, runInZone } from './utils';\n\nconst noopFn: TransitionEndFn = () => {\n    /* Noop */\n};\nconst TransitionsMap = new Map<HTMLElement, TransitionContext<any>>();\n\n/**\n * Manages the presence of an element with optional transition animation.\n *\n * @template T - The type of the context object used in the transition.\n * @param {NgZone} zone - The Angular zone to control the change detection context.\n * @param {HTMLElement} element - The target HTML element to apply the transition.\n * @param {TransitionOptions<T>} options - Options for controlling the transition behavior.\n *   @param {T} [options.context] - An optional context object to pass through the transition.\n *   @param {boolean} options.animation - A flag indicating if the transition should be animated.\n *   @param {'start' | 'continue' | 'stop'} options.state - The desired state of the transition.\n * @param {TransitionStartFn<T>} startFn - A function to start the transition.\n * @returns {Observable<void>} - An observable that emits when the transition completes.\n *\n * The `usePresence` function is designed to manage the presence and visibility of an HTML element,\n * optionally applying a transition animation. It utilizes Angular's NgZone for efficient change\n * detection management and allows for different states of transitions ('start', 'continue', 'stop').\n * The function takes a start function to handle the beginning of the transition and returns an\n * observable that completes when the transition ends.\n *\n * Example usage:\n *\n * const options: TransitionOptions<MyContext> = {\n *   context: {}, // your context object\n *   animation: true,\n *   state: 'start'\n * };\n *\n * const startFn: TransitionStartFn<MyContext> = (el, animation, context) => {\n *   el.classList.add('active');\n *   return () => el.classList.remove('active');\n * };\n *\n * usePresence(zone, element, startFn, options).subscribe(() => {\n *   console.log('Transition completed');\n * });\n */\nconst usePresence = <T>(\n    zone: NgZone,\n    element: HTMLElement,\n    startFn: TransitionStartFn<T>,\n    options: TransitionOptions<T>\n): Observable<void> => {\n    let context = options.context || <T>{};\n\n    const transitionTimerDelayMs = options.transitionTimerDelayMs ?? 5;\n    const state = options.state ?? 'stop';\n\n    const running = TransitionsMap.get(element);\n\n    if (running) {\n        switch (state) {\n            case 'continue':\n                return EMPTY;\n            case 'stop':\n                zone.run(() => running.transition$.complete());\n                context = { ...running.context, ...context };\n                TransitionsMap.delete(element);\n                break;\n        }\n    }\n    const endFn = startFn(element, options.animation, context) || noopFn;\n\n    if (!options.animation || window.getComputedStyle(element).transitionProperty === 'none') {\n        zone.run(() => endFn());\n        return of(undefined).pipe(runInZone(zone));\n    }\n\n    const transition$ = new Subject<void>();\n    const finishTransition$ = new Subject<void>();\n    const stop$ = transition$.pipe(endWith(true));\n\n    TransitionsMap.set(element, {\n        transition$,\n        complete: () => {\n            finishTransition$.next();\n            finishTransition$.complete();\n        },\n        context\n    });\n\n    const transitionDurationMs = getTransitionDurationMs(element);\n\n    zone.runOutsideAngular(() => {\n        const transitionEnd$ = fromEvent<TransitionEvent>(element, 'transitionend').pipe(\n            filter(({ target }) => target === element),\n            takeUntil(stop$)\n        );\n        const timer$ = timer(transitionDurationMs + transitionTimerDelayMs).pipe(takeUntil(stop$));\n\n        race(timer$, transitionEnd$, finishTransition$)\n            .pipe(takeUntil(stop$))\n            .subscribe(() => {\n                TransitionsMap.delete(element);\n                zone.run(() => {\n                    endFn();\n                    transition$.next();\n                    transition$.complete();\n                });\n            });\n    });\n\n    return transition$.asObservable();\n};\n\nconst completeTransition = (element: HTMLElement) => {\n    TransitionsMap.get(element)?.complete();\n};\n\nexport { completeTransition, usePresence };\n","import {\n    Directive,\n    effect,\n    inject,\n    InjectionToken,\n    Provider,\n    Signal,\n    TemplateRef,\n    ViewContainerRef\n} from '@angular/core';\n\n/**\n * Context interface for RdxPresence directive\n * Contains a Signal that indicates whether the content should be present in the DOM\n */\nexport type RdxPresenceContext = {\n    present: Signal<boolean>;\n};\n\nexport const RDX_PRESENCE_CONTEXT = new InjectionToken<RdxPresenceContext>('RdxPresenceContext');\n\n/**\n * Factory provider helper.\n * In your parent component/directive you can write:\n *\n *   providers: [\n *     provideRdxPresenceContext(() => ({ present: myBooleanSignal }))\n *   ]\n */\nexport function provideRdxPresenceContext(contextFactory: () => RdxPresenceContext): Provider {\n    return { provide: RDX_PRESENCE_CONTEXT, useFactory: contextFactory };\n}\n\n@Directive()\nexport class RdxPresenceDirective {\n    private readonly context = inject(RDX_PRESENCE_CONTEXT);\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly templateRef = inject(TemplateRef<RdxPresenceContext>);\n\n    private effectRef = effect((onCleanup) => {\n        if (this.context.present()) {\n            const view = this.viewContainerRef.createEmbeddedView(this.templateRef, { $implicit: this.context });\n\n            onCleanup(() => view.destroy());\n        }\n    });\n}\n","import { TransitionStartFn } from '../types';\nimport { triggerReflow } from '../utils';\n\nexport type CollapseContext = {\n    direction: 'show' | 'hide';\n    dimension: 'width' | 'height';\n    maxSize?: string;\n};\n\n// Define constants for class names\nconst COLLAPSE_CLASS = 'collapse';\nconst COLLAPSING_CLASS = 'collapsing';\nconst SHOW_CLASS = 'show';\n/**\n * Function to handle the start of a collapsing transition.\n *\n * @param element - The HTML element to animate.\n * @param animation - Whether to use animation or not.\n * @param context - The context containing direction and dimension information.\n * @returns A function to clean up the animation.\n */\nexport const transitionCollapsing: TransitionStartFn<CollapseContext> = (\n    element: HTMLElement,\n    animation: boolean,\n    context: CollapseContext\n) => {\n    const { direction, dimension } = context;\n    let { maxSize } = context;\n    const { classList } = element;\n\n    /**\n     * Sets initial classes based on the direction.\n     */\n    function setInitialClasses() {\n        classList.add(COLLAPSE_CLASS);\n        if (direction === 'show') {\n            classList.add(SHOW_CLASS);\n        } else {\n            classList.remove(SHOW_CLASS);\n        }\n    }\n\n    if (!animation) {\n        setInitialClasses();\n        return;\n    }\n\n    if (!maxSize) {\n        maxSize = measureCollapsingElementDimensionPx(element, dimension);\n        context.maxSize = maxSize;\n\n        // Fix the height before starting the animation\n        element.style[dimension] = direction !== 'show' ? maxSize : '0px';\n\n        classList.remove(COLLAPSE_CLASS, COLLAPSING_CLASS, 'show');\n\n        triggerReflow(element);\n\n        // Start the animation\n        classList.add(COLLAPSING_CLASS);\n    }\n\n    element.style[dimension] = direction === 'show' ? maxSize : '0px';\n\n    return () => {\n        setInitialClasses();\n        classList.remove(COLLAPSING_CLASS);\n        element.style[dimension] = '';\n    };\n};\n\n/**\n * Measures the dimension of the collapsing element in pixels.\n *\n * @param element - The HTML element to measure.\n * @param dimension - The dimension ('width' or 'height') to measure.\n * @returns The size of the dimension in pixels.\n */\nfunction measureCollapsingElementDimensionPx(element: HTMLElement, dimension: 'width' | 'height'): string {\n    // SSR fix\n    if (typeof navigator === 'undefined') {\n        return '0px';\n    }\n\n    const { classList } = element;\n    const hasShownClass = classList.contains(SHOW_CLASS);\n    if (!hasShownClass) {\n        classList.add(SHOW_CLASS);\n    }\n\n    element.style[dimension] = '';\n    const dimensionSize = element.getBoundingClientRect()[dimension] + 'px';\n\n    if (!hasShownClass) {\n        classList.remove(SHOW_CLASS);\n    }\n\n    return dimensionSize;\n}\n","import { TransitionStartFn } from '../types';\nimport { triggerReflow } from '../utils';\n\nexport const toastFadeInTransition: TransitionStartFn = (element: HTMLElement, animation: boolean) => {\n    const { classList } = element;\n\n    if (animation) {\n        classList.add('fade');\n    } else {\n        classList.add('show');\n        return;\n    }\n\n    triggerReflow(element);\n    classList.add('show', 'showing');\n\n    return () => {\n        classList.remove('showing');\n    };\n};\n\nexport const toastFadeOutTransition: TransitionStartFn = ({ classList }: HTMLElement) => {\n    classList.add('showing');\n    return () => {\n        classList.remove('show', 'showing');\n    };\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"radix-ng-primitives-presence.mjs","sources":["../../../packages/primitives/presence/src/presence.directive.ts","../../../packages/primitives/presence/radix-ng-primitives-presence.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n    afterNextRender,\n    DestroyRef,\n    Directive,\n    effect,\n    EmbeddedViewRef,\n    inject,\n    InjectionToken,\n    Injector,\n    PLATFORM_ID,\n    Provider,\n    Signal,\n    TemplateRef,\n    ViewContainerRef\n} from '@angular/core';\n\n/**\n * Context interface for RdxPresence directive\n * Contains a Signal that indicates whether the content should be present in the DOM\n */\nexport type RdxPresenceContext = {\n    present: Signal<boolean>;\n};\n\nexport const RDX_PRESENCE_CONTEXT = new InjectionToken<RdxPresenceContext>('RdxPresenceContext');\n\n/**\n * Factory provider helper.\n * In your parent component/directive you can write:\n *\n *   providers: [\n *     provideRdxPresenceContext(() => ({ present: myBooleanSignal }))\n *   ]\n */\nexport function provideRdxPresenceContext(contextFactory: () => RdxPresenceContext): Provider {\n    return { provide: RDX_PRESENCE_CONTEXT, useFactory: contextFactory };\n}\n\ntype PresenceState = 'mounted' | 'unmountSuspended' | 'unmounted';\ntype PresenceEvent = 'MOUNT' | 'UNMOUNT' | 'ANIMATION_OUT' | 'ANIMATION_END';\n\n/**\n * State machine mirroring `@radix-ui/react-presence`.\n *\n * - `mounted`           — content rendered, `present` is `true`.\n * - `unmountSuspended`  — `present` flipped to `false` but an exit animation is running;\n *                         the content stays in the DOM until the animation ends.\n * - `unmounted`         — content removed.\n */\nconst MACHINE: Record<PresenceState, Partial<Record<PresenceEvent, PresenceState>>> = {\n    mounted: { UNMOUNT: 'unmounted', ANIMATION_OUT: 'unmountSuspended' },\n    unmountSuspended: { MOUNT: 'mounted', ANIMATION_END: 'unmounted' },\n    unmounted: { MOUNT: 'mounted' }\n};\n\n/**\n * Headless structural directive that conditionally renders its template based on a reactive\n * `present` signal supplied through {@link RDX_PRESENCE_CONTEXT}.\n *\n * Unlike a plain `*ngIf`, it keeps the content mounted while a CSS exit animation\n * (`@keyframes` applied for the closed state) is running, and unmounts it only once that\n * animation finishes. If the content has no exit animation, it unmounts immediately.\n */\n@Directive({\n    standalone: true\n})\nexport class RdxPresenceDirective {\n    private readonly context = inject(RDX_PRESENCE_CONTEXT);\n    private readonly viewContainerRef = inject(ViewContainerRef);\n    private readonly templateRef = inject(TemplateRef<void>);\n    private readonly injector = inject(Injector);\n    private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n\n    private viewRef: EmbeddedViewRef<void> | null = null;\n    private node: HTMLElement | null = null;\n    private removeListeners: (() => void) | null = null;\n\n    private state: PresenceState;\n    private prevPresent: boolean;\n    private prevAnimationName = 'none';\n\n    constructor() {\n        this.prevPresent = this.context.present();\n        this.state = this.prevPresent ? 'mounted' : 'unmounted';\n\n        if (this.prevPresent) {\n            this.mountView();\n        }\n\n        effect(() => {\n            const present = this.context.present();\n\n            if (present === this.prevPresent) {\n                return;\n            }\n            this.prevPresent = present;\n\n            if (present) {\n                // Mount synchronously so the enter animation can start on this frame.\n                this.send('MOUNT');\n            } else if (this.isBrowser) {\n                // Defer the unmount decision until the next render, so the consumer's\n                // `data-state` (and therefore the exit `@keyframes`) is applied to the DOM\n                // before we read the computed animation name.\n                afterNextRender(() => this.evaluateExit(), { injector: this.injector });\n            } else {\n                this.send('UNMOUNT');\n            }\n        });\n\n        inject(DestroyRef).onDestroy(() => this.destroyView());\n    }\n\n    /** Decides whether to suspend the unmount for an exit animation (port of Radix' logic). */\n    private evaluateExit(): void {\n        // Re-opened before this callback ran — keep the content mounted.\n        if (this.state !== 'mounted' || this.context.present()) {\n            return;\n        }\n\n        const styles = this.getComputedStyles();\n        const currentAnimationName = styles?.animationName || 'none';\n\n        if (currentAnimationName === 'none' || styles?.display === 'none') {\n            // No exit animation (or the element is hidden) — unmount right away.\n            this.send('UNMOUNT');\n        } else {\n            // Only suspend the unmount if the closed state actually starts a *different* animation.\n            const isAnimating = this.prevAnimationName !== currentAnimationName;\n            this.send(isAnimating ? 'ANIMATION_OUT' : 'UNMOUNT');\n        }\n    }\n\n    private send(event: PresenceEvent): void {\n        const next = MACHINE[this.state][event];\n        if (next === undefined || next === this.state) {\n            return;\n        }\n\n        this.state = next;\n\n        if (next === 'mounted') {\n            if (this.viewRef) {\n                // Re-opened while an exit animation was running — refresh the tracked animation.\n                this.prevAnimationName = this.getAnimationName();\n            } else {\n                this.mountView();\n            }\n        } else if (next === 'unmounted') {\n            this.destroyView();\n        }\n        // `unmountSuspended` keeps the existing view mounted until ANIMATION_END.\n    }\n\n    private mountView(): void {\n        this.viewRef = this.viewContainerRef.createEmbeddedView(this.templateRef);\n        this.node = this.viewRef.rootNodes.find((n): n is HTMLElement => n instanceof HTMLElement) ?? null;\n\n        if (this.node && this.isBrowser) {\n            this.prevAnimationName = this.getAnimationName();\n            this.addAnimationListeners(this.node);\n        }\n    }\n\n    private destroyView(): void {\n        this.removeListeners?.();\n        this.removeListeners = null;\n        this.viewRef?.destroy();\n        this.viewRef = null;\n        this.node = null;\n    }\n\n    private addAnimationListeners(node: HTMLElement): void {\n        const onStart = (event: AnimationEvent) => {\n            if (event.target === node) {\n                this.prevAnimationName = this.getAnimationName();\n            }\n        };\n        const onEnd = (event: AnimationEvent) => {\n            const isCurrentAnimation = this.getAnimationName().includes(event.animationName);\n            if (event.target === node && isCurrentAnimation) {\n                this.send('ANIMATION_END');\n            }\n        };\n\n        node.addEventListener('animationstart', onStart);\n        node.addEventListener('animationcancel', onEnd);\n        node.addEventListener('animationend', onEnd);\n\n        this.removeListeners = () => {\n            node.removeEventListener('animationstart', onStart);\n            node.removeEventListener('animationcancel', onEnd);\n            node.removeEventListener('animationend', onEnd);\n        };\n    }\n\n    private getComputedStyles(): CSSStyleDeclaration | null {\n        return this.node && this.isBrowser ? getComputedStyle(this.node) : null;\n    }\n\n    private getAnimationName(): string {\n        return this.getComputedStyles()?.animationName || 'none';\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}