forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-toast.mjs

@@ -0,0 +1,1153 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, DestroyRef, input, numberAttribute, booleanAttribute, output, signal, computed, effect, untracked, Directive, DOCUMENT, Injectable, afterEveryRender, Injector, isDevMode, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LiveAnnouncer, injectPauseController, attachSwipeDismiss, createDefaults, IdGenerator, registerHandle, resolveHostId, resolveConfigClass } from 'forty-cdk/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+/**
+ * Region a toast belongs to. Toasts route to the `<for-toast-viewport>` whose
+ * `[region]` matches; an unspecified region falls through to this default, so
+ * the common single-viewport setup needs no `region` anywhere.
+ */
+const DEFAULT_TOAST_REGION = 'default';
+const FOR_TOAST_CONTEXT = new InjectionToken('FOR_TOAST_CONTEXT');
+function injectToastContext(piece) {
+    const ctx = inject(FOR_TOAST_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/toast] ${piece} must be used inside a [forToast] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * One toast notification. Apply on a `<div>` (or `<output>`, `<section>`)
+ * — the directive sets `role="status"` (`'info'` / `'success'` / `'warning'`)
+ * or `role="alert"` (`'error'`), `aria-live`, and the timer / pause
+ * machinery.
+ *
+ * The directive does **not** control its own visibility. The consumer
+ * mounts it (typically through `<for-toast-viewport>` for programmatic
+ * toasts, or directly with `@if` for declarative ones) and unmounts it
+ * when `(dismiss)` fires. Pair the unmount with `animate.leave="…"` for
+ * exit animations.
+ *
+ * Behavior:
+ * - Auto-dismisses after `duration` ms (default 5000). `0` is sticky.
+ * - Hovering or focusing the toast pauses the timer; leaving / blurring
+ *   resumes with the remaining time.
+ * - Escape (while focus is inside) closes the toast.
+ * - When `[swipeDirection]` is set, the user can drag past
+ *   `[swipeThreshold]` (default 50 px) to dismiss. While the gesture is
+ *   live the host reflects `data-swipe="start" | "move" | "cancel" | "end"`,
+ *   `data-swipe-direction`, and the CSS variables
+ *   `--for-toast-swipe-movement-x` / `--for-toast-swipe-movement-y`.
+ * - The host carries `data-state="open"` while alive (no `closed` state —
+ *   the consumer unmounts on close).
+ */
+class ForToast {
+    #host = inject(ElementRef);
+    #destroyRef = inject(DestroyRef);
+    #announcer = inject(LiveAnnouncer);
+    variant = input('info', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Auto-dismiss timer in ms. `0` keeps the toast sticky. */
+    duration = input(5000, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Whether the user can dismiss the toast through an ambient gesture —
+     * Escape, the close button, the auto-dismiss timer, and swipe. Defaults to
+     * `true`.
+     *
+     * Set `false` for a sticky / forced-action toast: every ambient gesture is
+     * suppressed, no auto-dismiss timer is scheduled, and a `[forToastClose]`
+     * button (if present) becomes inert. The **action button stays live and is
+     * the sanctioned dismissal path** — `[forToastAction]` still emits `(dismiss)`
+     * with reason `'action'` so a forced-action toast (e.g. "Update available —
+     * Reload") can be dismissed by the only control the user is meant to use.
+     * Programmatic close via `ForToastRef.dismiss()` is also always honored.
+     */
+    closable = input(true, { ...(ngDevMode ? { debugName: "closable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Direction(s) the user can swipe to dismiss the toast. Pass a
+     * single direction (`'right'`) or an array of directions
+     * (`['right', 'down']`). `null` (default) disables swipe.
+     *
+     * The swipe gesture uses pointer events, so it works for both touch
+     * and mouse drags. While the user is swiping, the host reflects
+     * `data-swipe="start" | "move" | "cancel" | "end"` and
+     * `data-swipe-direction` plus the CSS custom properties
+     * `--for-toast-swipe-movement-x` / `--for-toast-swipe-movement-y` so the
+     * consumer can drive a transform-based animation entirely from CSS.
+     */
+    swipeDirection = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Pixels of pointer travel along the active swipe direction needed
+     * to commit a dismissal. Defaults to `50`.
+     */
+    swipeThreshold = input(50, { ...(ngDevMode ? { debugName: "swipeThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Emitted when the toast wants to be unmounted. The consumer reacts by removing it from the rendered list. */
+    dismiss = output();
+    /** Fired once on the move that arms the swipe. */
+    swipeStart = output();
+    /** Fired on every pointer move while the swipe is active. */
+    swipeMove = output();
+    /** Fired on pointer-up after the threshold is crossed (immediately followed by `(dismiss)`). */
+    swipeEnd = output();
+    /** Fired on pointer-up before the threshold, or on `pointercancel`. */
+    swipeCancel = output();
+    #pause;
+    paused;
+    #swipeState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#swipeState" }] : /* istanbul ignore next */ []));
+    #swipeActiveDirection = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#swipeActiveDirection" }] : /* istanbul ignore next */ []));
+    #swipeMovementX = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#swipeMovementX" }] : /* istanbul ignore next */ []));
+    #swipeMovementY = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#swipeMovementY" }] : /* istanbul ignore next */ []));
+    swipeState = this.#swipeState.asReadonly();
+    swipeActiveDirection = this.#swipeActiveDirection.asReadonly();
+    swipeMovementX = this.#swipeMovementX.asReadonly();
+    swipeMovementY = this.#swipeMovementY.asReadonly();
+    #normalizedSwipeDirections = computed(() => {
+        // A non-closable toast forbids user-initiated dismissal of any kind —
+        // swipe is exactly that, so disable it regardless of the input.
+        if (!this.closable()) {
+            return [];
+        }
+        const raw = this.swipeDirection();
+        if (raw === null || raw === undefined) {
+            return [];
+        }
+        if (typeof raw === 'string') {
+            return [raw];
+        }
+        return raw;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#normalizedSwipeDirections" }] : /* istanbul ignore next */ []));
+    #labels = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labels" }] : /* istanbul ignore next */ []));
+    #descriptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#descriptions" }] : /* istanbul ignore next */ []));
+    #actions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#actions" }] : /* istanbul ignore next */ []));
+    labelledBy = computed(() => this.#labels()
+        .map((h) => h.id)
+        .join(' ') || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => this.#descriptions()
+        .map((h) => h.id)
+        .join(' ') || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    /**
+     * `true` when at least one registered `[forToastAction]` carries a
+     * non-empty `altText`. In that mode the host's `aria-live` is silenced
+     * and the announcement is composed and routed through `LiveAnnouncer`.
+     */
+    #hasActionAltText = computed(() => this.#actions().some((a) => a.altText().trim() !== ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#hasActionAltText" }] : /* istanbul ignore next */ []));
+    /**
+     * The synthesized announcement, composed reactively from the registered
+     * title / description text and action `altText` signals (never re-read from
+     * the DOM). Recomputes when any of those change — late-bound `altText` or a
+     * `ref.update()` text change flows through here, so the announcement effect
+     * re-fires on the edge instead of only once on first render.
+     */
+    #announcement = computed(() => {
+        const titles = this.#labels()
+            .map((h) => h.text().trim())
+            .filter(Boolean);
+        const descriptions = this.#descriptions()
+            .map((h) => h.text().trim())
+            .filter(Boolean);
+        const altTexts = this.#actions()
+            .map((a) => a.altText().trim())
+            .filter(Boolean);
+        return [...titles, ...descriptions, ...altTexts].join('. ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#announcement" }] : /* istanbul ignore next */ []));
+    computedRole = computed(() => this.variant() === 'error' ? 'alert' : 'status', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computedRole" }] : /* istanbul ignore next */ []));
+    ariaLive = computed(() => {
+        if (this.#hasActionAltText()) {
+            return 'off';
+        }
+        return this.variant() === 'error' ? 'assertive' : 'polite';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []));
+    // Timer state — kept off the reactive graph because pause/resume are
+    // imperative and we don't want to trip change detection on every tick.
+    #timerHandle = null;
+    #timerEndsAt = 0;
+    #remainingMs = 0;
+    // True once the auto-dismiss countdown has begun, so `#remainingMs` holds a
+    // meaningful value. While paused this guards the duration effect from
+    // clobbering a captured remaining time on an unrelated re-run (e.g. an
+    // `update()` that re-renders the toast); see `#onPausedChange`.
+    #timerStarted = false;
+    constructor() {
+        // Multi-reason pause: pointer hover, focus, and page visibility each
+        // pause/resume independently. The remaining-ms capture/reschedule is
+        // layered on the `paused` transition via `onChange`, keeping the timer off
+        // the reactive graph (pause/resume are imperative, so a tick must not trip
+        // change detection). The shared controller wires the page-visibility source
+        // and tears its subscription down with this injector.
+        this.#pause = injectPauseController({
+            onChange: (paused) => this.#onPausedChange(paused),
+        });
+        this.paused = this.#pause.paused;
+        // Start (or reset) the auto-dismiss timer whenever `duration` /
+        // `closable` changes. Pause / resume are handled imperatively in
+        // `#onPausedChange`, so we read `paused()` via `untracked()` here —
+        // otherwise the effect would re-run on hover and clobber the in-flight
+        // remaining-ms capture. While paused with a countdown already in flight we
+        // bail out entirely so the captured remaining time survives a re-render;
+        // resume reschedules with that captured value rather than the full
+        // duration.
+        effect(() => {
+            const ms = this.duration();
+            const closable = this.closable();
+            const paused = untracked(this.paused);
+            if (paused && this.#timerStarted) {
+                return;
+            }
+            this.#cancelTimer();
+            this.#remainingMs = ms;
+            this.#timerStarted = ms > 0 && closable;
+            if (this.#timerStarted && !paused) {
+                this.#scheduleTimer();
+            }
+        });
+        this.#destroyRef.onDestroy(() => this.#cancelTimer());
+        // Route the synthesized announcement through LiveAnnouncer reactively, so
+        // a late-bound `altText` and `ref.update()` text changes are announced —
+        // not only the value present on first render. Only active when at least
+        // one action carries `altText` (the host's silenced `aria-live` path);
+        // otherwise the host's own `aria-live` reads the toast and a manual
+        // announce would duplicate it. A guard against re-announcing identical
+        // text keeps an unrelated re-render from re-reading the same message.
+        // Pure side effect (an imperative `LiveAnnouncer` write), so `effect()` is
+        // the correct primitive here.
+        let lastAnnounced = null;
+        effect(() => {
+            if (!this.#hasActionAltText()) {
+                lastAnnounced = null;
+                return;
+            }
+            const message = this.#announcement();
+            if (!message || message === lastAnnounced) {
+                return;
+            }
+            lastAnnounced = message;
+            this.#announcer.announce(message, this.variant() === 'error' ? 'assertive' : 'polite');
+        });
+        const detachSwipe = attachSwipeDismiss({
+            element: this.#host.nativeElement,
+            getDirections: () => this.#normalizedSwipeDirections(),
+            getThreshold: () => this.swipeThreshold(),
+            onSwipeStart: (detail) => {
+                this.#swipeActiveDirection.set(detail.direction);
+                this.#swipeState.set('start');
+                this.#swipeMovementX.set(detail.delta.x);
+                this.#swipeMovementY.set(detail.delta.y);
+                this.swipeStart.emit(detail);
+            },
+            onSwipeMove: (detail) => {
+                this.#swipeState.set('move');
+                this.#swipeMovementX.set(detail.delta.x);
+                this.#swipeMovementY.set(detail.delta.y);
+                this.swipeMove.emit(detail);
+            },
+            onSwipeCancel: (detail) => {
+                this.#swipeState.set('cancel');
+                // Movement vars stay at the released delta so the consumer's CSS
+                // transition can spring them back to zero on its own timeline. The
+                // parked `data-swipe="cancel"` is cleared on the next `pointerdown`
+                // (see `onPointerDown`) so it never lingers into an unrelated gesture.
+                this.swipeCancel.emit(detail);
+            },
+            onSwipeEnd: (detail) => {
+                this.#swipeState.set('end');
+                this.#swipeMovementX.set(detail.delta.x);
+                this.#swipeMovementY.set(detail.delta.y);
+                this.swipeEnd.emit(detail);
+                this.requestClose('swipe');
+            },
+        });
+        this.#destroyRef.onDestroy(detachSwipe);
+    }
+    registerLabel(handle) {
+        this.#labels.update((arr) => (arr.includes(handle) ? arr : [...arr, handle]));
+    }
+    unregisterLabel(handle) {
+        this.#labels.update((arr) => arr.filter((h) => h !== handle));
+    }
+    registerDescription(handle) {
+        this.#descriptions.update((arr) => (arr.includes(handle) ? arr : [...arr, handle]));
+    }
+    unregisterDescription(handle) {
+        this.#descriptions.update((arr) => arr.filter((h) => h !== handle));
+    }
+    registerAction(handle) {
+        this.#actions.update((arr) => (arr.includes(handle) ? arr : [...arr, handle]));
+    }
+    unregisterAction(handle) {
+        this.#actions.update((arr) => arr.filter((h) => h !== handle));
+    }
+    requestClose(reason) {
+        if (!this.closable() && reason !== 'action' && reason !== 'programmatic') {
+            return;
+        }
+        this.#cancelTimer();
+        this.dismiss.emit(reason);
+    }
+    /**
+     * Clear a parked swipe-cancel state at the start of the next pointer
+     * interaction. After a cancel the host keeps `data-swipe="cancel"` and the
+     * released movement vars so the consumer's CSS can spring the toast back; a
+     * fresh `pointerdown` is the terminal reset that returns the host to a clean
+     * slate (no stale `data-swipe`, zeroed movement vars) before a new gesture
+     * arms. A re-armed swipe overwrites the state anyway, so this only matters
+     * for the parked-after-cancel window.
+     */
+    onPointerDown() {
+        if (this.#swipeState() === 'cancel') {
+            this.#resetSwipeState();
+        }
+    }
+    #resetSwipeState() {
+        this.#swipeState.set(null);
+        this.#swipeActiveDirection.set(null);
+        this.#swipeMovementX.set(0);
+        this.#swipeMovementY.set(0);
+    }
+    onPause(reason) {
+        this.#pause.apply(reason);
+    }
+    onResume(reason) {
+        this.#pause.release(reason);
+    }
+    onMaybeResumeFocus(event) {
+        const next = event.relatedTarget;
+        if (next && this.#host.nativeElement.contains(next)) {
+            return;
+        }
+        this.onResume('focus');
+    }
+    onKeyDown(event) {
+        if (event.key !== 'Escape' || !this.closable()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.requestClose('escape');
+    }
+    #onPausedChange(paused) {
+        if (paused) {
+            // Pause: capture remaining time and cancel the running timer.
+            if (this.#timerHandle !== null) {
+                this.#remainingMs = Math.max(0, this.#timerEndsAt - Date.now());
+                this.#cancelTimer();
+            }
+        }
+        else if (this.duration() > 0 && this.closable() && this.#remainingMs > 0) {
+            this.#scheduleTimer();
+        }
+    }
+    #scheduleTimer() {
+        this.#cancelTimer();
+        this.#timerEndsAt = Date.now() + this.#remainingMs;
+        this.#timerHandle = setTimeout(() => {
+            this.#timerHandle = null;
+            this.requestClose('auto');
+        }, this.#remainingMs);
+    }
+    #cancelTimer() {
+        if (this.#timerHandle !== null) {
+            clearTimeout(this.#timerHandle);
+            this.#timerHandle = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToast, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForToast, isStandalone: true, selector: "[forToast]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, swipeDirection: { classPropertyName: "swipeDirection", publicName: "swipeDirection", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss", swipeStart: "swipeStart", swipeMove: "swipeMove", swipeEnd: "swipeEnd", swipeCancel: "swipeCancel" }, host: { attributes: { "aria-atomic": "true", "tabindex": "0" }, listeners: { "pointerdown": "onPointerDown()", "pointerenter": "onPause(\"hover\")", "pointerleave": "onResume(\"hover\")", "focusin": "onPause(\"focus\")", "focusout": "onMaybeResumeFocus($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.role": "computedRole()", "attr.aria-live": "ariaLive()", "attr.aria-labelledby": "labelledBy()", "attr.aria-describedby": "describedBy()", "attr.data-state": "\"open\"", "attr.data-variant": "variant()", "attr.data-paused": "paused() ? \"\" : null", "attr.data-swipe": "swipeState()", "attr.data-swipe-direction": "swipeActiveDirection()", "style.--for-toast-swipe-movement-x.px": "swipeMovementX()", "style.--for-toast-swipe-movement-y.px": "swipeMovementY()" } }, providers: [{ provide: FOR_TOAST_CONTEXT, useExisting: ForToast }], exportAs: ["forToast"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToast, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToast]',
+                    exportAs: 'forToast',
+                    host: {
+                        '[attr.role]': 'computedRole()',
+                        '[attr.aria-live]': 'ariaLive()',
+                        'aria-atomic': 'true',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.aria-describedby]': 'describedBy()',
+                        tabindex: '0',
+                        '[attr.data-state]': '"open"',
+                        '[attr.data-variant]': 'variant()',
+                        '[attr.data-paused]': 'paused() ? "" : null',
+                        '[attr.data-swipe]': 'swipeState()',
+                        '[attr.data-swipe-direction]': 'swipeActiveDirection()',
+                        '[style.--for-toast-swipe-movement-x.px]': 'swipeMovementX()',
+                        '[style.--for-toast-swipe-movement-y.px]': 'swipeMovementY()',
+                        '(pointerdown)': 'onPointerDown()',
+                        '(pointerenter)': 'onPause("hover")',
+                        '(pointerleave)': 'onResume("hover")',
+                        '(focusin)': 'onPause("focus")',
+                        '(focusout)': 'onMaybeResumeFocus($event)',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                    providers: [{ provide: FOR_TOAST_CONTEXT, useExisting: ForToast }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], swipeStart: [{ type: i0.Output, args: ["swipeStart"] }], swipeMove: [{ type: i0.Output, args: ["swipeMove"] }], swipeEnd: [{ type: i0.Output, args: ["swipeEnd"] }], swipeCancel: [{ type: i0.Output, args: ["swipeCancel"] }] } });
+
+const FALLBACK = {
+    duration: 5000,
+    hotkey: 'F6',
+    maxVisible: Infinity,
+};
+const { token, provideDefaults } = createDefaults('FOR_TOAST_DEFAULTS', FALLBACK);
+/**
+ * Token holding the resolved toast defaults for the current injector scope.
+ * The library always provides a fully-populated value (the fallback at the
+ * root, or the merged result of the nearest `provideForToastDefaults`).
+ */
+const FOR_TOAST_DEFAULTS = token;
+/**
+ * Configures forty-cdk toast defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForToastDefaults(defaults) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Handle returned by `ForToastManager.show()`. Drives `dismiss()` /
+ * `update()` imperatively from anywhere. Both reactive (`isClosed`) and
+ * awaitable (`closed`) APIs are exposed — pick what fits the call site.
+ *
+ * `R` is the close-result type, settable via `dismiss(reason, value)`.
+ * Default `unknown`; specify on `manager.show<R, D>(...)` for type safety.
+ */
+class ForToastRef {
+    #closed = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#closed" }] : /* istanbul ignore next */ []));
+    #result = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#result" }] : /* istanbul ignore next */ []));
+    #config = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#config" }] : /* istanbul ignore next */ []));
+    /** Reactive: `true` once `dismiss()` has been called. */
+    isClosed = this.#closed.asReadonly();
+    /** Reactive: the close result, populated on `dismiss(reason, value)`. */
+    result = this.#result.asReadonly();
+    /** Reactive: the toast's current config (mutable via `update()`). */
+    config = this.#config.asReadonly();
+    /** Awaitable: resolves with `{ reason, result }` the first time `dismiss()` runs. */
+    closed;
+    #resolveClosed;
+    #teardown;
+    /** @internal */
+    constructor(initialConfig, teardown) {
+        this.#config.set(initialConfig);
+        this.#teardown = teardown;
+        this.closed = new Promise((resolve) => {
+            this.#resolveClosed = resolve;
+        });
+    }
+    /**
+     * Dismiss the toast, optionally returning a result. Idempotent — calling
+     * twice is a no-op. Reason defaults to `'programmatic'`.
+     */
+    dismiss(reason = 'programmatic', result) {
+        if (this.#closed()) {
+            return;
+        }
+        this.#closed.set(true);
+        this.#result.set(result);
+        this.#resolveClosed({ reason, result });
+        this.#teardown(reason);
+    }
+    /**
+     * Mutate the toast in-place (e.g. to update text on long-running
+     * operations: "Saving…" → "Saved"). No-op once dismissed.
+     *
+     * `id` and `region` are normalized at `show()` and are **immutable** — they
+     * are ignored here. `id` is the toast's identity (used for dedupe and
+     * external dismissal); `region` decides which `<for-toast-viewport>` renders
+     * the toast, and changing it would silently unmount and remount the toast in
+     * another viewport (resetting its timer and announcement). To move a toast
+     * to a different region, dismiss it and `show()` a new one.
+     */
+    update(patch) {
+        if (this.#closed()) {
+            return;
+        }
+        this.#config.update((current) => {
+            const { id: _id, region: _region, ...mutable } = patch;
+            return { ...current, ...mutable };
+        });
+    }
+}
+
+/**
+ * Programmatic toast opener — show a transient notification from TypeScript.
+ * Inject anywhere, call `show({ title, ... })` and get a `ForToastRef`
+ * back. Toasts render through `<for-toast-viewport>`, which the consumer
+ * mounts once near the root of their app.
+ *
+ * The manager owns the live array of toasts as a signal; the viewport
+ * iterates with `@for` so add / remove transitions are pure DOM control
+ * flow — consumers attach `animate.enter` / `animate.leave` directly.
+ */
+class ForToastManager {
+    #idGen = inject(IdGenerator);
+    #defaults = inject(FOR_TOAST_DEFAULTS);
+    #doc = inject(DOCUMENT);
+    #entries = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#entries" }] : /* istanbul ignore next */ []));
+    // O(1) id → entry index kept in sync with `#entries`. Prevents same-tick
+    // id-collision races where two `show({ id: 'X' })` calls would both miss
+    // an array `find` and end up pushing duplicate entries.
+    #byId = new Map();
+    // Live viewports in registration order. The first registration for a given
+    // region is its active renderer; the rest stay dormant (see
+    // `isActiveViewport`). A signal so each viewport's activeness recomputes
+    // when viewports mount / unmount or change region.
+    #viewports = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#viewports" }] : /* istanbul ignore next */ []));
+    #hotkeyListener = null;
+    /** Reactive view of all live toasts, in insertion order. */
+    toasts = computed(() => this.#entries().map((e) => this.#instance(e)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
+    /** Reactive count of currently open toasts. */
+    count = computed(() => this.#entries().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /**
+     * Open a toast. Returns a `ForToastRef` you can use to dismiss / update
+     * the toast imperatively.
+     *
+     * If `config.id` matches an existing toast, that toast is updated in place
+     * instead of duplicating — useful for "saving / saved" sequences.
+     */
+    show(config = {}) {
+        const id = config.id ?? this.#idGen.next('for-toast');
+        const existing = this.#byId.get(id);
+        if (existing) {
+            existing.ref.update(config);
+            return existing.ref;
+        }
+        // Normalize the region up front so `instance.config.region` is always a
+        // concrete string the viewport can filter on (an explicit `undefined`
+        // collapses to the default too).
+        const region = config.region ?? DEFAULT_TOAST_REGION;
+        const ref = new ForToastRef({ ...config, id, region }, (reason) => this.#removeById(id, reason));
+        const entry = { id, ref: ref };
+        this.#byId.set(id, entry);
+        this.#entries.update((arr) => [...arr, entry]);
+        return ref;
+    }
+    /** Dismiss a toast by id. No-op when unknown. */
+    dismiss(id, reason = 'programmatic') {
+        this.#byId.get(id)?.ref.dismiss(reason);
+    }
+    /** Dismiss every live toast. */
+    dismissAll(reason = 'programmatic') {
+        for (const entry of [...this.#entries()]) {
+            entry.ref.dismiss(reason);
+        }
+    }
+    /** @internal Used by the viewport to read the configured hotkey. */
+    hotkey() {
+        return this.#defaults.hotkey;
+    }
+    /** @internal Default duration applied when a toast omits it. */
+    defaultDuration() {
+        return this.#defaults.duration;
+    }
+    /** @internal Default `maxVisible` applied to the viewport. */
+    defaultMaxVisible() {
+        return this.#defaults.maxVisible;
+    }
+    /**
+     * @internal Register a viewport for hotkey + region coordination. Returns a
+     * teardown the viewport runs on destroy. Installs the single document-level
+     * hotkey listener on the first registration and tears it down with the last.
+     */
+    registerViewport(registration) {
+        this.#viewports.update((arr) => [...arr, registration]);
+        this.#ensureHotkeyListener();
+        return () => {
+            this.#viewports.update((arr) => arr.filter((r) => r !== registration));
+            if (this.#viewports().length === 0) {
+                this.#teardownHotkeyListener();
+            }
+        };
+    }
+    /**
+     * @internal Whether `registration` is the active renderer for its region —
+     * the first registered viewport for that region. Later viewports for the
+     * same region stay dormant so a single `show()` produces exactly one toast
+     * node regardless of how many viewports are mounted.
+     */
+    isActiveViewport(registration) {
+        const region = registration.region();
+        const first = this.#viewports().find((r) => r.region() === region);
+        return first === registration;
+    }
+    #ensureHotkeyListener() {
+        if (this.#hotkeyListener) {
+            return;
+        }
+        const listener = (event) => {
+            // First viewport (in registration order) whose hotkey matches and that
+            // actually has a toast to focus wins — a single handler for every
+            // viewport, so the hotkey can't double-fire across mounted viewports.
+            for (const viewport of this.#viewports()) {
+                if (event.key !== viewport.hotkey()) {
+                    continue;
+                }
+                if (viewport.focusFirst()) {
+                    event.preventDefault();
+                    return;
+                }
+            }
+        };
+        this.#hotkeyListener = listener;
+        this.#doc.addEventListener('keydown', listener);
+    }
+    #teardownHotkeyListener() {
+        if (!this.#hotkeyListener) {
+            return;
+        }
+        this.#doc.removeEventListener('keydown', this.#hotkeyListener);
+        this.#hotkeyListener = null;
+    }
+    #removeById(id, _reason) {
+        this.#byId.delete(id);
+        this.#entries.update((arr) => arr.filter((e) => e.id !== id));
+    }
+    #instance(entry) {
+        const ref = entry.ref;
+        return {
+            id: entry.id,
+            get config() {
+                return ref.config();
+            },
+            dismiss(reason = 'manual') {
+                ref.dismiss(reason);
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastManager, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastManager, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Action button inside a toast (e.g. "Undo"). Apply on a
+ * `<button type="button">` so Space / Enter dispatch a native click.
+ *
+ * Clicking emits `(dismiss)` from the parent `[forToast]` with reason
+ * `'action'`. Wire your action handler with `(click)` on this element
+ * itself — the close fires after your handler runs (via event order).
+ *
+ * The action is the **sanctioned dismissal path even when the toast is
+ * `closable=false`**: a forced-action toast suppresses Escape / swipe / the
+ * close button but keeps the action button live so the user always has a way
+ * out through the control they are meant to use.
+ *
+ * Set `[altText]` for WCAG 2.2.1 compliance: the visible label (e.g.
+ * "Undo") rarely carries enough context to recover the action once the
+ * toast disappears. The alt text replaces the toast's automatic live
+ * announcement with a self-contained string, e.g. `altText="Undo (Cmd+Z)"`.
+ * When at least one action carries an alt text, the parent toast routes
+ * its announcement through `LiveAnnouncer` and silences the host
+ * `aria-live` to avoid a duplicate readout.
+ */
+class ForToastAction {
+    ctx = injectToastContext('ForToastAction');
+    /**
+     * Self-contained text read aloud in place of the visible label so the
+     * user knows how to recover the action after the toast is gone. Required
+     * for time-limited toasts per WCAG 2.2.1; defaults to `''` (no alt text).
+     */
+    altText = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "altText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = { altText: this.altText };
+        registerHandle(handle, (h) => this.ctx.registerAction(h), (h) => this.ctx.unregisterAction(h));
+    }
+    onClick() {
+        this.ctx.requestClose('action');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastAction, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForToastAction, isStandalone: true, selector: "[forToastAction]", inputs: { altText: { classPropertyName: "altText", publicName: "altText", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" } }, exportAs: ["forToastAction"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToastAction]',
+                    exportAs: 'forToastAction',
+                    host: {
+                        type: 'button',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { altText: [{ type: i0.Input, args: [{ isSignal: true, alias: "altText", required: false }] }] } });
+
+/**
+ * Close button inside a toast. Apply on a `<button type="button">` so
+ * Space / Enter dispatch a native click. Clicking emits `(dismiss)` from
+ * the parent `[forToast]` with reason `'manual'`.
+ *
+ * The host carries `aria-label="Close"` by default; override with your
+ * own `[attr.aria-label]` when the toast's language requires localization.
+ */
+class ForToastClose {
+    ctx = injectToastContext('ForToastClose');
+    onClick() {
+        this.ctx.requestClose('manual');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForToastClose, isStandalone: true, selector: "[forToastClose]", host: { attributes: { "type": "button", "aria-label": "Close" }, listeners: { "click": "onClick()" } }, exportAs: ["forToastClose"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToastClose]',
+                    exportAs: 'forToastClose',
+                    host: {
+                        type: 'button',
+                        'aria-label': 'Close',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+/**
+ * Supplementary description for the toast. Registers its generated id
+ * with the parent `[forToast]` so `aria-describedby` is wired automatically.
+ */
+class ForToastDescription {
+    #ctx = injectToastContext('ForToastDescription');
+    #host = inject(ElementRef);
+    id = resolveHostId(this.#host.nativeElement, 'for-toast-description');
+    #text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = { id: this.id, text: this.#text.asReadonly() };
+        registerHandle(handle, (h) => this.#ctx.registerDescription(h), (h) => this.#ctx.unregisterDescription(h));
+        afterEveryRender(() => {
+            const next = (this.#host.nativeElement.textContent ?? '').trim();
+            if (next !== this.#text()) {
+                this.#text.set(next);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForToastDescription, isStandalone: true, selector: "[forToastDescription]", host: { properties: { "id": "id" } }, exportAs: ["forToastDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToastDescription]',
+                    exportAs: 'forToastDescription',
+                    host: {
+                        '[id]': 'id',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @internal Exposes the element injector at a child of the row's `[forToast]`
+ * element so a consumer-supplied toast `template` can be rendered with the
+ * `[forToast]` injection context in scope.
+ *
+ * Angular's `ngTemplateOutlet` renders a template against its *declaration*
+ * injector (the consumer's component, where `<ng-template>` was written), not
+ * the insertion point — so `[forToastTitle]` / `[forToastDescription]` /
+ * `[forToastAction]` / `[forToastClose]`, which `inject(FOR_TOAST_CONTEXT)`,
+ * would fail to resolve the row's `ForToast`.
+ *
+ * This directive sits on the same `<ng-container>` as the `ngTemplateOutlet`,
+ * inside the row's `[forToast]` element, so its own element injector already
+ * resolves `FOR_TOAST_CONTEXT`. The viewport feeds that injector to
+ * `[ngTemplateOutletInjector]`, making the rendered template inherit it and
+ * restoring the automatic `aria-labelledby` / `aria-describedby` / close-reason
+ * wiring for the helper directives inside the custom template — without adding
+ * a wrapper element to the consumer's markup.
+ */
+class ForToastOutlet {
+    /**
+     * Element injector resolving `FOR_TOAST_CONTEXT` for the enclosing toast
+     * row. Passed to `[ngTemplateOutletInjector]` so helper directives inside a
+     * custom template wire a11y exactly as in the default shape.
+     */
+    injector = inject(Injector);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForToastOutlet, isStandalone: true, selector: "[forToastOutlet]", exportAs: ["forToastOutlet"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToastOutlet]',
+                    exportAs: 'forToastOutlet',
+                }]
+        }] });
+
+/**
+ * Element holding the toast's accessible name. Registers its generated id
+ * with the parent `[forToast]` so `aria-labelledby` is wired automatically.
+ * Apply on whatever heading element fits (`<strong>`, `<h2>`, `<div>`).
+ */
+class ForToastTitle {
+    #ctx = injectToastContext('ForToastTitle');
+    #host = inject(ElementRef);
+    id = resolveHostId(this.#host.nativeElement, 'for-toast-title');
+    #text = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#text" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = { id: this.id, text: this.#text.asReadonly() };
+        registerHandle(handle, (h) => this.#ctx.registerLabel(h), (h) => this.#ctx.unregisterLabel(h));
+        afterEveryRender(() => {
+            const next = (this.#host.nativeElement.textContent ?? '').trim();
+            if (next !== this.#text()) {
+                this.#text.set(next);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForToastTitle, isStandalone: true, selector: "[forToastTitle]", host: { properties: { "id": "id" } }, exportAs: ["forToastTitle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastTitle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forToastTitle]',
+                    exportAs: 'forToastTitle',
+                    host: {
+                        '[id]': 'id',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Mounted once near the root of the app — typically inside `app.html`.
+ * Listens to `ForToastManager.toasts()` and renders each programmatic
+ * toast inline. Position the viewport from CSS (`position: fixed`,
+ * `top|bottom`, `left|right`) — the directive doesn't impose any.
+ *
+ * Custom rendering: if a toast's config has `template`, that
+ * `TemplateRef<ForToastTemplateContext>` is used instead of the default
+ * title / description / action / close shape. The template receives
+ * `$implicit: instance` and `data: instance.config.data`, and is rendered
+ * with the `[forToast]` injection context in scope (via `ForToastOutlet`),
+ * so `[forToastTitle]` / `[forToastDescription]` / `[forToastAction]` /
+ * `[forToastClose]` keep their automatic a11y / close wiring inside it.
+ *
+ * Per-toast classes: a config's `class` / `classList` is applied to the
+ * rendered toast root, merged with the directive's own host attributes.
+ *
+ * Enter / exit animations: a toast renders inside this viewport's `@for`, so a
+ * `[animate.leave]` on the row defers the unmount natively — the toast stays
+ * mounted until its exit animation settles. Supply the class per-toast with
+ * `show({ animateLeave })` or set a viewport-wide default with `[animateLeave]`
+ * (per-toast wins); `[animateEnter]` mirrors it for class-applied entrances.
+ *
+ * Hotkey: pressing the configured `hotkey` (default `F6`) anywhere in the
+ * document focuses the first toast. Override per-viewport with `[hotkey]`
+ * or globally with `provideForToastDefaults({ hotkey: '…' })`. The listener
+ * is owned once by `ForToastManager`, so the hotkey never double-fires when
+ * several viewports are mounted.
+ *
+ * Regions: a viewport renders only toasts whose `region` matches its
+ * `[region]` input (default {@link DEFAULT_TOAST_REGION}), so independent
+ * viewports — e.g. top-right system notifications and bottom-center action
+ * confirmations — are a first-class feature. If two viewports share a region,
+ * only the first one mounted renders it (the rest stay dormant and warn in dev
+ * mode), so a single `show()` always produces exactly one toast node.
+ *
+ * Accessibility: the host carries `role="region"` and an `aria-label`
+ * (default `Notifications`). Toast nodes themselves carry their own
+ * `role` (`status` / `alert`) and `aria-live`, so screen readers
+ * announce updates without forcing focus.
+ */
+class ForToastViewport {
+    #manager = inject(ForToastManager);
+    #host = inject(ElementRef);
+    /** Accessible name for the viewport region. Default `'Notifications'`. */
+    label = input('Notifications', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * The toast region this viewport renders. Only toasts whose `region` matches
+     * appear here; toasts opened without a `region` use
+     * {@link DEFAULT_TOAST_REGION}, so the common single-viewport setup needs no
+     * `[region]` at all. Mount viewports with distinct `[region]` values to drive
+     * independent toast regions from one global `ForToastManager`.
+     */
+    region = input(DEFAULT_TOAST_REGION, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    /** Hotkey to focus the viewport. Default reads from `provideForToastDefaults`, falling back to `F6`. */
+    hotkey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hotkey" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of toasts rendered at once. Older toasts collapse out of
+     * the visible stack but stay in `manager.toasts()` until dismissed. When
+     * unset (`null`, the default), the viewport falls back to the global
+     * `provideForToastDefaults({ maxVisible })` value (itself `Infinity` unless
+     * configured, which renders all live toasts). Setting `[maxVisible]`
+     * per-viewport overrides the global default.
+     *
+     * **Overflow is parked, not auto-expired.** A toast pushed out of the
+     * visible window is unmounted, so its auto-dismiss timer is not running
+     * while it waits. It re-enters the window when a newer toast is dismissed,
+     * and its `duration` countdown then restarts from full (a fresh `[forToast]`
+     * mounts). Cap with `maxVisible` for layout, but dismiss explicitly — via
+     * `ForToastRef.dismiss()`, `dismissAll()`, or the action / close button —
+     * if you need overflow toasts to clear on a deadline.
+     */
+    maxVisible = input(null, { ...(ngDevMode ? { debugName: "maxVisible" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? null : numberAttribute(v)) });
+    /**
+     * Default swipe direction(s) applied to every programmatic toast that
+     * doesn't override `swipeDirection` in its own config. `null` (default)
+     * keeps swipe disabled unless explicitly opted into per-toast.
+     */
+    swipeDirection = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "swipeDirection" }] : /* istanbul ignore next */ []));
+    /**
+     * Default dismiss-distance in pixels applied to every programmatic toast
+     * that doesn't override `swipeThreshold` in its own config.
+     */
+    swipeThreshold = input(50, { ...(ngDevMode ? { debugName: "swipeThreshold" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * Default `animate.enter` class applied to every programmatic toast that
+     * doesn't set `animateEnter` in its own config. Empty (default) plays no
+     * class-applied enter animation — a plain CSS `@keyframes` on `[forToast]`
+     * already runs on mount without it.
+     */
+    animateEnter = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animateEnter" }] : /* istanbul ignore next */ []));
+    /**
+     * Default `animate.leave` class applied to every programmatic toast that
+     * doesn't set `animateLeave` in its own config. Empty (default) unmounts the
+     * toast synchronously on dismiss; set it (or per-toast `animateLeave`) to
+     * keep the toast mounted until its exit animation settles before it leaves
+     * the DOM.
+     */
+    animateLeave = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animateLeave" }] : /* istanbul ignore next */ []));
+    defaultDuration = computed(() => this.#manager.defaultDuration(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultDuration" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved `maxVisible` limit: the per-viewport `[maxVisible]` when set,
+     * otherwise the global `provideForToastDefaults({ maxVisible })` value.
+     */
+    resolvedMaxVisible = computed(() => {
+        const own = this.maxVisible();
+        return own ?? this.#manager.defaultMaxVisible();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMaxVisible" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this viewport is the active renderer for its region. The manager
+     * grants this to the first viewport mounted per region; dormant viewports
+     * render nothing so a single `show()` yields exactly one toast node.
+     */
+    #active;
+    visible = computed(() => {
+        if (!this.#active()) {
+            return [];
+        }
+        const region = this.region();
+        const all = this.#manager.toasts().filter((toast) => toast.config.region === region);
+        const resolved = this.resolvedMaxVisible();
+        const limit = Number.isFinite(resolved) ? resolved : all.length;
+        if (all.length <= limit) {
+            return all;
+        }
+        // Newest toasts win; older ones drop out of the visible window.
+        return all.slice(all.length - limit);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const registration = {
+            region: this.region,
+            hotkey: () => this.hotkey() || this.#manager.hotkey(),
+            focusFirst: () => this.#focusFirst(),
+        };
+        this.#active = computed(() => this.#manager.isActiveViewport(registration), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#active" }] : /* istanbul ignore next */ []));
+        const unregister = this.#manager.registerViewport(registration);
+        inject(DestroyRef).onDestroy(unregister);
+        if (isDevMode()) {
+            // Warn once each time this viewport becomes dormant because another
+            // viewport already owns its region — the silent-duplication footgun the
+            // region API exists to remove.
+            let warned = false;
+            effect(() => {
+                if (this.#active()) {
+                    warned = false;
+                }
+                else if (!warned) {
+                    warned = true;
+                    console.warn(`[forty-cdk/toast] A <for-toast-viewport> for region "${this.region()}" is already mounted; ` +
+                        `this one stays inactive to avoid duplicate toasts. Give it a distinct [region] for an independent toast region.`);
+                }
+            });
+        }
+    }
+    /** Focus the first rendered toast host. Returns `true` when focus moved. */
+    #focusFirst() {
+        const first = this.#host.nativeElement.querySelector('[forToast]');
+        if (first) {
+            first.focus();
+            return true;
+        }
+        return false;
+    }
+    onClose(toast, reason) {
+        toast.dismiss(reason);
+    }
+    /**
+     * Consumer class(es) for a toast row, resolved from its config's `class` /
+     * `classList`. Returns `''` when neither is set so the `[class]` host
+     * binding emits no extra tokens and leaves the directive's own host
+     * attributes untouched.
+     */
+    toastClass(toast) {
+        return resolveConfigClass(toast.config) ?? '';
+    }
+    /**
+     * `animate.enter` class for a toast row: its per-toast `animateEnter` config
+     * when set, otherwise the viewport-level `[animateEnter]`. Empty when neither
+     * is set.
+     */
+    toastAnimateEnter(toast) {
+        return toast.config.animateEnter ?? this.animateEnter();
+    }
+    /**
+     * `animate.leave` class for a toast row: its per-toast `animateLeave` config
+     * when set, otherwise the viewport-level `[animateLeave]`. Empty when neither
+     * is set, which keeps the toast's unmount synchronous on dismiss.
+     */
+    toastAnimateLeave(toast) {
+        return toast.config.animateLeave ?? this.animateLeave();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastViewport, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ForToastViewport, isStandalone: true, selector: "for-toast-viewport, [forToastViewport]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, region: { classPropertyName: "region", publicName: "region", isSignal: true, isRequired: false, transformFunction: null }, hotkey: { classPropertyName: "hotkey", publicName: "hotkey", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, swipeDirection: { classPropertyName: "swipeDirection", publicName: "swipeDirection", isSignal: true, isRequired: false, transformFunction: null }, swipeThreshold: { classPropertyName: "swipeThreshold", publicName: "swipeThreshold", isSignal: true, isRequired: false, transformFunction: null }, animateEnter: { classPropertyName: "animateEnter", publicName: "animateEnter", isSignal: true, isRequired: false, transformFunction: null }, animateLeave: { classPropertyName: "animateLeave", publicName: "animateLeave", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "region", "tabindex": "-1" }, properties: { "attr.aria-label": "label()", "attr.data-region": "region()", "attr.data-toast-count": "visible().length" } }, exportAs: ["forToastViewport"], ngImport: i0, template: `
+    @for (toast of visible(); track toast.id; let i = $index) {
+      <div
+        forToast
+        [class]="toastClass(toast)"
+        [animate.enter]="toastAnimateEnter(toast)"
+        [animate.leave]="toastAnimateLeave(toast)"
+        [variant]="toast.config.variant ?? 'info'"
+        [duration]="toast.config.duration ?? defaultDuration()"
+        [closable]="toast.config.closable !== false"
+        [swipeDirection]="toast.config.swipeDirection ?? swipeDirection()"
+        [swipeThreshold]="toast.config.swipeThreshold ?? swipeThreshold()"
+        [attr.data-front-stack-index]="i"
+        (dismiss)="onClose(toast, $event)"
+      >
+        @if (toast.config.template; as template) {
+          <ng-container
+            forToastOutlet
+            #outlet="forToastOutlet"
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{ $implicit: toast, data: toast.config.data }"
+            [ngTemplateOutletInjector]="outlet.injector"
+          />
+        } @else {
+          @if (toast.config.title) {
+            <div forToastTitle>{{ toast.config.title }}</div>
+          }
+          @if (toast.config.description) {
+            <div forToastDescription>{{ toast.config.description }}</div>
+          }
+          @if (toast.config.action; as action) {
+            <button forToastAction (click)="action.onClick()">
+              {{ action.label }}
+            </button>
+          }
+          @if (toast.config.closable !== false) {
+            <button forToastClose>×</button>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ForToast, selector: "[forToast]", inputs: ["variant", "duration", "closable", "swipeDirection", "swipeThreshold"], outputs: ["dismiss", "swipeStart", "swipeMove", "swipeEnd", "swipeCancel"], exportAs: ["forToast"] }, { kind: "directive", type: ForToastOutlet, selector: "[forToastOutlet]", exportAs: ["forToastOutlet"] }, { kind: "directive", type: ForToastTitle, selector: "[forToastTitle]", exportAs: ["forToastTitle"] }, { kind: "directive", type: ForToastDescription, selector: "[forToastDescription]", exportAs: ["forToastDescription"] }, { kind: "directive", type: ForToastAction, selector: "[forToastAction]", inputs: ["altText"], exportAs: ["forToastAction"] }, { kind: "directive", type: ForToastClose, selector: "[forToastClose]", exportAs: ["forToastClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForToastViewport, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'for-toast-viewport, [forToastViewport]',
+                    exportAs: 'forToastViewport',
+                    imports: [
+                        NgTemplateOutlet,
+                        ForToast,
+                        ForToastOutlet,
+                        ForToastTitle,
+                        ForToastDescription,
+                        ForToastAction,
+                        ForToastClose,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'region',
+                        '[attr.aria-label]': 'label()',
+                        '[attr.data-region]': 'region()',
+                        tabindex: '-1',
+                        '[attr.data-toast-count]': 'visible().length',
+                    },
+                    template: `
+    @for (toast of visible(); track toast.id; let i = $index) {
+      <div
+        forToast
+        [class]="toastClass(toast)"
+        [animate.enter]="toastAnimateEnter(toast)"
+        [animate.leave]="toastAnimateLeave(toast)"
+        [variant]="toast.config.variant ?? 'info'"
+        [duration]="toast.config.duration ?? defaultDuration()"
+        [closable]="toast.config.closable !== false"
+        [swipeDirection]="toast.config.swipeDirection ?? swipeDirection()"
+        [swipeThreshold]="toast.config.swipeThreshold ?? swipeThreshold()"
+        [attr.data-front-stack-index]="i"
+        (dismiss)="onClose(toast, $event)"
+      >
+        @if (toast.config.template; as template) {
+          <ng-container
+            forToastOutlet
+            #outlet="forToastOutlet"
+            [ngTemplateOutlet]="template"
+            [ngTemplateOutletContext]="{ $implicit: toast, data: toast.config.data }"
+            [ngTemplateOutletInjector]="outlet.injector"
+          />
+        } @else {
+          @if (toast.config.title) {
+            <div forToastTitle>{{ toast.config.title }}</div>
+          }
+          @if (toast.config.description) {
+            <div forToastDescription>{{ toast.config.description }}</div>
+          }
+          @if (toast.config.action; as action) {
+            <button forToastAction (click)="action.onClick()">
+              {{ action.label }}
+            </button>
+          }
+          @if (toast.config.closable !== false) {
+            <button forToastClose>×</button>
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], region: [{ type: i0.Input, args: [{ isSignal: true, alias: "region", required: false }] }], hotkey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hotkey", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], swipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeDirection", required: false }] }], swipeThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipeThreshold", required: false }] }], animateEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateEnter", required: false }] }], animateLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "animateLeave", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_TOAST_REGION, FOR_TOAST_CONTEXT, FOR_TOAST_DEFAULTS, ForToast, ForToastAction, ForToastClose, ForToastDescription, ForToastManager, ForToastRef, ForToastTitle, ForToastViewport, provideForToastDefaults };
+//# sourceMappingURL=forty-cdk-toast.mjs.map