ngx-com 0.0.19 → 0.0.21

package/fesm2022/ngx-com-components-toast.mjs

@@ -0,0 +1,783 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component, InjectionToken, inject, Injector, DestroyRef, PLATFORM_ID, signal, Injectable } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { Subject } from 'rxjs';
+import { ComIcon } from 'ngx-com/components/icon';
+import { cva } from 'class-variance-authority';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * Reference to an active toast notification.
+ * Returned by `ComToastService` methods for programmatic control.
+ */
+class ComToastRef {
+    dismissSubject = new Subject();
+    actionSubject = new Subject();
+    dismissFn;
+    dismissed = false;
+    constructor(dismissFn) {
+        this.dismissFn = dismissFn;
+    }
+    /** Programmatically dismiss the toast. */
+    dismiss() {
+        if (!this.dismissed) {
+            this.dismissFn();
+        }
+    }
+    /** Emits once when the toast is dismissed (for any reason). */
+    afterDismissed() {
+        return this.dismissSubject.asObservable();
+    }
+    /** Emits when the action button is clicked. */
+    afterAction() {
+        return this.actionSubject.asObservable();
+    }
+    /** @internal */
+    _notifyDismissed(event) {
+        if (this.dismissed)
+            return;
+        this.dismissed = true;
+        this.dismissSubject.next(event);
+        this.dismissSubject.complete();
+        this.actionSubject.complete();
+    }
+    /** @internal */
+    _notifyAction() {
+        this.actionSubject.next();
+    }
+}
+
+/**
+ * CVA variants for an individual toast card.
+ *
+ * @tokens `--color-success`, `--color-success-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-border`, `--shadow-lg`, `--radius-card`
+ */
+const toastVariants = cva([
+    'flex',
+    'w-full',
+    'max-w-sm',
+    'items-start',
+    'gap-3',
+    'rounded-card',
+    'border',
+    'p-4',
+    'shadow-lg',
+    'pointer-events-auto',
+    'relative',
+    'overflow-hidden',
+], {
+    variants: {
+        type: {
+            success: 'bg-success text-success-foreground border-success',
+            warn: 'bg-warn-subtle text-warn-subtle-foreground border-warn',
+            error: 'bg-warn text-warn-foreground border-warn',
+            info: 'bg-primary-subtle text-primary-subtle-foreground border-primary',
+        },
+    },
+    defaultVariants: {
+        type: 'info',
+    },
+});
+/**
+ * CVA variants for the toast container positioning.
+ */
+const toastContainerVariants = cva([
+    'flex',
+    'gap-3',
+    'pointer-events-none',
+    'max-h-screen',
+    'p-4',
+], {
+    variants: {
+        position: {
+            'top-right': 'flex-col items-end',
+            'top-left': 'flex-col items-start',
+            'top-center': 'flex-col items-center',
+            'bottom-right': 'flex-col-reverse items-end',
+            'bottom-left': 'flex-col-reverse items-start',
+            'bottom-center': 'flex-col-reverse items-center',
+        },
+    },
+    defaultVariants: {
+        position: 'bottom-right',
+    },
+});
+/**
+ * CVA variants for the toast progress bar.
+ */
+const toastProgressVariants = cva([
+    'absolute',
+    'bottom-0',
+    'left-0',
+    'h-0.5',
+    'rounded-full',
+], {
+    variants: {
+        type: {
+            success: 'bg-success-foreground/30',
+            warn: 'bg-warn-subtle-foreground/30',
+            error: 'bg-warn-foreground/30',
+            info: 'bg-primary-subtle-foreground/30',
+        },
+    },
+    defaultVariants: {
+        type: 'info',
+    },
+});
+/**
+ * CVA variants for the toast close button.
+ *
+ * @tokens `--color-ring`, `--radius-card`
+ */
+const toastCloseButtonVariants = cva([
+    'shrink-0',
+    'rounded-card',
+    'p-0.5',
+    'transition-colors',
+    'outline-none',
+    'focus-visible:outline-2',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-[--color-ring]',
+], {
+    variants: {
+        type: {
+            success: 'text-success-foreground/70 hover:text-success-foreground',
+            warn: 'text-warn-subtle-foreground/70 hover:text-warn-subtle-foreground',
+            error: 'text-warn-foreground/70 hover:text-warn-foreground',
+            info: 'text-primary-subtle-foreground/70 hover:text-primary-subtle-foreground',
+        },
+    },
+    defaultVariants: {
+        type: 'info',
+    },
+});
+
+let toastIdCounter = 0;
+/**
+ * Generate a unique ID for a toast notification.
+ */
+function generateToastId() {
+    return ++toastIdCounter;
+}
+/** Default Lucide icon names per toast type. */
+const DEFAULT_TOAST_ICONS = {
+    success: 'circle-check',
+    warn: 'triangle-alert',
+    error: 'circle-x',
+    info: 'info',
+};
+
+/**
+ * Internal toast notification component rendered inside the container.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-success`, `--color-success-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-border`, `--shadow-lg`, `--radius-card`, `--color-ring`
+ */
+class ComToastComponent {
+    /** The toast state, set by the container. */
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Emitted when the toast should be dismissed. */
+    onDismiss = output();
+    /** Emitted when the action button is clicked. */
+    onAction = output();
+    /** Emitted when the mouse enters the toast. */
+    mouseEnter = output();
+    /** Emitted when the mouse leaves the toast. */
+    mouseLeave = output();
+    /** Emitted when the exit animation completes. */
+    animationDone = output();
+    /** Resolved icon name. */
+    resolvedIcon = computed(() => this.state().data.icon ?? DEFAULT_TOAST_ICONS[this.state().type] ?? 'info', ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
+    /** ARIA role based on toast type. */
+    ariaRole = computed(() => this.state().type === 'error' ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "ariaRole" }] : []));
+    /** ARIA live region politeness. */
+    ariaLive = computed(() => this.state().type === 'error' ? 'assertive' : 'polite', ...(ngDevMode ? [{ debugName: "ariaLive" }] : []));
+    /** Computed toast card classes. */
+    toastClasses = computed(() => mergeClasses(toastVariants({ type: this.state().type }), this.state().visible
+        ? 'animate-in fade-in-0 slide-in-from-bottom-2'
+        : 'animate-out fade-out-0 slide-out-to-right-full'), ...(ngDevMode ? [{ debugName: "toastClasses" }] : []));
+    /** Computed progress bar classes. */
+    progressClasses = computed(() => mergeClasses(toastProgressVariants({ type: this.state().type })), ...(ngDevMode ? [{ debugName: "progressClasses" }] : []));
+    /** Computed close button classes. */
+    closeButtonClasses = computed(() => mergeClasses(toastCloseButtonVariants({ type: this.state().type })), ...(ngDevMode ? [{ debugName: "closeButtonClasses" }] : []));
+    /** Template context for custom templates. */
+    templateContext = computed(() => ({
+        $implicit: this.state().data,
+        dismiss: () => this.onDismiss.emit(this.state().id),
+        action: () => this.onAction.emit(this.state().id),
+    }), ...(ngDevMode ? [{ debugName: "templateContext" }] : []));
+    onAnimationEnd() {
+        if (!this.state().visible) {
+            this.animationDone.emit(this.state().id);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComToastComponent, isStandalone: true, selector: "com-toast", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onDismiss: "onDismiss", onAction: "onAction", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", animationDone: "animationDone" }, ngImport: i0, template: `
+    <div
+      [class]="toastClasses()"
+      [attr.role]="ariaRole()"
+      [attr.aria-live]="ariaLive()"
+      [attr.data-state]="state().visible ? 'open' : 'closed'"
+      (animationend)="onAnimationEnd()"
+    >
+      @if (state().data.customTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="state().data.customTemplate!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <com-icon
+          [name]="resolvedIcon()"
+          size="md"
+          class="mt-0.5 shrink-0"
+          aria-hidden="true"
+        />
+        <div class="flex-1 min-w-0">
+          @if (state().data.title) {
+            <p class="text-sm font-semibold">{{ state().data.title }}</p>
+          }
+          <p class="text-sm" [class.mt-1]="state().data.title">
+            {{ state().data.message }}
+          </p>
+          @if (state().data.action) {
+            <button
+              type="button"
+              class="mt-2 text-sm font-medium underline underline-offset-4
+                     outline-none
+                     focus-visible:outline-2
+                     focus-visible:outline-offset-2
+                     focus-visible:outline-[--color-ring]"
+              (click)="onAction.emit(state().id)"
+            >
+              {{ state().data.action!.label }}
+            </button>
+          }
+        </div>
+        @if (state().showClose) {
+          <button
+            type="button"
+            [class]="closeButtonClasses()"
+            aria-label="Dismiss notification"
+            (click)="onDismiss.emit(state().id)"
+          >
+            <com-icon name="x" size="sm" aria-hidden="true" />
+          </button>
+        }
+      }
+      @if (state().showProgress && state().duration > 0) {
+        <div
+          [class]="progressClasses()"
+          [style.width.%]="state().remainingPercent"
+        ></div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-translate-x: 0;--tw-enter-translate-y: 0}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-translate-x: 0;--tw-exit-translate-y: 0}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-toast', template: `
+    <div
+      [class]="toastClasses()"
+      [attr.role]="ariaRole()"
+      [attr.aria-live]="ariaLive()"
+      [attr.data-state]="state().visible ? 'open' : 'closed'"
+      (animationend)="onAnimationEnd()"
+    >
+      @if (state().data.customTemplate) {
+        <ng-container
+          [ngTemplateOutlet]="state().data.customTemplate!"
+          [ngTemplateOutletContext]="templateContext()"
+        />
+      } @else {
+        <com-icon
+          [name]="resolvedIcon()"
+          size="md"
+          class="mt-0.5 shrink-0"
+          aria-hidden="true"
+        />
+        <div class="flex-1 min-w-0">
+          @if (state().data.title) {
+            <p class="text-sm font-semibold">{{ state().data.title }}</p>
+          }
+          <p class="text-sm" [class.mt-1]="state().data.title">
+            {{ state().data.message }}
+          </p>
+          @if (state().data.action) {
+            <button
+              type="button"
+              class="mt-2 text-sm font-medium underline underline-offset-4
+                     outline-none
+                     focus-visible:outline-2
+                     focus-visible:outline-offset-2
+                     focus-visible:outline-[--color-ring]"
+              (click)="onAction.emit(state().id)"
+            >
+              {{ state().data.action!.label }}
+            </button>
+          }
+        </div>
+        @if (state().showClose) {
+          <button
+            type="button"
+            [class]="closeButtonClasses()"
+            aria-label="Dismiss notification"
+            (click)="onDismiss.emit(state().id)"
+          >
+            <com-icon name="x" size="sm" aria-hidden="true" />
+          </button>
+        }
+      }
+      @if (state().showProgress && state().duration > 0) {
+        <div
+          [class]="progressClasses()"
+          [style.width.%]="state().remainingPercent"
+        ></div>
+      }
+    </div>
+  `, imports: [NgTemplateOutlet, ComIcon], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}[data-state=open]{--tw-enter-opacity: 0;--tw-enter-translate-x: 0;--tw-enter-translate-y: 0}[data-state=closed]{--tw-exit-opacity: 0;--tw-exit-translate-x: 0;--tw-exit-translate-y: 0}@media(prefers-reduced-motion:reduce){[data-state=open],[data-state=closed]{animation:none}}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], onDismiss: [{ type: i0.Output, args: ["onDismiss"] }], onAction: [{ type: i0.Output, args: ["onAction"] }], mouseEnter: [{ type: i0.Output, args: ["mouseEnter"] }], mouseLeave: [{ type: i0.Output, args: ["mouseLeave"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }] } });
+
+/**
+ * Injection token for global toast configuration.
+ */
+const COM_TOAST_CONFIG = new InjectionToken('COM_TOAST_CONFIG');
+/**
+ * Injection token for internal container communication.
+ * @internal
+ */
+const COM_TOAST_CONTAINER_DATA = new InjectionToken('COM_TOAST_CONTAINER_DATA');
+/**
+ * Provides global toast configuration.
+ *
+ * @example
+ * ```typescript
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideComToastConfig({ position: 'top-center', duration: 3000 }),
+ *   ],
+ * });
+ * ```
+ */
+function provideComToastConfig(config) {
+    return { provide: COM_TOAST_CONFIG, useValue: config };
+}
+
+/**
+ * Internal toast container component that manages positioning and stacking.
+ *
+ * @internal Not exported in public API
+ *
+ * @tokens `--color-success`, `--color-success-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`,
+ *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-border`, `--shadow-lg`, `--radius-card`
+ */
+class ComToastContainerComponent {
+    containerData = inject(COM_TOAST_CONTAINER_DATA);
+    /** Active toast states, read from the service's signal. */
+    toasts = computed(() => this.containerData.toasts(), ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    /** Computed container positioning classes. */
+    containerClasses = computed(() => mergeClasses(toastContainerVariants({ position: this.containerData.position() })), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    onEscapeKey() {
+        this.containerData.onDismissLatest();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComToastContainerComponent, isStandalone: true, selector: "com-toast-container", host: { attributes: { "tabindex": "-1" }, listeners: { "keydown.escape": "onEscapeKey()" } }, ngImport: i0, template: `
+    <div
+      [class]="containerClasses()"
+      role="region"
+      aria-label="Notifications"
+    >
+      @for (toast of toasts(); track toast.id) {
+        <com-toast
+          [state]="toast"
+          (onDismiss)="containerData.onDismiss($event)"
+          (onAction)="containerData.onAction($event)"
+          (mouseEnter)="containerData.onMouseEnter(toast.id)"
+          (mouseLeave)="containerData.onMouseLeave(toast.id)"
+          (animationDone)="containerData.onAnimationDone($event)"
+        />
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "component", type: ComToastComponent, selector: "com-toast", inputs: ["state"], outputs: ["onDismiss", "onAction", "mouseEnter", "mouseLeave", "animationDone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-toast-container', host: {
+                        '(keydown.escape)': 'onEscapeKey()',
+                        tabindex: '-1',
+                    }, template: `
+    <div
+      [class]="containerClasses()"
+      role="region"
+      aria-label="Notifications"
+    >
+      @for (toast of toasts(); track toast.id) {
+        <com-toast
+          [state]="toast"
+          (onDismiss)="containerData.onDismiss($event)"
+          (onAction)="containerData.onAction($event)"
+          (mouseEnter)="containerData.onMouseEnter(toast.id)"
+          (mouseLeave)="containerData.onMouseLeave(toast.id)"
+          (animationDone)="containerData.onAnimationDone($event)"
+        />
+      }
+    </div>
+  `, imports: [ComToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
+        }] });
+
+/** Default durations by toast type. */
+const DEFAULT_DURATION = {
+    success: 5000,
+    warn: 5000,
+    error: 0,
+    info: 5000,
+};
+/** Fallback timeout for exit animation removal when animationend doesn't fire. */
+const ANIMATION_FALLBACK_MS = 200;
+/**
+ * Service for creating toast notifications imperatively.
+ *
+ * @example
+ * ```typescript
+ * const toast = inject(ComToastService);
+ * toast.success('File uploaded successfully.');
+ * toast.error('Failed to save.', 'Error');
+ *
+ * const ref = toast.show({ type: 'info', message: 'Item deleted.', action: { label: 'Undo' } });
+ * ref.afterAction().subscribe(() => undoDelete());
+ * ```
+ */
+class ComToastService {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    platformId = inject(PLATFORM_ID);
+    document = inject(DOCUMENT);
+    globalConfig = inject(COM_TOAST_CONFIG, { optional: true });
+    overlayRef = null;
+    toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
+    position;
+    timers = new Map();
+    refs = new Map();
+    animationFallbacks = new Map();
+    dismissReasons = new Map();
+    rafHandle = null;
+    config;
+    constructor() {
+        this.config = {
+            position: 'bottom-right',
+            duration: 5000,
+            maxVisible: 5,
+            pauseOnHover: true,
+            showProgress: true,
+            showClose: true,
+            ...this.globalConfig,
+        };
+        this.position = signal(this.config.position, ...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    /**
+     * Show a toast notification with full configuration.
+     */
+    show(data) {
+        this.ensureContainer();
+        const id = generateToastId();
+        const type = data.type ?? 'info';
+        const duration = data.duration ?? DEFAULT_DURATION[type] ?? this.config.duration;
+        const showProgress = data.showProgress ?? this.config.showProgress;
+        const showClose = data.showClose ?? this.config.showClose;
+        const ref = new ComToastRef(() => this.dismiss(id, 'manual'));
+        this.refs.set(id, ref);
+        const state = {
+            id,
+            data,
+            type,
+            duration,
+            showProgress,
+            showClose,
+            visible: true,
+            remainingPercent: 100,
+        };
+        this.toasts.update((list) => [...list, state]);
+        this.enforceMaxVisible();
+        if (duration > 0) {
+            this.startTimer(id, duration);
+        }
+        return ref;
+    }
+    /** Show a success toast. */
+    success(message, title) {
+        return this.showByType('success', message, title);
+    }
+    /** Show a warning toast. */
+    warn(message, title) {
+        return this.showByType('warn', message, title);
+    }
+    /** Show an error toast. */
+    error(message, title) {
+        return this.showByType('error', message, title);
+    }
+    /** Show an info toast. */
+    info(message, title) {
+        return this.showByType('info', message, title);
+    }
+    /** Dismiss all active toasts. */
+    dismissAll() {
+        for (const toast of this.toasts()) {
+            this.dismiss(toast.id, 'manual');
+        }
+    }
+    // ─── Private ───
+    showByType(type, message, title) {
+        const data = { type, message };
+        if (title !== undefined)
+            data.title = title;
+        return this.show(data);
+    }
+    ensureContainer() {
+        if (this.overlayRef || !isPlatformBrowser(this.platformId))
+            return;
+        const positionStrategy = this.buildPositionStrategy(this.config.position);
+        const containerData = {
+            toasts: this.toasts.asReadonly(),
+            position: this.position.asReadonly(),
+            onMouseEnter: (id) => this.pauseTimer(id),
+            onMouseLeave: (id) => this.resumeTimer(id),
+            onDismiss: (id) => this.dismiss(id, 'manual'),
+            onAction: (id) => this.handleAction(id),
+            onDismissLatest: () => this.dismissLatest(),
+            onAnimationDone: (id) => this.removeToast(id),
+        };
+        const containerInjector = Injector.create({
+            providers: [{ provide: COM_TOAST_CONTAINER_DATA, useValue: containerData }],
+            parent: this.injector,
+        });
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            hasBackdrop: false,
+            panelClass: 'com-toast-overlay',
+            disposeOnNavigation: false,
+        });
+        const portal = new ComponentPortal(ComToastContainerComponent, null, containerInjector);
+        this.overlayRef.attach(portal);
+    }
+    buildPositionStrategy(position) {
+        const strategy = this.overlay.position().global();
+        switch (position) {
+            case 'top-right':
+                return strategy.top('0').right('0');
+            case 'top-left':
+                return strategy.top('0').left('0');
+            case 'top-center':
+                return strategy.top('0').centerHorizontally();
+            case 'bottom-right':
+                return strategy.bottom('0').right('0');
+            case 'bottom-left':
+                return strategy.bottom('0').left('0');
+            case 'bottom-center':
+                return strategy.bottom('0').centerHorizontally();
+        }
+    }
+    dismiss(id, reason) {
+        this.clearTimer(id);
+        this.dismissReasons.set(id, reason);
+        // Trigger exit animation
+        this.updateToast(id, { visible: false });
+        // Set fallback timeout in case animationend doesn't fire
+        const fallback = setTimeout(() => this.removeToast(id), ANIMATION_FALLBACK_MS);
+        this.animationFallbacks.set(id, fallback);
+    }
+    removeToast(id) {
+        // Clear animation fallback
+        const fallback = this.animationFallbacks.get(id);
+        if (fallback) {
+            clearTimeout(fallback);
+            this.animationFallbacks.delete(id);
+        }
+        // Check if toast still exists (may have been removed already)
+        if (!this.toasts().some((t) => t.id === id))
+            return;
+        this.toasts.update((list) => list.filter((t) => t.id !== id));
+        const reason = this.dismissReasons.get(id) ?? 'auto';
+        this.dismissReasons.delete(id);
+        const ref = this.refs.get(id);
+        if (ref) {
+            ref._notifyDismissed({ reason });
+            this.refs.delete(id);
+        }
+        if (this.toasts().length === 0) {
+            this.disposeOverlay();
+        }
+    }
+    handleAction(id) {
+        const ref = this.refs.get(id);
+        if (ref) {
+            ref._notifyAction();
+        }
+        this.dismiss(id, 'action');
+    }
+    dismissLatest() {
+        const visible = this.toasts().filter((t) => t.visible);
+        const latest = visible[visible.length - 1];
+        if (latest) {
+            this.dismiss(latest.id, 'manual');
+        }
+    }
+    enforceMaxVisible() {
+        const currentToasts = this.toasts();
+        const visibleCount = currentToasts.filter((t) => t.visible).length;
+        if (visibleCount > this.config.maxVisible) {
+            const oldest = currentToasts.find((t) => t.visible);
+            if (oldest) {
+                this.dismiss(oldest.id, 'limit');
+            }
+        }
+    }
+    // ─── Timer (rAF) ───
+    startTimer(id, duration) {
+        const now = this.now();
+        this.timers.set(id, {
+            startTime: now,
+            elapsed: 0,
+            duration,
+            paused: false,
+            pausedAt: 0,
+        });
+        this.ensureRafLoop();
+    }
+    ensureRafLoop() {
+        if (this.rafHandle !== null)
+            return;
+        const win = this.document.defaultView;
+        if (!win)
+            return;
+        const tick = () => {
+            const now = this.now();
+            let needsUpdate = false;
+            for (const [id, timer] of this.timers) {
+                if (timer.paused)
+                    continue;
+                const elapsed = timer.elapsed + (now - timer.startTime);
+                const remaining = Math.max(0, 100 - (elapsed / timer.duration) * 100);
+                const rounded = Math.round(remaining);
+                // Find current state to compare
+                const toast = this.toasts().find((t) => t.id === id);
+                if (!toast || !toast.visible) {
+                    this.clearTimer(id);
+                    continue;
+                }
+                if (Math.round(toast.remainingPercent) !== rounded) {
+                    needsUpdate = true;
+                }
+                if (remaining <= 0) {
+                    this.clearTimer(id);
+                    this.dismiss(id, 'auto');
+                    needsUpdate = true;
+                }
+            }
+            // Batch-update all progress values in a single signal write
+            if (needsUpdate) {
+                const now2 = this.now();
+                this.toasts.update((list) => list.map((t) => {
+                    const timer = this.timers.get(t.id);
+                    if (!timer || timer.paused)
+                        return t;
+                    const elapsed = timer.elapsed + (now2 - timer.startTime);
+                    const remaining = Math.max(0, 100 - (elapsed / timer.duration) * 100);
+                    return { ...t, remainingPercent: remaining };
+                }));
+            }
+            // Continue loop if there are active timers
+            if (this.timers.size > 0) {
+                this.rafHandle = win.requestAnimationFrame(tick);
+            }
+            else {
+                this.rafHandle = null;
+            }
+        };
+        this.rafHandle = win.requestAnimationFrame(tick);
+    }
+    pauseTimer(id) {
+        if (!this.config.pauseOnHover)
+            return;
+        const timer = this.timers.get(id);
+        if (!timer || timer.paused)
+            return;
+        const now = this.now();
+        timer.elapsed += now - timer.startTime;
+        timer.paused = true;
+        timer.pausedAt = now;
+    }
+    resumeTimer(id) {
+        if (!this.config.pauseOnHover)
+            return;
+        const timer = this.timers.get(id);
+        if (!timer || !timer.paused)
+            return;
+        timer.paused = false;
+        timer.startTime = this.now();
+    }
+    clearTimer(id) {
+        this.timers.delete(id);
+    }
+    now() {
+        return this.document.defaultView?.performance.now() ?? Date.now();
+    }
+    // ─── Helpers ───
+    updateToast(id, patch) {
+        this.toasts.update((list) => list.map((t) => (t.id === id ? { ...t, ...patch } : t)));
+    }
+    disposeOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+        const win = this.document.defaultView;
+        if (this.rafHandle !== null && win) {
+            win.cancelAnimationFrame(this.rafHandle);
+            this.rafHandle = null;
+        }
+    }
+    dispose() {
+        for (const id of this.timers.keys()) {
+            this.clearTimer(id);
+        }
+        for (const [, fallback] of this.animationFallbacks) {
+            clearTimeout(fallback);
+        }
+        this.animationFallbacks.clear();
+        this.dismissReasons.clear();
+        this.refs.clear();
+        this.disposeOverlay();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+// Public API for the toast notification system
+// Service
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COM_TOAST_CONFIG, ComToastRef, ComToastService, provideComToastConfig, toastCloseButtonVariants, toastContainerVariants, toastProgressVariants, toastVariants };
+//# sourceMappingURL=ngx-com-components-toast.mjs.map