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

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

@@ -0,0 +1,839 @@
+import * as i0 from '@angular/core';
+import { inject, signal, computed, Injectable, input, effect, Directive, assertInInjectionContext, DestroyRef, ElementRef, Injector, NgModule } from '@angular/core';
+import { RdxIdGenerator, usePointerDrag, createContext, injectId, elementSize } from '@radix-ng/primitives/core';
+import * as i1 from '@radix-ng/primitives/portal';
+import { RdxPortal } from '@radix-ng/primitives/portal';
+import * as i1$1 from '@radix-ng/primitives/popper';
+import { RdxPopperContentWrapper, provideRdxPopperContentConfig, RdxPopper } from '@radix-ng/primitives/popper';
+
+/** Default auto-dismiss delay (ms) applied when a toast omits `timeout`. */
+const DEFAULT_TIMEOUT = 5000;
+/** Max number of toasts kept in the queue; the oldest is dropped past this. */
+const DEFAULT_LIMIT = 3;
+/**
+ * App-level coordinator and imperative API for toasts — the Angular counterpart of Base UI's
+ * `<Toast.Provider>` plus `useToastManager()`. Holds the queue as a signal that `RdxToastViewport`
+ * renders, owns each toast's auto-dismiss timer (pausable while the viewport is hovered/focused),
+ * and exposes `add` / `update` / `close` / `promise`.
+ *
+ * Provide it once near the app root with {@link provideRdxToastManager} or the `[rdxToastProvider]`
+ * directive, then inject `RdxToastManager` anywhere to push toasts.
+ */
+class RdxToastManager {
+    constructor() {
+        this.idGenerator = inject(RdxIdGenerator);
+        this._toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : /* istanbul ignore next */ []));
+        /** The live queue, oldest first. Render it in `RdxToastViewport` (e.g. via `@for`). */
+        this.toasts = this._toasts.asReadonly();
+        /** Whether any toast is currently in the queue. */
+        this.hasToasts = computed(() => this._toasts().length > 0, ...(ngDevMode ? [{ debugName: "hasToasts" }] : /* istanbul ignore next */ []));
+        this._expanded = signal(false, ...(ngDevMode ? [{ debugName: "_expanded" }] : /* istanbul ignore next */ []));
+        /** Whether the stack is expanded (viewport hovered or focused) — drives `data-expanded`. */
+        this.expanded = this._expanded.asReadonly();
+        this._heights = signal({}, ...(ngDevMode ? [{ debugName: "_heights" }] : /* istanbul ignore next */ []));
+        /** Measured heights (px) per toast id, reported by each `RdxToastRoot` for expanded-stack offsets. */
+        this.heights = this._heights.asReadonly();
+        /**
+         * Per-toast stacking metrics, computed once for the whole queue (front = newest, index `0`):
+         * `index` is the distance from the front and `offsetY` is the combined height of the toasts
+         * stacked in front. Roots read this by id instead of each rescanning the queue (O(n) vs O(n²)).
+         */
+        this.layout = computed(() => {
+            const list = this._toasts();
+            const heights = this._heights();
+            const result = {};
+            let offsetInFront = 0;
+            for (let i = list.length - 1; i >= 0; i--) {
+                const toast = list[i];
+                result[toast.id] = { index: list.length - 1 - i, offsetY: offsetInFront };
+                offsetInFront += heights[toast.id] ?? 0;
+            }
+            return result;
+        }, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Max number of simultaneously visible toasts. Configurable via `[rdxToastProvider]`. */
+        this.limit = DEFAULT_LIMIT;
+        /** Default auto-dismiss delay (ms) for toasts that omit `timeout`. Set via `[rdxToastProvider]`. */
+        this.defaultTimeout = DEFAULT_TIMEOUT;
+        this.timers = new Map();
+        /** Nested-pause depth so overlapping holds (hover + swipe) resume only when all release. */
+        this.pauseDepth = 0;
+    }
+    /** Queue a new toast. Returns its id (generated when not supplied). */
+    add(options) {
+        const id = options.id ?? this.idGenerator.getId('rdx-toast-');
+        const toast = {
+            ...options,
+            id,
+            priority: options.priority ?? 'low',
+            transitionStatus: 'starting'
+        };
+        // Re-adding an id that is mid-dismissal resurrects it rather than updating it: finish the
+        // abandoned dismissal so its leave handler can't later remove the replacement, and its
+        // `onRemove` still fires. (A same-id toast that is still open is a normal update — left alone.)
+        const existing = this._toasts().find((t) => t.id === id);
+        if (existing?.transitionStatus === 'ending') {
+            this.clearTimer(id);
+            existing.onRemove?.();
+        }
+        let evicted = [];
+        this._toasts.update((toasts) => {
+            const next = [...toasts.filter((t) => t.id !== id), toast];
+            // Enforce the limit by dropping the oldest entries.
+            const overflow = next.length - this.limit;
+            if (overflow > 0) {
+                evicted = next.slice(0, overflow);
+                return next.slice(overflow);
+            }
+            return next;
+        });
+        // Fully retire evicted toasts (timer + height + callback), not just their timers.
+        evicted.forEach((dropped) => {
+            this.clearTimer(dropped.id);
+            this.clearHeight(dropped.id);
+            dropped.onRemove?.();
+        });
+        this.scheduleTimeout(toast);
+        return id;
+    }
+    /** Merge new options into an existing toast (no-op if the id is unknown). */
+    update(id, options) {
+        this._toasts.update((toasts) => toasts.map((toast) => (toast.id === id ? { ...toast, ...options, id } : toast)));
+        const toast = this._toasts().find((t) => t.id === id);
+        if (toast) {
+            this.scheduleTimeout(toast);
+        }
+    }
+    /**
+     * Begin dismissing a toast: fire `onClose`, then remove it after the leave animation.
+     * Omit `id` to dismiss every toast at once (mirrors Base UI's `close()`).
+     */
+    close(id) {
+        if (id === undefined) {
+            this._toasts().forEach((toast) => this.close(toast.id));
+            return;
+        }
+        const toast = this._toasts().find((t) => t.id === id);
+        if (!toast) {
+            return;
+        }
+        this.clearTimer(id);
+        toast.onClose?.();
+        this._toasts.update((toasts) => toasts.map((t) => (t.id === id ? { ...t, transitionStatus: 'ending' } : t)));
+    }
+    /**
+     * Remove a toast from the queue immediately. `RdxToastRoot` calls this once its leave animation
+     * has finished; call it directly only when there is no exit animation.
+     */
+    remove(id) {
+        const toast = this._toasts().find((t) => t.id === id);
+        this.clearTimer(id);
+        this._toasts.update((toasts) => toasts.filter((t) => t.id !== id));
+        this.clearHeight(id);
+        toast?.onRemove?.();
+    }
+    /** Toggle the expanded (hover/focus) state of the stack. Called by the viewport. */
+    setExpanded(expanded) {
+        this._expanded.set(expanded);
+    }
+    /** Record a toast's measured height (px) for expanded-stack offset math. Called by each root. */
+    setHeight(id, height) {
+        this._heights.update((heights) => (heights[id] === height ? heights : { ...heights, [id]: height }));
+    }
+    /** Pause every auto-dismiss timer (e.g. while the viewport is hovered, focused, or being swiped). */
+    pauseAll() {
+        if (this.pauseDepth++ > 0) {
+            return;
+        }
+        const now = Date.now();
+        this.timers.forEach((timer) => {
+            if (timer.handle !== null) {
+                clearTimeout(timer.handle);
+                timer.remaining -= now - timer.start;
+                timer.handle = null;
+            }
+        });
+    }
+    /** Release one pause; auto-dismiss timers resume only once every hold has released. */
+    resumeAll() {
+        if (this.pauseDepth === 0 || --this.pauseDepth > 0) {
+            return;
+        }
+        const now = Date.now();
+        this.timers.forEach((timer, id) => {
+            if (timer.handle === null && timer.remaining > 0) {
+                timer.start = now;
+                timer.handle = setTimeout(() => this.close(id), timer.remaining);
+            }
+        });
+    }
+    /**
+     * Drive a toast through a promise's lifecycle: show `loading`, then swap to `success` or
+     * `error` copy when it settles. Returns the original promise for chaining.
+     */
+    async promise(promise, options) {
+        const id = this.add({ ...resolveCopy(options.loading), timeout: 0, loading: true });
+        try {
+            const value = await promise;
+            this.update(id, { ...resolveCopy(options.success, value), loading: false, timeout: DEFAULT_TIMEOUT });
+            return value;
+        }
+        catch (error) {
+            this.update(id, { ...resolveCopy(options.error, error), loading: false, timeout: DEFAULT_TIMEOUT });
+            throw error;
+        }
+    }
+    scheduleTimeout(toast) {
+        this.clearTimer(toast.id);
+        const timeout = toast.timeout ?? this.defaultTimeout;
+        if (timeout <= 0 || toast.loading) {
+            return;
+        }
+        const timer = { handle: null, remaining: timeout, start: Date.now() };
+        if (this.pauseDepth === 0) {
+            timer.handle = setTimeout(() => this.close(toast.id), timeout);
+        }
+        this.timers.set(toast.id, timer);
+    }
+    clearTimer(id) {
+        const timer = this.timers.get(id);
+        if (timer?.handle != null) {
+            clearTimeout(timer.handle);
+        }
+        this.timers.delete(id);
+    }
+    clearHeight(id) {
+        this._heights.update((heights) => {
+            if (!(id in heights)) {
+                return heights;
+            }
+            const next = { ...heights };
+            delete next[id];
+            return next;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastManager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastManager, decorators: [{
+            type: Injectable
+        }] });
+/** Normalize a string-or-options promise-copy entry (optionally derived from the settled value). */
+function resolveCopy(entry, value) {
+    const resolved = typeof entry === 'function' ? entry(value) : entry;
+    return typeof resolved === 'string' ? { title: resolved } : resolved;
+}
+/** Provide a {@link RdxToastManager} for an app (e.g. in `app.config.ts`). */
+function provideRdxToastManager() {
+    return [RdxToastManager];
+}
+/**
+ * Hosts a {@link RdxToastManager} for its subtree. Put it on a wrapping element (or the app root)
+ * so descendant viewports and components share one queue. `limit` caps simultaneously visible toasts.
+ */
+class RdxToastProvider {
+    constructor() {
+        this.manager = inject(RdxToastManager);
+        /** Max number of toasts shown at once. */
+        this.limit = input(DEFAULT_LIMIT, ...(ngDevMode ? [{ debugName: "limit" }] : /* istanbul ignore next */ []));
+        /** Default auto-dismiss delay (ms) for toasts that omit their own `timeout`. `0` disables it. */
+        this.timeout = input(DEFAULT_TIMEOUT, ...(ngDevMode ? [{ debugName: "timeout" }] : /* istanbul ignore next */ []));
+        // `limit` / `defaultTimeout` are plain fields on the manager; keep them in sync with inputs.
+        effect(() => {
+            this.manager.limit = this.limit();
+            this.manager.defaultTimeout = this.timeout();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastProvider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToastProvider, isStandalone: true, selector: "[rdxToastProvider]", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, timeout: { classPropertyName: "timeout", publicName: "timeout", isSignal: true, isRequired: false, transformFunction: null } }, providers: [RdxToastManager], exportAs: ["rdxToastProvider"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastProvider, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastProvider]',
+                    exportAs: 'rdxToastProvider',
+                    providers: [RdxToastManager]
+                }]
+        }], ctorParameters: () => [], propDecorators: { limit: [{ type: i0.Input, args: [{ isSignal: true, alias: "limit", required: false }] }], timeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeout", required: false }] }] } });
+
+/** Unit vectors per dismiss direction (screen coordinates: +y is down). */
+const UNIT = {
+    up: { x: 0, y: -1 },
+    down: { x: 0, y: 1 },
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 }
+};
+/** Default travel (px) past which a release dismisses. */
+const DEFAULT_THRESHOLD = 45;
+/** Signed velocity (px/ms) toward the dismiss direction that flicks a toast away. */
+const FLICK_VELOCITY = 0.3;
+/** iOS-style resistance when dragging opposite the dismiss direction. */
+const RUBBER_BAND = 0.5;
+/**
+ * Headless swipe-to-dismiss for a toast, built on the shared {@link usePointerDrag} lifecycle (which
+ * owns pointer capture, the start threshold, window listeners, and tap/cancel handling). This layer
+ * adds the toast-specific direction projection, rubber-banding, flick detection, and the styling
+ * contract — it applies no transform itself:
+ *
+ * - `--toast-swipe-movement-x` / `--toast-swipe-movement-y` — signed px offset along the active axis.
+ * - `[data-swiping]` — present while a gesture is active (drive `transition: none` off this).
+ * - `[data-swipe-direction]` — the active direction.
+ * - `[data-swipe-dismiss]` — present briefly when a release commits to dismissal.
+ *
+ * Mark inner interactive regions with `[data-toast-swipe-ignore]` to opt them out of the gesture.
+ * `RdxToastRoot` (the gesture host) sets `touch-action: none` so a touch-drag is not stolen by native
+ * scrolling — without it the gesture only works with a mouse, not on touch devices.
+ * Must be called from an injection context (a directive constructor).
+ */
+function useToastSwipe(config) {
+    assertInInjectionContext(useToastSwipe);
+    const el = () => config.element();
+    const axisSize = (direction) => direction === 'left' || direction === 'right' ? el().offsetWidth : el().offsetHeight;
+    const rubber = (distance, direction) => {
+        const size = axisSize(direction) || 1;
+        return (1 - 1 / ((Math.abs(distance) * RUBBER_BAND) / size + 1)) * size;
+    };
+    let active = false;
+    let startX = 0;
+    let startY = 0;
+    let direction = null;
+    let pending = 0;
+    let lastProjected = 0;
+    let lastTime = 0;
+    let velocity = 0;
+    const write = (offset, dir) => {
+        const unit = dir ? UNIT[dir] : { x: 0, y: 0 };
+        const node = el();
+        node.style.setProperty('--toast-swipe-movement-x', `${unit.x * offset}px`);
+        node.style.setProperty('--toast-swipe-movement-y', `${unit.y * offset}px`);
+    };
+    /** Pick the allowed direction the drag points toward most, with its signed projection (px). */
+    const project = (dx, dy) => {
+        let best = null;
+        let bestProjection = 0;
+        for (const dir of config.directions()) {
+            const unit = UNIT[dir];
+            const projection = dx * unit.x + dy * unit.y;
+            if (projection > bestProjection) {
+                bestProjection = projection;
+                best = dir;
+            }
+        }
+        return { direction: best, projection: bestProjection };
+    };
+    usePointerDrag({
+        canStart: (event) => {
+            if (!config.enabled()) {
+                return false;
+            }
+            return !event.target?.closest('[data-toast-swipe-ignore]');
+        },
+        onStart: (event) => {
+            active = true;
+            startX = event.clientX;
+            startY = event.clientY;
+            direction = null;
+            pending = 0;
+            lastProjected = 0;
+            lastTime = event.timeStamp;
+            velocity = 0;
+            el().setAttribute('data-swiping', '');
+            el().removeAttribute('data-swipe-dismiss');
+            config.onPress?.();
+        },
+        onMove: (event) => {
+            // Abort if the toast began leaving mid-drag; the end handler settles back.
+            if (!config.enabled()) {
+                return false;
+            }
+            const dx = event.clientX - startX;
+            const dy = event.clientY - startY;
+            const { direction: dir, projection } = project(dx, dy);
+            if (dir) {
+                direction = dir;
+            }
+            el().setAttribute('data-swipe-direction', direction ?? '');
+            // Move freely toward the dismiss direction; resist dragging the other way.
+            pending = projection >= 0 ? projection : -rubber(projection, direction);
+            const dt = event.timeStamp - lastTime;
+            if (dt > 0) {
+                velocity = (projection - lastProjected) / dt;
+                lastProjected = projection;
+                lastTime = event.timeStamp;
+            }
+            write(pending, direction);
+            return true;
+        },
+        onEnd: (event, committed) => {
+            active = false;
+            el().removeAttribute('data-swiping');
+            const threshold = config.threshold ?? DEFAULT_THRESHOLD;
+            const dismiss = committed && config.enabled() && (pending >= threshold || velocity >= FLICK_VELOCITY);
+            if (dismiss) {
+                el().setAttribute('data-swipe-dismiss', '');
+                config.onDismiss(event);
+            }
+            else {
+                // Settle home; the consumer's `transition` animates the snap-back.
+                write(0, direction);
+            }
+            config.onRelease?.();
+            direction = null;
+        }
+    });
+    // usePointerDrag does not call onEnd when the host is destroyed mid-gesture; balance the onPress
+    // that paused the timers so the manager doesn't stay paused forever.
+    inject(DestroyRef).onDestroy(() => {
+        if (active) {
+            active = false;
+            config.onRelease?.();
+        }
+    });
+}
+
+const [injectRdxToastRootContext, provideRdxToastRootContext] = createContext('RdxToastRootContext', 'components/toast');
+const rootContext = () => {
+    const instance = inject(RdxToastRoot);
+    return {
+        toast: () => instance.toast(),
+        titleId: instance.titleId,
+        descriptionId: instance.descriptionId,
+        setTitlePresent: (present) => instance.titlePresent.set(present),
+        setDescriptionPresent: (present) => instance.descriptionPresent.set(present),
+        close: () => instance.close()
+    };
+};
+/**
+ * A single toast — the Angular counterpart of `<Toast.Root>`. Bind the toast model from the
+ * viewport's `@for`; this directive owns the announcement `role`, the `data-state` enter/leave
+ * contract, swipe-to-dismiss, and the stacking variables consumers style against.
+ *
+ * Stacking / styling contract written to the host (no transform is applied for you):
+ * - `--toast-index` — position from the front (`0` = frontmost).
+ * - `--toast-height` — this toast's measured height (px).
+ * - `--toast-offset-y` — combined height (px) of the toasts stacked in front, for expanded layout.
+ * - `--toast-swipe-movement-x` / `--toast-swipe-movement-y` — live swipe offset (px).
+ * - `[data-front]` — present on the frontmost toast.
+ * - `[data-expanded]` — present while the viewport is hovered/focused.
+ * - `[data-state]` — `open` while visible, `closed` once dismissal begins.
+ * - `[data-swiping]` / `[data-swipe-direction]` / `[data-swipe-dismiss]` — gesture state.
+ *
+ * When the leave animation (driven by `data-state="closed"`) ends, the toast leaves the queue.
+ */
+class RdxToastRoot {
+    constructor() {
+        this.manager = inject(RdxToastManager);
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        /** The toast model to render — pass the item from the viewport's `@for`. */
+        this.toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
+        /** Allowed swipe-to-dismiss directions. Accepts a single direction or a list. */
+        this.swipeDirection = input(['down', 'right'], ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+        this.titleId = injectId('rdx-toast-title-');
+        this.descriptionId = injectId('rdx-toast-description-');
+        /** Whether a title / description part has registered, gating the aria-* references. */
+        this.titlePresent = signal(false, ...(ngDevMode ? [{ debugName: "titlePresent" }] : /* istanbul ignore next */ []));
+        this.descriptionPresent = signal(false, ...(ngDevMode ? [{ debugName: "descriptionPresent" }] : /* istanbul ignore next */ []));
+        this.size = elementSize({ elementRef: this.elementRef, injector: this.injector });
+        /** This toast's measured height (px). */
+        this.height = computed(() => this.size().height, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** Position from the front of the stack — `0` is the newest/frontmost toast. */
+        this.index = computed(() => this.manager.layout()[this.toast().id]?.index ?? 0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        /** Combined height (px) of the toasts stacked in front of this one (for expanded layout). */
+        this.offsetY = computed(() => this.manager.layout()[this.toast().id]?.offsetY ?? 0, ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+        /** `alert` (assertive) for high-priority toasts, otherwise `status`. */
+        this.role = computed(() => (this.toast().priority === 'high' ? 'alert' : 'status'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        /** `open` while visible, `closed` once dismissal begins — drives enter/leave animations. */
+        this.dataState = computed(() => (this.toast().transitionStatus === 'ending' ? 'closed' : 'open'), ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+        this.directions = computed(() => {
+            const value = this.swipeDirection();
+            return Array.isArray(value) ? value : [value];
+        }, ...(ngDevMode ? [{ debugName: "directions" }] : /* istanbul ignore next */ []));
+        const destroyRef = inject(DestroyRef);
+        // Mirror the measured height into the manager for the expanded-stack offset math.
+        effect(() => {
+            this.manager.setHeight(this.toast().id, this.size().height);
+        });
+        useToastSwipe({
+            element: () => this.elementRef.nativeElement,
+            directions: () => this.directions(),
+            enabled: () => this.toast().transitionStatus !== 'ending',
+            onDismiss: () => this.close(),
+            onPress: () => this.manager.pauseAll(),
+            onRelease: () => this.manager.resumeAll()
+        });
+        // Replay the enter animation on an upsert that bumps `updateKey`. The toast keeps the same
+        // DOM node (tracked by id), so restart the running animation by clearing and re-reading it.
+        let firstKey = true;
+        effect(() => {
+            this.toast().updateKey;
+            if (firstKey) {
+                firstKey = false;
+                return;
+            }
+            const node = this.elementRef.nativeElement;
+            node.style.animation = 'none';
+            void node.offsetWidth; // force reflow so the animation can restart
+            node.style.animation = '';
+        });
+        destroyRef.onDestroy(() => this.manager.setHeight(this.toast().id, 0));
+    }
+    close() {
+        this.manager.close(this.toast().id);
+    }
+    onAnimationEnd() {
+        // Remove from the queue only after the leave ("closed") animation completes.
+        if (this.toast().transitionStatus === 'ending') {
+            this.manager.remove(this.toast().id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastRoot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RdxToastRoot, isStandalone: true, selector: "[rdxToastRoot]", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, swipeDirection: { classPropertyName: "swipeDirection", publicName: "swipeDirection", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "animationend": "onAnimationEnd()" }, properties: { "style.touch-action": "\"none\"", "style.user-select": "\"none\"", "style.-webkit-user-select": "\"none\"", "attr.role": "role()", "attr.aria-labelledby": "titlePresent() ? titleId : undefined", "attr.aria-describedby": "descriptionPresent() ? descriptionId : undefined", "attr.data-state": "dataState()", "attr.data-type": "toast().type ?? undefined", "attr.data-front": "index() === 0 ? \"\" : undefined", "attr.data-expanded": "manager.expanded() ? \"\" : undefined", "style.--toast-index": "index()", "style.--toast-height": "height() + \"px\"", "style.--toast-offset-y": "offsetY() + \"px\"" } }, providers: [provideRdxToastRootContext(rootContext)], exportAs: ["rdxToastRoot"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastRoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastRoot]',
+                    exportAs: 'rdxToastRoot',
+                    providers: [provideRdxToastRootContext(rootContext)],
+                    host: {
+                        // Own the swipe gesture's touch behavior on the element usePointerDrag binds to. Without
+                        // touch-action:none a touch-drag is claimed by native scrolling (pointercancel fires before
+                        // the gesture starts), so swipe-to-dismiss works with a mouse but not on touch devices. The
+                        // toast surface never scrolls, so disabling pan/zoom here is safe; user-select stops text
+                        // selection mid-swipe. Mirrors number-field's scrub area.
+                        '[style.touch-action]': '"none"',
+                        '[style.user-select]': '"none"',
+                        '[style.-webkit-user-select]': '"none"',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-labelledby]': 'titlePresent() ? titleId : undefined',
+                        '[attr.aria-describedby]': 'descriptionPresent() ? descriptionId : undefined',
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.data-type]': 'toast().type ?? undefined',
+                        '[attr.data-front]': 'index() === 0 ? "" : undefined',
+                        '[attr.data-expanded]': 'manager.expanded() ? "" : undefined',
+                        '[style.--toast-index]': 'index()',
+                        '[style.--toast-height]': 'height() + "px"',
+                        '[style.--toast-offset-y]': 'offsetY() + "px"',
+                        '(animationend)': 'onAnimationEnd()'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }] } });
+
+/**
+ * An action button inside a toast (e.g. "Undo"). Unlike {@link RdxToastClose} it does not dismiss
+ * on its own — wire your handler with `(click)` and call `close()` from the exposed context when
+ * the action should also close the toast.
+ */
+class RdxToastAction {
+    constructor() {
+        /** The toast root context, so handlers can read the toast or dismiss it after acting. */
+        this.rootContext = injectRdxToastRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastAction, isStandalone: true, selector: "[rdxToastAction]", host: { attributes: { "type": "button" } }, exportAs: ["rdxToastAction"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastAction]',
+                    exportAs: 'rdxToastAction',
+                    host: {
+                        type: 'button'
+                    }
+                }]
+        }] });
+
+/** Button that dismisses its toast. Put it on a native `<button>` for built-in semantics. */
+class RdxToastClose {
+    constructor() {
+        this.rootContext = injectRdxToastRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastClose, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastClose, isStandalone: true, selector: "[rdxToastClose]", host: { attributes: { "type": "button" }, listeners: { "click": "rootContext.close()" } }, exportAs: ["rdxToastClose"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastClose]',
+                    exportAs: 'rdxToastClose',
+                    host: {
+                        type: 'button',
+                        '(click)': 'rootContext.close()'
+                    }
+                }]
+        }] });
+
+/**
+ * Wraps a toast's inner parts (title, description, actions) — the Angular counterpart of
+ * `<Toast.Content>`. Headless: it carries no styles; consumers apply `overflow: hidden` to clip
+ * taller toasts during the stack/expand animation. It mirrors the root's `data-state` so content
+ * can transition together with the root.
+ */
+class RdxToastContent {
+    constructor() {
+        this.rootContext = injectRdxToastRootContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastContent, isStandalone: true, selector: "[rdxToastContent]", host: { properties: { "attr.data-state": "rootContext.toast().transitionStatus === \"ending\" ? \"closed\" : \"open\"" } }, exportAs: ["rdxToastContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastContent]',
+                    exportAs: 'rdxToastContent',
+                    host: {
+                        '[attr.data-state]': 'rootContext.toast().transitionStatus === "ending" ? "closed" : "open"'
+                    }
+                }]
+        }] });
+
+/** Supporting body text for a toast; registers so `aria-describedby` only targets a real node. */
+class RdxToastDescription {
+    constructor() {
+        this.rootContext = injectRdxToastRootContext();
+        this.rootContext.setDescriptionPresent(true);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setDescriptionPresent(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastDescription, isStandalone: true, selector: "[rdxToastDescription]", host: { properties: { "id": "rootContext.descriptionId" } }, exportAs: ["rdxToastDescription"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastDescription]',
+                    exportAs: 'rdxToastDescription',
+                    host: {
+                        '[id]': 'rootContext.descriptionId'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Moves the toast viewport to a different part of the DOM — the Angular counterpart of
+ * `<Toast.Portal>`. Defaults to `document.body`; pass `container` to target another element.
+ */
+class RdxToastPortal {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastPortal, isStandalone: true, selector: "[rdxToastPortal]", exportAs: ["rdxToastPortal"], hostDirectives: [{ directive: i1.RdxPortal, inputs: ["container", "container"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastPortal, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastPortal]',
+                    exportAs: 'rdxToastPortal',
+                    hostDirectives: [
+                        {
+                            directive: RdxPortal,
+                            inputs: ['container']
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Positions an anchored toast against an element — the Angular counterpart of `<Toast.Positioner>`.
+ * Composes the popper machinery so a toast can point at a trigger instead of living in the stack.
+ *
+ * Bind `anchor` (and optionally `side`/`align`/offsets) — typically from a toast's `positionerProps`.
+ * It hosts its own `RdxPopper` so it is self-contained (no surrounding `rdxPopperRoot` needed), and
+ * mirrors the popper measurements as friendlier CSS variables plus `data-side` / `data-align`.
+ */
+class RdxToastPositioner {
+    constructor() {
+        this.wrapper = inject(RdxPopperContentWrapper);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastPositioner, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastPositioner, isStandalone: true, selector: "[rdxToastPositioner]", host: { properties: { "attr.data-side": "wrapper.placedSide()", "attr.data-align": "wrapper.placedAlign()", "attr.data-anchor-hidden": "wrapper.anchorHidden() ? \"\" : undefined", "style.--toast-anchor-width": "\"var(--radix-popper-anchor-width)\"", "style.--toast-transform-origin": "\"var(--radix-popper-transform-origin)\"" } }, providers: [
+            provideRdxPopperContentConfig({
+                side: 'top',
+                sideOffset: 8,
+                align: 'center',
+                arrowPadding: 6,
+                collisionPadding: 8,
+                updatePositionStrategy: 'always'
+            })
+        ], exportAs: ["rdxToastPositioner"], hostDirectives: [{ directive: i1$1.RdxPopper }, { directive: i1$1.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: RdxToastPositioner, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastPositioner]',
+                    exportAs: 'rdxToastPositioner',
+                    providers: [
+                        provideRdxPopperContentConfig({
+                            side: 'top',
+                            sideOffset: 8,
+                            align: 'center',
+                            arrowPadding: 6,
+                            collisionPadding: 8,
+                            updatePositionStrategy: 'always'
+                        })
+                    ],
+                    hostDirectives: [
+                        RdxPopper,
+                        {
+                            directive: RdxPopperContentWrapper,
+                            inputs: [
+                                'anchor',
+                                'side',
+                                'sideOffset',
+                                'align',
+                                'alignOffset',
+                                'arrowPadding',
+                                'avoidCollisions',
+                                'collisionBoundary',
+                                'collisionPadding',
+                                'sticky',
+                                'hideWhenDetached',
+                                'positionStrategy',
+                                'updatePositionStrategy'
+                            ]
+                        }
+                    ],
+                    host: {
+                        '[attr.data-side]': 'wrapper.placedSide()',
+                        '[attr.data-align]': 'wrapper.placedAlign()',
+                        '[attr.data-anchor-hidden]': 'wrapper.anchorHidden() ? "" : undefined',
+                        '[style.--toast-anchor-width]': '"var(--radix-popper-anchor-width)"',
+                        '[style.--toast-transform-origin]': '"var(--radix-popper-transform-origin)"'
+                    }
+                }]
+        }] });
+
+/** Accessible title for a toast; registers so the root only points `aria-labelledby` at a real node. */
+class RdxToastTitle {
+    constructor() {
+        this.rootContext = injectRdxToastRootContext();
+        this.rootContext.setTitlePresent(true);
+        inject(DestroyRef).onDestroy(() => this.rootContext.setTitlePresent(false));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastTitle, isStandalone: true, selector: "[rdxToastTitle]", host: { properties: { "id": "rootContext.titleId" } }, exportAs: ["rdxToastTitle"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastTitle]',
+                    exportAs: 'rdxToastTitle',
+                    host: {
+                        '[id]': 'rootContext.titleId'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * The positioned region that holds the visible toasts — the Angular counterpart of
+ * `<Toast.Viewport>`. Exposes the queue for templates to render, and while it is hovered or focused
+ * it expands the stack (`data-expanded` on each root) and pauses every auto-dismiss timer, resuming
+ * once neither hover nor focus remains — matching Base UI.
+ *
+ * Headless: it carries no positioning styles. Consumers position it (e.g. fixed bottom-right) and
+ * iterate `viewport.toasts()` with `@for`.
+ */
+class RdxToastViewport {
+    constructor() {
+        this.manager = inject(RdxToastManager);
+        /** The live toast queue to render. */
+        this.toasts = this.manager.toasts;
+        this.hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+        this.focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        /** Tracks the last expanded state so pause/resume stay balanced across transitions. */
+        this.wasExpanded = false;
+        effect(() => {
+            const expanded = this.hovered() || this.focused();
+            this.manager.setExpanded(expanded);
+            if (expanded && !this.wasExpanded) {
+                this.wasExpanded = true;
+                this.manager.pauseAll();
+            }
+            else if (!expanded && this.wasExpanded) {
+                this.wasExpanded = false;
+                this.manager.resumeAll();
+            }
+        });
+        // If the viewport is destroyed while still expanded, balance the outstanding pause so a
+        // longer-lived manager doesn't stay paused forever.
+        inject(DestroyRef).onDestroy(() => {
+            if (this.wasExpanded) {
+                this.wasExpanded = false;
+                this.manager.setExpanded(false);
+                this.manager.resumeAll();
+            }
+        });
+    }
+    onFocusOut(event) {
+        // Only clear focus when it actually leaves the viewport subtree.
+        const next = event.relatedTarget;
+        const host = event.currentTarget;
+        if (!host || !next || !host.contains(next)) {
+            this.focused.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastViewport, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: RdxToastViewport, isStandalone: true, selector: "[rdxToastViewport]", host: { attributes: { "role": "region", "tabindex": "-1" }, listeners: { "mouseenter": "hovered.set(true)", "mouseleave": "hovered.set(false)", "focusin": "focused.set(true)", "focusout": "onFocusOut($event)" } }, exportAs: ["rdxToastViewport"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastViewport, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxToastViewport]',
+                    exportAs: 'rdxToastViewport',
+                    host: {
+                        role: 'region',
+                        tabindex: '-1',
+                        '(mouseenter)': 'hovered.set(true)',
+                        '(mouseleave)': 'hovered.set(false)',
+                        '(focusin)': 'focused.set(true)',
+                        '(focusout)': 'onFocusOut($event)'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+const toastImports = [
+    RdxToastProvider,
+    RdxToastPortal,
+    RdxToastViewport,
+    RdxToastPositioner,
+    RdxToastRoot,
+    RdxToastContent,
+    RdxToastTitle,
+    RdxToastDescription,
+    RdxToastClose,
+    RdxToastAction
+];
+class RdxToastModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RdxToastModule, imports: [RdxToastProvider,
+            RdxToastPortal,
+            RdxToastViewport,
+            RdxToastPositioner,
+            RdxToastRoot,
+            RdxToastContent,
+            RdxToastTitle,
+            RdxToastDescription,
+            RdxToastClose,
+            RdxToastAction], exports: [RdxToastProvider,
+            RdxToastPortal,
+            RdxToastViewport,
+            RdxToastPositioner,
+            RdxToastRoot,
+            RdxToastContent,
+            RdxToastTitle,
+            RdxToastDescription,
+            RdxToastClose,
+            RdxToastAction] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RdxToastModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...toastImports],
+                    exports: [...toastImports]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RdxToastAction, RdxToastClose, RdxToastContent, RdxToastDescription, RdxToastManager, RdxToastModule, RdxToastPortal, RdxToastPositioner, RdxToastProvider, RdxToastRoot, RdxToastTitle, RdxToastViewport, injectRdxToastRootContext, provideRdxToastManager, provideRdxToastRootContext, toastImports, useToastSwipe };
+//# sourceMappingURL=radix-ng-primitives-toast.mjs.map