ngx-dynamic-toast 0.0.1

package/fesm2022/ngx-dynamic-toast.mjs

@@ -0,0 +1,791 @@
+import * as i0 from '@angular/core';
+import { input, output, inject, ElementRef, NgZone, ChangeDetectorRef, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, Injectable } from '@angular/core';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const HEIGHT = 40;
+const WIDTH = 350;
+const DEFAULT_ROUNDNESS = 16;
+const DURATION_MS = 600;
+const DURATION_S = DURATION_MS / 1000;
+const DEFAULT_TOAST_DURATION = 6000;
+const EXIT_DURATION = DEFAULT_TOAST_DURATION * 0.1;
+const AUTO_EXPAND_DELAY = DEFAULT_TOAST_DURATION * 0.025;
+const AUTO_COLLAPSE_DELAY = DEFAULT_TOAST_DURATION - 2000;
+const BLUR_RATIO = 0.5;
+const PILL_PADDING = 10;
+const MIN_EXPAND_RATIO = 2.25;
+const SWAP_COLLAPSE_MS = 200;
+const HEADER_EXIT_MS = DURATION_MS * 0.7;
+
+const baseSvg = (title, body, extra) => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ${extra ?? ""}><title>${title}</title>${body}</svg>`;
+const ICONS = {
+    arrowRight: baseSvg("Arrow Right", `<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />`),
+    lifeBuoy: baseSvg("Life Buoy", `<circle cx="12" cy="12" r="10" /><path d="m4.93 4.93 4.24 4.24" /><path d="m14.83 9.17 4.24-4.24" /><path d="m14.83 14.83 4.24 4.24" /><path d="m9.17 14.83-4.24 4.24" /><circle cx="12" cy="12" r="4" />`),
+    loaderCircle: (extra) => baseSvg("Loader Circle", `<path d="M21 12a9 9 0 1 1-6.219-8.56" />`, extra),
+    x: baseSvg("X", `<path d="M18 6 6 18" /><path d="m6 6 12 12" />`),
+    circleAlert: baseSvg("Circle Alert", `<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />`),
+    check: baseSvg("Check", `<path d="M20 6 9 17l-5-5" />`),
+};
+
+class DynamicToastComponent {
+    toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : []));
+    pillAlign = input("left", ...(ngDevMode ? [{ debugName: "pillAlign" }] : []));
+    expandEdge = input("bottom", ...(ngDevMode ? [{ debugName: "expandEdge" }] : []));
+    canExpand = input(true, ...(ngDevMode ? [{ debugName: "canExpand" }] : []));
+    interruptKey = input(undefined, ...(ngDevMode ? [{ debugName: "interruptKey" }] : []));
+    dismissed = output();
+    entered = output();
+    left = output();
+    HEIGHT = HEIGHT;
+    WIDTH = WIDTH;
+    sanitizer = inject(DomSanitizer);
+    hostEl = inject(ElementRef);
+    ngZone = inject(NgZone);
+    cdr = inject(ChangeDetectorRef);
+    hasMeasured = false;
+    roHeader = null;
+    roContent = null;
+    headerExitTimer = null;
+    autoExpandTimer = null;
+    autoCollapseTimer = null;
+    swapTimer = null;
+    lastRefreshKey;
+    pendingSwap = null;
+    pointerStartY = null;
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : []));
+    isExpanded = signal(true, ...(ngDevMode ? [{ debugName: "isExpanded" }] : [])); // Default to expanded if description exists
+    pillWidth = signal(0, ...(ngDevMode ? [{ debugName: "pillWidth" }] : []));
+    contentHeight = signal(0, ...(ngDevMode ? [{ debugName: "contentHeight" }] : []));
+    // view = signal<View>({
+    //   title: "",
+    //   description: "",
+    //   state: "success",
+    //   iconSvg: null,
+    //   fill: "#FFFFFF",
+    // });
+    // Use a default toast state to avoid NG0950 during initialization
+    view = computed(() => {
+        try {
+            const t = this.toast();
+            return {
+                title: t.title,
+                description: t.description,
+                contentTemplate: t.contentTemplate,
+                state: t.state,
+                iconSvg: t.iconSvg,
+                styles: t.styles,
+                button: t.button,
+                fill: t.fill ?? "#151515",
+            };
+        }
+        catch (e) {
+            // Return safe default if input is not yet bound
+            return {
+                title: "",
+                state: "info",
+                fill: "#151515",
+            };
+        }
+    }, ...(ngDevMode ? [{ debugName: "view" }] : []));
+    // headerLayerCurrent = signal<HeaderLayer>({
+    //   key: "",
+    //   view: this.view(),
+    // });
+    // headerLayerPrev = signal<HeaderLayer | null>(null);
+    filterId = `dt-gooey-${Math.random().toString(36).slice(2, 8)}`;
+    hasDesc = computed(() => {
+        const v = this.view();
+        return (Boolean(v.description) || Boolean(v.contentTemplate) || Boolean(v.button));
+    }, ...(ngDevMode ? [{ debugName: "hasDesc" }] : []));
+    isLoading = computed(() => this.view().state === "loading", ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    allowExpand = computed(() => {
+        if (this.isLoading())
+            return false;
+        const interrupt = this.interruptKey();
+        const id = this.toast().id;
+        return this.canExpand() ?? (!interrupt || interrupt === id);
+    }, ...(ngDevMode ? [{ debugName: "allowExpand" }] : []));
+    open = computed(() => this.hasDesc() && this.isExpanded() && !this.isLoading(), ...(ngDevMode ? [{ debugName: "open" }] : []));
+    resolvedRoundness = computed(() => {
+        try {
+            return Math.max(0, this.toast().roundness ?? DEFAULT_ROUNDNESS);
+        }
+        catch {
+            return DEFAULT_ROUNDNESS;
+        }
+    }, ...(ngDevMode ? [{ debugName: "resolvedRoundness" }] : []));
+    blur = computed(() => this.resolvedRoundness() * BLUR_RATIO, ...(ngDevMode ? [{ debugName: "blur" }] : []));
+    minExpanded = computed(() => HEIGHT * MIN_EXPAND_RATIO, ...(ngDevMode ? [{ debugName: "minExpanded" }] : []));
+    rawExpanded = computed(() => {
+        const min = this.minExpanded();
+        try {
+            if (!this.hasDesc())
+                return min;
+            return Math.max(min, HEIGHT + this.contentHeight());
+        }
+        catch {
+            return min;
+        }
+    }, ...(ngDevMode ? [{ debugName: "rawExpanded" }] : []));
+    frozenExpanded = signal(HEIGHT * MIN_EXPAND_RATIO, ...(ngDevMode ? [{ debugName: "frozenExpanded" }] : []));
+    expanded = computed(() => this.open() ? this.rawExpanded() : this.frozenExpanded(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    svgHeight = computed(() => this.hasDesc() ? Math.max(this.expanded(), this.minExpanded()) : HEIGHT, ...(ngDevMode ? [{ debugName: "svgHeight" }] : []));
+    expandedContent = computed(() => Math.max(0, this.expanded() - HEIGHT), ...(ngDevMode ? [{ debugName: "expandedContent" }] : []));
+    resolvedPillWidth = computed(() => Math.max(this.pillWidth() || HEIGHT, HEIGHT), ...(ngDevMode ? [{ debugName: "resolvedPillWidth" }] : []));
+    pillHeight = computed(() => HEIGHT + this.blur() * 3, ...(ngDevMode ? [{ debugName: "pillHeight" }] : []));
+    pillX = computed(() => {
+        const w = this.resolvedPillWidth();
+        const pos = this.pillAlign();
+        if (pos === "right")
+            return WIDTH - w;
+        if (pos === "center")
+            return (WIDTH - w) / 2;
+        return 0;
+    }, ...(ngDevMode ? [{ debugName: "pillX" }] : []));
+    pillPath = computed(() => {
+        const w = this.resolvedPillWidth();
+        const h = HEIGHT;
+        const r = this.resolvedRoundness();
+        const align = this.pillAlign();
+        const open = this.open();
+        const x = this.pillX();
+        // Helper for rounded corner arc relative
+        const arc = (dx, dy) => `a ${r} ${r} 0 0 1 ${dx} ${dy}`;
+        let d = "";
+        // Start at Top-Left of the pill (relative to x)
+        // We'll draw in absolute coordinates or relative? Path commands usually absolute M x y is easiest.
+        // Top Left Corner
+        d += `M ${x} ${h - r}`; // Start before top-left corner? No, let's start top-left.
+        // Actually, standard rect path:
+        // Move to x, y+r
+        // Arc to x+r, y
+        // Line to x+w-r, y
+        // Arc to x+w, y+r
+        // Line to x+w, y+h-r
+        // Arc to x+w-r, y+h
+        // Line to x+r, y+h
+        // Arc to x, y+h-r
+        // Close
+        // Top Left
+        d += `M ${x} ${r} ${arc(r, -r)}`;
+        // Top Right
+        d += `L ${x + w - r} 0 ${arc(r, r)}`;
+        // Bottom Right
+        if (open && align === "right") {
+            d += `L ${x + w} ${h}`; // Sharp corner
+        }
+        else {
+            d += `L ${x + w} ${h - r} ${arc(-r, r)}`; // Rounded
+        }
+        // Bottom Left
+        if (open && align === "left") {
+            d += `L ${x} ${h}`; // Sharp corner
+        }
+        else {
+            d += `L ${x + r} ${h} ${arc(-r, -r)}`; // Rounded
+        }
+        d += "Z";
+        return d;
+    }, ...(ngDevMode ? [{ debugName: "pillPath" }] : []));
+    headerTransform = computed(() => {
+        const open = this.open();
+        const expand = this.expandEdge();
+        const ty = open ? (expand === "bottom" ? 3 : -3) : 0;
+        const scale = open ? 0.9 : 1;
+        return `translateY(${ty}px) scale(${scale})`;
+    }, ...(ngDevMode ? [{ debugName: "headerTransform" }] : []));
+    bodyPath = computed(() => {
+        const w = WIDTH;
+        const h = this.open() ? this.expandedContent() : 0;
+        const r = this.resolvedRoundness();
+        const y = HEIGHT - 1; // 1px overlap to ensure connection
+        const align = this.pillAlign();
+        if (h <= 0)
+            return "";
+        // Helper for rounded corner arc
+        // A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+        const arc = (dx, dy) => `a ${r} ${r} 0 0 1 ${dx} ${dy}`;
+        let d = "";
+        // Top Left
+        if (align === "left") {
+            d += `M 0 ${y}`; // Sharp corner
+        }
+        else {
+            d += `M 0 ${y + r} ${arc(r, -r)}`; // Rounded start
+        }
+        // Top Right
+        if (align === "right") {
+            d += `L ${w} ${y}`; // Sharp line to corner
+        }
+        else {
+            d += `L ${w - r} ${y} ${arc(r, r)}`; // Line then rounded
+        }
+        // Bottom Right (Always rounded)
+        d += `L ${w} ${y + h - r} ${arc(-r, r)}`;
+        // Bottom Left (Always rounded)
+        d += `L ${r} ${y + h} ${arc(-r, -r)}`;
+        // Close path
+        d += "Z";
+        return d;
+    }, ...(ngDevMode ? [{ debugName: "bodyPath" }] : []));
+    constructor() {
+        // If no description, collapse immediately
+        effect(() => {
+            if (!this.hasDesc()) {
+                this.isExpanded.set(false);
+            }
+            else {
+                // If has description, start expanded by default
+                // But we might want to respect auto-collapse later
+                this.isExpanded.set(true);
+            }
+        }, { allowSignalWrites: true });
+        queueMicrotask(() => {
+            this.ready.set(true);
+            this.ensureMeasurements();
+        });
+    }
+    // private applyView(next: View) {
+    //   const prev = this.view();
+    //   const headerKey = `${next.state}-${next.title}`;
+    //   const prevKey = `${prev.state}-${prev.title}`;
+    //   this.view.set(next);
+    //   if (headerKey !== prevKey) {
+    //     const currentLayer: HeaderLayer = { key: headerKey, view: next };
+    //     const prevLayer: HeaderLayer = { key: prevKey, view: prev };
+    //     this.headerLayerPrev.set(prevLayer);
+    //     this.headerLayerCurrent.set(currentLayer);
+    //     if (this.headerExitTimer) window.clearTimeout(this.headerExitTimer);
+    //     this.headerExitTimer = window.setTimeout(() => {
+    //       this.headerExitTimer = null;
+    //       this.headerLayerPrev.set(null);
+    //     }, HEADER_EXIT_MS);
+    //   } else {
+    //     this.headerLayerCurrent.set({ key: headerKey, view: next });
+    //   }
+    // }
+    ngOnDestroy() {
+        this.roHeader?.disconnect();
+        this.roContent?.disconnect();
+        if (this.headerExitTimer)
+            window.clearTimeout(this.headerExitTimer);
+        if (this.autoExpandTimer)
+            window.clearTimeout(this.autoExpandTimer);
+        if (this.autoCollapseTimer)
+            window.clearTimeout(this.autoCollapseTimer);
+        if (this.swapTimer)
+            window.clearTimeout(this.swapTimer);
+    }
+    ensureMeasurements() {
+        if (this.hasMeasured)
+            return;
+        this.hasMeasured = true;
+        const root = this.hostEl.nativeElement;
+        const inner = root.querySelector("[data-dt-header-inner][data-layer='current']");
+        const header = root.querySelector("[data-dt-header]");
+        const content = root.querySelector("[data-dt-description]");
+        if (!inner || !header)
+            return;
+        // Throttled measurement
+        let rafHeader = null;
+        const measureHeader = () => {
+            if (rafHeader)
+                return;
+            // Run outside angular to avoid infinite CD loops from RO
+            this.ngZone.runOutsideAngular(() => {
+                rafHeader = requestAnimationFrame(() => {
+                    rafHeader = null;
+                    const cs = getComputedStyle(header);
+                    const pad = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+                    const w = inner.scrollWidth + pad + PILL_PADDING;
+                    // Only update if difference is significant to stop 1px loops
+                    if (Math.abs(w - this.pillWidth()) > 1.5) {
+                        this.pillWidth.set(w);
+                        this.cdr.detectChanges(); // Local detect changes only
+                    }
+                });
+            });
+        };
+        let rafContent = null;
+        const measureContent = () => {
+            const el = root.querySelector("[data-dt-description]");
+            if (!el)
+                return;
+            if (rafContent)
+                return;
+            this.ngZone.runOutsideAngular(() => {
+                rafContent = requestAnimationFrame(() => {
+                    rafContent = null;
+                    if (Math.abs(el.scrollHeight - this.contentHeight()) > 1.5) {
+                        this.contentHeight.set(el.scrollHeight);
+                        this.cdr.detectChanges();
+                    }
+                });
+            });
+        };
+        measureHeader();
+        measureContent();
+        this.roHeader = new ResizeObserver(() => measureHeader());
+        this.roHeader.observe(inner);
+        if (content) {
+            this.roContent = new ResizeObserver(() => measureContent());
+            this.roContent.observe(content);
+        }
+    }
+    resolvedIcon(v) {
+        const icon = v.iconSvg ??
+            (v.state === "success"
+                ? ICONS.check
+                : v.state === "loading"
+                    ? ICONS.loaderCircle('data-dt-icon="spin" aria-hidden="true"')
+                    : v.state === "error"
+                        ? ICONS.x
+                        : v.state === "warning"
+                            ? ICONS.circleAlert
+                            : v.state === "info"
+                                ? ICONS.lifeBuoy
+                                : ICONS.arrowRight);
+        return this.sanitizer.bypassSecurityTrustHtml(icon);
+    }
+    handleEnter() {
+        this.entered.emit(this.toast().id);
+        if (this.hasDesc())
+            this.isExpanded.set(true);
+    }
+    handleLeave() {
+        this.left.emit(this.toast().id);
+        this.isExpanded.set(false);
+    }
+    handleTransitionEnd(e) {
+        if (e.propertyName !== "height" && e.propertyName !== "transform")
+            return;
+        if (this.open())
+            return;
+        const pending = this.pendingSwap;
+        if (!pending)
+            return;
+        if (this.swapTimer) {
+            window.clearTimeout(this.swapTimer);
+            this.swapTimer = null;
+        }
+        // this.applyView(pending.payload);
+        this.pendingSwap = null;
+    }
+    handleButtonClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.view().button?.onClick();
+    }
+    handlePointerDown(e) {
+        if (this.toast().exiting)
+            return;
+        const target = e.target;
+        if (target.closest("[data-dt-button]"))
+            return;
+        this.pointerStartY = e.clientY;
+        const el = e.currentTarget;
+        const SWIPE_DISMISS = 30;
+        const SWIPE_MAX = 20;
+        const onMove = (ev) => {
+            if (this.pointerStartY == null)
+                return;
+            const dy = ev.clientY - this.pointerStartY;
+            const sign = dy > 0 ? 1 : -1;
+            const clamped = Math.min(Math.abs(dy), SWIPE_MAX) * sign;
+            el.style.transform = `translateY(${clamped}px)`;
+        };
+        const onUp = (ev) => {
+            if (this.pointerStartY == null)
+                return;
+            const dy = ev.clientY - this.pointerStartY;
+            this.pointerStartY = null;
+            el.style.transform = "";
+            el.removeEventListener("pointermove", onMove);
+            el.removeEventListener("pointerup", onUp);
+            if (Math.abs(dy) > SWIPE_DISMISS) {
+                this.dismissed.emit(this.toast().id);
+            }
+            else if (Math.abs(dy) < 5) {
+                // It's a tap
+                this.handleTap();
+            }
+        };
+        el.setPointerCapture(e.pointerId);
+        el.addEventListener("pointermove", onMove, { passive: true });
+        el.addEventListener("pointerup", onUp, { passive: true });
+    }
+    handleTap() {
+        if (this.hasDesc()) {
+            if (this.isExpanded()) {
+                // 1 click to collapse if it has description and is open
+                this.isExpanded.set(false);
+            }
+            else {
+                // If already collapsed, another click closes the toast
+                this.dismissed.emit(this.toast().id);
+            }
+        }
+        else {
+            // If no description, a click simply closes it
+            this.dismissed.emit(this.toast().id);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DynamicToastComponent, isStandalone: true, selector: "dt-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null }, pillAlign: { classPropertyName: "pillAlign", publicName: "pillAlign", isSignal: true, isRequired: false, transformFunction: null }, expandEdge: { classPropertyName: "expandEdge", publicName: "expandEdge", isSignal: true, isRequired: false, transformFunction: null }, canExpand: { classPropertyName: "canExpand", publicName: "canExpand", isSignal: true, isRequired: false, transformFunction: null }, interruptKey: { classPropertyName: "interruptKey", publicName: "interruptKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", entered: "entered", left: "left" }, ngImport: i0, template: "<button\n  type=\"button\"\n  data-dt-toast\n  [attr.data-ready]=\"ready()\"\n  [attr.data-expanded]=\"open()\"\n  [attr.data-exiting]=\"toast().exiting || false\"\n  [attr.data-edge]=\"expandEdge()\"\n  [attr.data-position]=\"pillAlign()\"\n  [attr.data-state]=\"view().state\"\n  [class]=\"toast().className || ''\"\n  [style.--_h]=\"HEIGHT + 'px'\"\n  [style.--_pw]=\"(pillWidth() || HEIGHT) + 'px'\"\n  [style.--_px]=\"pillX() + 'px'\"\n  [style.--_ht]=\"headerTransform()\"\n  [style.--_co]=\"open() ? 1 : 0\"\n  [style.animation-duration]=\"(toast().duration || 6000) + 'ms'\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (transitionend)=\"handleTransitionEnd($event)\"\n  (pointerdown)=\"handlePointerDown($event)\"\n>\n  <div\n    data-dt-canvas\n    [attr.data-edge]=\"expandEdge()\"\n    [style.filter]=\"'url(#' + filterId + ')'\"\n  >\n    <svg\n      data-dt-svg\n      [attr.width]=\"WIDTH\"\n      [attr.height]=\"svgHeight()\"\n      [attr.viewBox]=\"'0 0 ' + WIDTH + ' ' + svgHeight()\"\n    >\n      <defs>\n        <filter\n          [id]=\"filterId\"\n          x=\"-20%\"\n          y=\"-20%\"\n          width=\"140%\"\n          height=\"140%\"\n          colorInterpolationFilters=\"sRGB\"\n        >\n          <feGaussianBlur\n            in=\"SourceGraphic\"\n            [attr.stdDeviation]=\"blur()\"\n            result=\"blur\"\n          />\n          <feColorMatrix\n            in=\"blur\"\n            mode=\"matrix\"\n            values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\"\n            result=\"goo\"\n          />\n          <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n        </filter>\n      </defs>\n\n      <path\n        data-dt-pill\n        [attr.d]=\"pillPath()\"\n        [attr.fill]=\"view().fill\"\n      />\n\n      <path\n        data-dt-body\n        [attr.d]=\"bodyPath()\"\n        [attr.fill]=\"view().fill\"\n        [attr.opacity]=\"open() ? 1 : 0\"\n      />\n    </svg>\n  </div>\n\n  <div #headerRef data-dt-header [attr.data-edge]=\"expandEdge()\">\n    <div data-dt-header-stack>\n      <div\n        #innerRef\n        data-dt-header-inner\n        data-layer=\"current\"\n      >\n        <div\n          data-dt-badge\n          [attr.data-state]=\"view().state\"\n          [class]=\"view().styles?.badge || ''\"\n          [innerHTML]=\"resolvedIcon(view())\"\n        ></div>\n        <span\n          data-dt-title\n          [attr.data-state]=\"view().state\"\n          [class]=\"view().styles?.title || ''\"\n        >\n          {{ view().title }}\n        </span>\n      </div>\n\n      <!-- @if (headerLayerPrev(); as prev) {\n        <div data-dt-header-inner data-layer=\"prev\" data-exiting=\"true\">\n          <div\n            data-dt-badge\n            [attr.data-state]=\"prev.view.state\"\n            [class]=\"prev.view.styles?.badge || ''\"\n            [innerHTML]=\"resolvedIcon(prev.view)\"\n          ></div>\n          <span\n            data-dt-title\n            [attr.data-state]=\"prev.view.state\"\n            [class]=\"prev.view.styles?.title || ''\"\n          >\n            {{ prev.view.title }}\n          </span>\n        </div>\n      } -->\n    </div>\n  </div>\n\n  @if (hasDesc()) {\n    <div\n      data-dt-content\n      [attr.data-edge]=\"expandEdge()\"\n      [attr.data-visible]=\"open()\"\n    >\n      <div\n        #contentRef\n        data-dt-description\n        [class]=\"view().styles?.description || ''\"\n      >\n        @if (view().description) {\n          <span>{{ view().description }}</span>\n        }\n        @if (view().contentTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"view().contentTemplate\"\n          ></ng-container>\n        }\n        @if (view().button) {\n          <a\n            href=\"#\"\n            data-dt-button\n            [attr.data-state]=\"view().state\"\n            [class]=\"view().styles?.button || ''\"\n            (click)=\"handleButtonClick($event)\"\n          >\n            {{ view().button?.title }}\n          </a>\n        }\n      </div>\n    </div>\n  }\n</button>\n\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "dt-toast", standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<button\n  type=\"button\"\n  data-dt-toast\n  [attr.data-ready]=\"ready()\"\n  [attr.data-expanded]=\"open()\"\n  [attr.data-exiting]=\"toast().exiting || false\"\n  [attr.data-edge]=\"expandEdge()\"\n  [attr.data-position]=\"pillAlign()\"\n  [attr.data-state]=\"view().state\"\n  [class]=\"toast().className || ''\"\n  [style.--_h]=\"HEIGHT + 'px'\"\n  [style.--_pw]=\"(pillWidth() || HEIGHT) + 'px'\"\n  [style.--_px]=\"pillX() + 'px'\"\n  [style.--_ht]=\"headerTransform()\"\n  [style.--_co]=\"open() ? 1 : 0\"\n  [style.animation-duration]=\"(toast().duration || 6000) + 'ms'\"\n  (mouseenter)=\"handleEnter()\"\n  (mouseleave)=\"handleLeave()\"\n  (transitionend)=\"handleTransitionEnd($event)\"\n  (pointerdown)=\"handlePointerDown($event)\"\n>\n  <div\n    data-dt-canvas\n    [attr.data-edge]=\"expandEdge()\"\n    [style.filter]=\"'url(#' + filterId + ')'\"\n  >\n    <svg\n      data-dt-svg\n      [attr.width]=\"WIDTH\"\n      [attr.height]=\"svgHeight()\"\n      [attr.viewBox]=\"'0 0 ' + WIDTH + ' ' + svgHeight()\"\n    >\n      <defs>\n        <filter\n          [id]=\"filterId\"\n          x=\"-20%\"\n          y=\"-20%\"\n          width=\"140%\"\n          height=\"140%\"\n          colorInterpolationFilters=\"sRGB\"\n        >\n          <feGaussianBlur\n            in=\"SourceGraphic\"\n            [attr.stdDeviation]=\"blur()\"\n            result=\"blur\"\n          />\n          <feColorMatrix\n            in=\"blur\"\n            mode=\"matrix\"\n            values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10\"\n            result=\"goo\"\n          />\n          <feComposite in=\"SourceGraphic\" in2=\"goo\" operator=\"atop\" />\n        </filter>\n      </defs>\n\n      <path\n        data-dt-pill\n        [attr.d]=\"pillPath()\"\n        [attr.fill]=\"view().fill\"\n      />\n\n      <path\n        data-dt-body\n        [attr.d]=\"bodyPath()\"\n        [attr.fill]=\"view().fill\"\n        [attr.opacity]=\"open() ? 1 : 0\"\n      />\n    </svg>\n  </div>\n\n  <div #headerRef data-dt-header [attr.data-edge]=\"expandEdge()\">\n    <div data-dt-header-stack>\n      <div\n        #innerRef\n        data-dt-header-inner\n        data-layer=\"current\"\n      >\n        <div\n          data-dt-badge\n          [attr.data-state]=\"view().state\"\n          [class]=\"view().styles?.badge || ''\"\n          [innerHTML]=\"resolvedIcon(view())\"\n        ></div>\n        <span\n          data-dt-title\n          [attr.data-state]=\"view().state\"\n          [class]=\"view().styles?.title || ''\"\n        >\n          {{ view().title }}\n        </span>\n      </div>\n\n      <!-- @if (headerLayerPrev(); as prev) {\n        <div data-dt-header-inner data-layer=\"prev\" data-exiting=\"true\">\n          <div\n            data-dt-badge\n            [attr.data-state]=\"prev.view.state\"\n            [class]=\"prev.view.styles?.badge || ''\"\n            [innerHTML]=\"resolvedIcon(prev.view)\"\n          ></div>\n          <span\n            data-dt-title\n            [attr.data-state]=\"prev.view.state\"\n            [class]=\"prev.view.styles?.title || ''\"\n          >\n            {{ prev.view.title }}\n          </span>\n        </div>\n      } -->\n    </div>\n  </div>\n\n  @if (hasDesc()) {\n    <div\n      data-dt-content\n      [attr.data-edge]=\"expandEdge()\"\n      [attr.data-visible]=\"open()\"\n    >\n      <div\n        #contentRef\n        data-dt-description\n        [class]=\"view().styles?.description || ''\"\n      >\n        @if (view().description) {\n          <span>{{ view().description }}</span>\n        }\n        @if (view().contentTemplate) {\n          <ng-container\n            [ngTemplateOutlet]=\"view().contentTemplate\"\n          ></ng-container>\n        }\n        @if (view().button) {\n          <a\n            href=\"#\"\n            data-dt-button\n            [attr.data-state]=\"view().state\"\n            [class]=\"view().styles?.button || ''\"\n            (click)=\"handleButtonClick($event)\"\n          >\n            {{ view().button?.title }}\n          </a>\n        }\n      </div>\n    </div>\n  }\n</button>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], pillAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "pillAlign", required: false }] }], expandEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandEdge", required: false }] }], canExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "canExpand", required: false }] }], interruptKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "interruptKey", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], entered: [{ type: i0.Output, args: ["entered"] }], left: [{ type: i0.Output, args: ["left"] }] } });
+
+const pillAlign = (pos) => pos.includes("right") ? "right" : pos.includes("center") ? "center" : "left";
+const expandDir = (pos) => pos.startsWith("top") ? "bottom" : "top";
+class DynamicToastViewportComponent {
+    position = input("top-right", ...(ngDevMode ? [{ debugName: "position" }] : []));
+    offset = input(undefined, ...(ngDevMode ? [{ debugName: "offset" }] : []));
+    service = inject(DynamicToastService);
+    hovering = signal(new Set(), ...(ngDevMode ? [{ debugName: "hovering" }] : []));
+    activeId = signal(undefined, ...(ngDevMode ? [{ debugName: "activeId" }] : []));
+    latestId = computed(() => {
+        const list = this.service.toasts();
+        for (let i = list.length - 1; i >= 0; i--) {
+            if (!list[i].exiting)
+                return list[i].id;
+        }
+        return undefined;
+    }, ...(ngDevMode ? [{ debugName: "latestId" }] : []));
+    groups = computed(() => {
+        const toasts = this.service.toasts();
+        const byPos = new Map();
+        for (const t of toasts) {
+            const p = (t.position ?? this.position());
+            const arr = byPos.get(p);
+            if (arr)
+                arr.push(t);
+            else
+                byPos.set(p, [t]);
+        }
+        const offset = this.offset();
+        const off = offset === undefined
+            ? undefined
+            : typeof offset === "object"
+                ? offset
+                : { top: offset, right: offset, bottom: offset, left: offset };
+        const px = (v) => v === undefined ? undefined : typeof v === "number" ? `${v}px` : v;
+        const res = [];
+        for (const [pos, items] of byPos) {
+            const style = {};
+            if (off) {
+                if (pos.startsWith("top") && off.top !== undefined)
+                    style.top = px(off.top);
+                if (pos.startsWith("bottom") && off.bottom !== undefined)
+                    style.bottom = px(off.bottom);
+                if (pos.endsWith("left") && off.left !== undefined)
+                    style.left = px(off.left);
+                if (pos.endsWith("right") && off.right !== undefined)
+                    style.right = px(off.right);
+            }
+            res.push({
+                pos,
+                items,
+                pill: pillAlign(pos),
+                expand: expandDir(pos),
+                style: off ? style : undefined,
+            });
+        }
+        return res;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    onToastEnter(id) {
+        const next = new Set(this.hovering());
+        next.add(id);
+        this.hovering.set(next);
+        this.activeId.set(id);
+        this.service.pauseTimers();
+    }
+    onToastLeave(id) {
+        const next = new Set(this.hovering());
+        next.delete(id);
+        this.hovering.set(next);
+        if (next.size > 0)
+            return;
+        queueMicrotask(() => {
+            if (this.hovering().size > 0)
+                return;
+            this.activeId.set(this.latestId());
+            this.service.resumeTimers();
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DynamicToastViewportComponent, isStandalone: true, selector: "dt-viewport", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@for (group of groups(); track group.pos) {\n  <section\n    data-dt-viewport\n    [attr.data-position]=\"group.pos\"\n    aria-live=\"polite\"\n    [style.top]=\"group.style?.top\"\n    [style.right]=\"group.style?.right\"\n    [style.bottom]=\"group.style?.bottom\"\n    [style.left]=\"group.style?.left\"\n  >\n    @for (t of group.items; track t.id) {\n      <dt-toast\n        [toast]=\"t\"\n        [pillAlign]=\"group.pill\"\n        [expandEdge]=\"group.expand\"\n        [canExpand]=\"activeId() === undefined || activeId() === t.id\"\n        (entered)=\"onToastEnter($event)\"\n        (left)=\"onToastLeave($event)\"\n        (dismissed)=\"service.dismiss($event)\"\n      />\n    }\n  </section>\n}\n\n", styles: ["[data-dt-viewport]{--sileo-spring-easing: linear( 0, .002 .6%, .007 1.2%, .015 1.8%, .026 2.4%, .041 3.1%, .06 3.8%, .108 5.3%, .157 6.6%, .214 8%, .467 13.7%, .577 16.3%, .631 17.7%, .682 19.1%, .73 20.5%, .771 21.8%, .808 23.1%, .844 24.5%, .874 25.8%, .903 27.2%, .928 28.6%, .952 30.1%, .972 31.6%, .988 33.1%, 1.01 35.7%, 1.025 38.5%, 1.034 41.6%, 1.038 45%, 1.035 50.1%, 1.012 64.2%, 1.003 73%, .999 83.7%, 1 );--sileo-duration: .6s;--sileo-height: 40px;--sileo-width: 350px;--sileo-state-success: oklch(.723 .219 142.136);--sileo-state-loading: oklch(.556 0 0);--sileo-state-error: oklch(.637 .237 25.331);--sileo-state-warning: oklch(.795 .184 86.047);--sileo-state-info: oklch(.685 .169 237.323);--sileo-state-action: oklch(.623 .214 259.815)}[data-dt-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:transparent;padding:0;width:var(--sileo-width);height:var(--_h, var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible;color:#fff;transition:all var(--sileo-duration) var(--sileo-spring-easing);filter:drop-shadow(0 4px 6px rgba(0,0,0,.1)) drop-shadow(0 10px 15px rgba(0,0,0,.2))}[data-dt-toast]:after{display:none!important}[data-dt-viewport]:not(:hover) [data-dt-toast]{position:absolute;right:1.5rem;margin:0!important;transition:all .6s cubic-bezier(.16,1,.3,1)}[data-dt-viewport][data-position$=left]:not(:hover) [data-dt-toast]{right:auto;left:1.5rem}[data-dt-viewport][data-position$=center]:not(:hover) [data-dt-toast]{right:auto;left:auto;position:relative;margin-bottom:-30px!important}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast]{top:1.5rem!important}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast]{bottom:1.5rem!important}[data-dt-viewport]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(1){z-index:5;transform:translateY(0) scale(1);opacity:1}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(2){z-index:4;transform:translateY(-14px) scale(.95);opacity:1;filter:brightness(.9)}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(2){z-index:4;transform:translateY(14px) scale(.95);opacity:1;filter:brightness(.9)}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(3){z-index:3;transform:translateY(-28px) scale(.9);opacity:.8;filter:brightness(.8)}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(3){z-index:3;transform:translateY(28px) scale(.9);opacity:.8;filter:brightness(.8)}[data-dt-viewport]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(n+4){opacity:0;pointer-events:none;transform:translateY(0) scale(.8);z-index:0}[data-dt-viewport]:hover [data-dt-toast]{position:relative;transform:none;opacity:1;filter:none;z-index:auto}[data-dt-viewport][data-position^=top]:hover [data-dt-toast]+[data-dt-toast]{margin-top:10px}[data-dt-viewport][data-position^=bottom]:hover [data-dt-toast]+[data-dt-toast]{margin-bottom:10px}[data-dt-toast][data-state=loading]{cursor:default}[data-dt-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-dt-toast][data-ready=true][data-exiting=true]{opacity:0!important;pointer-events:none}[data-dt-viewport][data-position^=top] [data-dt-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95);opacity:0!important}[data-dt-viewport][data-position^=bottom] [data-dt-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95);opacity:0!important}[data-dt-viewport][data-position^=top] [data-dt-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-dt-viewport][data-position^=bottom] [data-dt-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-dt-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-dt-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-dt-canvas][data-edge=bottom]{top:0}[data-dt-svg]{overflow:visible}[data-dt-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px, 0px);transform:var(--_ht);max-width:var(--_pw)}[data-dt-toast][data-ready=true] [data-dt-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-dt-header][data-edge=top]{bottom:0}[data-dt-header][data-edge=bottom]{top:0}[data-dt-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-dt-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);transform:translateZ(0)}[data-dt-header-inner][data-layer=current]{position:relative;z-index:1;animation:dt-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-dt-header-inner][data-layer=prev]{position:absolute;left:0;top:0;z-index:0;pointer-events:none}[data-dt-header-inner][data-exiting=true]{animation:dt-header-exit calc(var(--sileo-duration) * .7) ease forwards}[data-dt-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone, currentColor);background-color:var(--sileo-tone-bg, transparent)}[data-dt-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone, currentColor)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state]{--_c: var(--sileo-state-success)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=loading]{--_c: var(--sileo-state-loading)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=error]{--_c: var(--sileo-state-error)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=warning]{--_c: var(--sileo-state-warning)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=info]{--_c: var(--sileo-state-info)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=action]{--_c: var(--sileo-state-action)}:is([data-dt-badge],[data-dt-title])[data-state]{--sileo-tone: var(--_c);--sileo-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent)}[data-dt-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-dt-content]:not([data-visible=true]){content-visibility:hidden}[data-dt-toast][data-ready=true] [data-dt-content]{transition:opacity calc(var(--sileo-duration) * .08) ease calc(var(--sileo-duration) * .04)}[data-dt-content][data-edge=top]{top:0}[data-dt-content][data-edge=bottom]{top:var(--sileo-height)}[data-dt-content][data-visible=true]{pointer-events:auto}[data-dt-toast][data-ready=true] [data-dt-content][data-visible=true]{transition:opacity calc(var(--sileo-duration) * .6) ease calc(var(--sileo-duration) * .3)}[data-dt-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style paint;content-visibility:auto}[data-dt-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color, currentColor);background-color:var(--sileo-btn-bg, transparent);transition:background-color .15s ease}[data-dt-button]:hover{background-color:var(--sileo-btn-bg-hover, transparent)}[data-dt-button][data-state]{--sileo-btn-color: var(--_c);--sileo-btn-bg: color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover: color-mix(in oklch, var(--_c) 25%, transparent)}[data-dt-icon=spin]{animation:dt-spin 1s linear infinite}@keyframes dt-spin{to{transform:rotate(360deg)}}@keyframes dt-header-enter{0%{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes dt-header-exit{0%{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-dt-viewport]{position:fixed;z-index:50;display:flex;gap:0;padding:1.5rem;pointer-events:auto;max-width:calc(100vw - 1.5rem);contain:layout style;transition:all .3s ease;height:auto}[data-dt-viewport]{pointer-events:none}[data-dt-toast]{pointer-events:auto}[data-dt-viewport][data-position^=top] [data-dt-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-dt-viewport][data-position^=bottom] [data-dt-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-dt-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-dt-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-dt-viewport][data-position$=left]{left:0;align-items:flex-start}[data-dt-viewport][data-position$=right]{right:0;align-items:flex-end}[data-dt-viewport][data-position$=center]{left:50%;transform:translate(-50%);align-items:center}@media(prefers-reduced-motion:no-preference){[data-dt-toast][data-ready=true]:hover,[data-dt-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media(prefers-reduced-motion:reduce){[data-dt-viewport],[data-dt-viewport] *,[data-dt-viewport] *:before,[data-dt-viewport] *:after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}\n"], dependencies: [{ kind: "component", type: DynamicToastComponent, selector: "dt-toast", inputs: ["toast", "pillAlign", "expandEdge", "canExpand", "interruptKey"], outputs: ["dismissed", "entered", "left"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastViewportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "dt-viewport", standalone: true, imports: [DynamicToastComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@for (group of groups(); track group.pos) {\n  <section\n    data-dt-viewport\n    [attr.data-position]=\"group.pos\"\n    aria-live=\"polite\"\n    [style.top]=\"group.style?.top\"\n    [style.right]=\"group.style?.right\"\n    [style.bottom]=\"group.style?.bottom\"\n    [style.left]=\"group.style?.left\"\n  >\n    @for (t of group.items; track t.id) {\n      <dt-toast\n        [toast]=\"t\"\n        [pillAlign]=\"group.pill\"\n        [expandEdge]=\"group.expand\"\n        [canExpand]=\"activeId() === undefined || activeId() === t.id\"\n        (entered)=\"onToastEnter($event)\"\n        (left)=\"onToastLeave($event)\"\n        (dismissed)=\"service.dismiss($event)\"\n      />\n    }\n  </section>\n}\n\n", styles: ["[data-dt-viewport]{--sileo-spring-easing: linear( 0, .002 .6%, .007 1.2%, .015 1.8%, .026 2.4%, .041 3.1%, .06 3.8%, .108 5.3%, .157 6.6%, .214 8%, .467 13.7%, .577 16.3%, .631 17.7%, .682 19.1%, .73 20.5%, .771 21.8%, .808 23.1%, .844 24.5%, .874 25.8%, .903 27.2%, .928 28.6%, .952 30.1%, .972 31.6%, .988 33.1%, 1.01 35.7%, 1.025 38.5%, 1.034 41.6%, 1.038 45%, 1.035 50.1%, 1.012 64.2%, 1.003 73%, .999 83.7%, 1 );--sileo-duration: .6s;--sileo-height: 40px;--sileo-width: 350px;--sileo-state-success: oklch(.723 .219 142.136);--sileo-state-loading: oklch(.556 0 0);--sileo-state-error: oklch(.637 .237 25.331);--sileo-state-warning: oklch(.795 .184 86.047);--sileo-state-info: oklch(.685 .169 237.323);--sileo-state-action: oklch(.623 .214 259.815)}[data-dt-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:transparent;padding:0;width:var(--sileo-width);height:var(--_h, var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible;color:#fff;transition:all var(--sileo-duration) var(--sileo-spring-easing);filter:drop-shadow(0 4px 6px rgba(0,0,0,.1)) drop-shadow(0 10px 15px rgba(0,0,0,.2))}[data-dt-toast]:after{display:none!important}[data-dt-viewport]:not(:hover) [data-dt-toast]{position:absolute;right:1.5rem;margin:0!important;transition:all .6s cubic-bezier(.16,1,.3,1)}[data-dt-viewport][data-position$=left]:not(:hover) [data-dt-toast]{right:auto;left:1.5rem}[data-dt-viewport][data-position$=center]:not(:hover) [data-dt-toast]{right:auto;left:auto;position:relative;margin-bottom:-30px!important}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast]{top:1.5rem!important}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast]{bottom:1.5rem!important}[data-dt-viewport]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(1){z-index:5;transform:translateY(0) scale(1);opacity:1}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(2){z-index:4;transform:translateY(-14px) scale(.95);opacity:1;filter:brightness(.9)}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(2){z-index:4;transform:translateY(14px) scale(.95);opacity:1;filter:brightness(.9)}[data-dt-viewport][data-position^=top]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(3){z-index:3;transform:translateY(-28px) scale(.9);opacity:.8;filter:brightness(.8)}[data-dt-viewport][data-position^=bottom]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(3){z-index:3;transform:translateY(28px) scale(.9);opacity:.8;filter:brightness(.8)}[data-dt-viewport]:not(:hover) [data-dt-toast][data-ready=true]:not([data-exiting=true]):nth-last-child(n+4){opacity:0;pointer-events:none;transform:translateY(0) scale(.8);z-index:0}[data-dt-viewport]:hover [data-dt-toast]{position:relative;transform:none;opacity:1;filter:none;z-index:auto}[data-dt-viewport][data-position^=top]:hover [data-dt-toast]+[data-dt-toast]{margin-top:10px}[data-dt-viewport][data-position^=bottom]:hover [data-dt-toast]+[data-dt-toast]{margin-bottom:10px}[data-dt-toast][data-state=loading]{cursor:default}[data-dt-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-dt-toast][data-ready=true][data-exiting=true]{opacity:0!important;pointer-events:none}[data-dt-viewport][data-position^=top] [data-dt-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95);opacity:0!important}[data-dt-viewport][data-position^=bottom] [data-dt-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95);opacity:0!important}[data-dt-viewport][data-position^=top] [data-dt-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-dt-viewport][data-position^=bottom] [data-dt-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-dt-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-dt-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-dt-canvas][data-edge=bottom]{top:0}[data-dt-svg]{overflow:visible}[data-dt-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px, 0px);transform:var(--_ht);max-width:var(--_pw)}[data-dt-toast][data-ready=true] [data-dt-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-dt-header][data-edge=top]{bottom:0}[data-dt-header][data-edge=bottom]{top:0}[data-dt-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-dt-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);transform:translateZ(0)}[data-dt-header-inner][data-layer=current]{position:relative;z-index:1;animation:dt-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-dt-header-inner][data-layer=prev]{position:absolute;left:0;top:0;z-index:0;pointer-events:none}[data-dt-header-inner][data-exiting=true]{animation:dt-header-exit calc(var(--sileo-duration) * .7) ease forwards}[data-dt-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone, currentColor);background-color:var(--sileo-tone-bg, transparent)}[data-dt-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone, currentColor)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state]{--_c: var(--sileo-state-success)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=loading]{--_c: var(--sileo-state-loading)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=error]{--_c: var(--sileo-state-error)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=warning]{--_c: var(--sileo-state-warning)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=info]{--_c: var(--sileo-state-info)}:is([data-dt-badge],[data-dt-title],[data-dt-button])[data-state=action]{--_c: var(--sileo-state-action)}:is([data-dt-badge],[data-dt-title])[data-state]{--sileo-tone: var(--_c);--sileo-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent)}[data-dt-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-dt-content]:not([data-visible=true]){content-visibility:hidden}[data-dt-toast][data-ready=true] [data-dt-content]{transition:opacity calc(var(--sileo-duration) * .08) ease calc(var(--sileo-duration) * .04)}[data-dt-content][data-edge=top]{top:0}[data-dt-content][data-edge=bottom]{top:var(--sileo-height)}[data-dt-content][data-visible=true]{pointer-events:auto}[data-dt-toast][data-ready=true] [data-dt-content][data-visible=true]{transition:opacity calc(var(--sileo-duration) * .6) ease calc(var(--sileo-duration) * .3)}[data-dt-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style paint;content-visibility:auto}[data-dt-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color, currentColor);background-color:var(--sileo-btn-bg, transparent);transition:background-color .15s ease}[data-dt-button]:hover{background-color:var(--sileo-btn-bg-hover, transparent)}[data-dt-button][data-state]{--sileo-btn-color: var(--_c);--sileo-btn-bg: color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover: color-mix(in oklch, var(--_c) 25%, transparent)}[data-dt-icon=spin]{animation:dt-spin 1s linear infinite}@keyframes dt-spin{to{transform:rotate(360deg)}}@keyframes dt-header-enter{0%{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes dt-header-exit{0%{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-dt-viewport]{position:fixed;z-index:50;display:flex;gap:0;padding:1.5rem;pointer-events:auto;max-width:calc(100vw - 1.5rem);contain:layout style;transition:all .3s ease;height:auto}[data-dt-viewport]{pointer-events:none}[data-dt-toast]{pointer-events:auto}[data-dt-viewport][data-position^=top] [data-dt-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-dt-viewport][data-position^=bottom] [data-dt-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-dt-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-dt-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-dt-viewport][data-position$=left]{left:0;align-items:flex-start}[data-dt-viewport][data-position$=right]{right:0;align-items:flex-end}[data-dt-viewport][data-position$=center]{left:50%;transform:translate(-50%);align-items:center}@media(prefers-reduced-motion:no-preference){[data-dt-toast][data-ready=true]:hover,[data-dt-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media(prefers-reduced-motion:reduce){[data-dt-viewport],[data-dt-viewport] *,[data-dt-viewport] *:before,[data-dt-viewport] *:after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
+
+const timeoutKey = (t) => `${t.id}:${t.instanceId}`;
+let idCounter = 0;
+const generateId = () => `${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+class DynamicToastService {
+    _toasts = signal([], ...(ngDevMode ? [{ debugName: "_toasts" }] : []));
+    toasts = this._toasts.asReadonly();
+    config = { position: "top-right" };
+    viewportRef = null;
+    timers = new Map();
+    paused = false;
+    isPendingCD = false;
+    loopCount = 0;
+    loopResetTimer;
+    appRef = inject(ApplicationRef);
+    envInjector = inject(EnvironmentInjector);
+    document = inject(DOCUMENT);
+    ngZone = inject(NgZone);
+    configure(cfg) {
+        this.config = { ...this.config, ...cfg };
+        if (this.viewportRef) {
+            this.viewportRef.setInput("position", this.config.position ?? "top-right");
+            this.viewportRef.setInput("offset", this.config.offset);
+        }
+    }
+    ensureViewport() {
+        if (this.viewportRef)
+            return;
+        const ref = createComponent(DynamicToastViewportComponent, {
+            environmentInjector: this.envInjector,
+        });
+        ref.setInput("position", this.config.position ?? "top-right");
+        ref.setInput("offset", this.config.offset);
+        const el = ref.location.nativeElement;
+        el.setAttribute("data-dt-root", "");
+        this.appRef.attachView(ref.hostView);
+        this.document.body.appendChild(el);
+        this.viewportRef = ref;
+    }
+    resolveAutopilot(opts, duration) {
+        if (opts.autopilot === false || !duration || duration <= 0)
+            return {};
+        const cfg = typeof opts.autopilot === "object" ? opts.autopilot : undefined;
+        const clamp = (v) => Math.min(duration, Math.max(0, v));
+        return {
+            expandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY),
+            collapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY),
+        };
+    }
+    mergeOptions(options) {
+        return {
+            ...(this.config.options ?? {}),
+            ...options,
+            styles: { ...(this.config.options?.styles ?? {}), ...(options.styles ?? {}) },
+        };
+    }
+    buildItem(merged, id, state, fallbackPosition) {
+        const duration = merged.duration ?? DEFAULT_TOAST_DURATION;
+        const auto = this.resolveAutopilot(merged, duration);
+        return {
+            ...merged,
+            id,
+            instanceId: generateId(),
+            state,
+            position: merged.position ?? fallbackPosition ?? this.config.position ?? "top-right",
+            duration,
+            autoExpandDelayMs: auto.expandDelayMs,
+            autoCollapseDelayMs: auto.collapseDelayMs,
+            exiting: false,
+            fill: merged.fill ?? "#151515",
+        };
+    }
+    upsert(item) {
+        // console.log("[DynamicToastService] upsert", item.id, item.state);
+        // Circuit breaker for infinite loops
+        this.loopCount++;
+        if (this.loopCount > 50) {
+            console.warn("[DynamicToast] Loop detected (50+ updates/sec). Blocking update.");
+            return;
+        }
+        if (!this.loopResetTimer) {
+            this.loopResetTimer = setTimeout(() => {
+                this.loopCount = 0;
+                this.loopResetTimer = null;
+            }, 1000);
+        }
+        // Optimization: check if item really changed before anything else
+        const currentList = this._toasts();
+        const existing = currentList.find((t) => t.id === item.id);
+        if (existing && JSON.stringify(existing) === JSON.stringify(item)) {
+            return;
+        }
+        this.ensureViewport();
+        // Update state outside of Angular Zone to prevent change detection loops
+        // We will manually trigger CD only when necessary
+        this.ngZone.runOutsideAngular(() => {
+            this._toasts.update((prev) => {
+                const live = prev.filter((t) => !t.exiting);
+                const exist = live.find((t) => t.id === item.id);
+                if (exist) {
+                    return prev.map((t) => (t.id === item.id ? { ...item } : t));
+                }
+                return [...prev.filter((t) => t.id !== item.id), item];
+            });
+        });
+        // Coalesce CD updates to one per frame
+        if (!this.isPendingCD) {
+            this.isPendingCD = true;
+            this.ngZone.runOutsideAngular(() => {
+                requestAnimationFrame(() => {
+                    this.isPendingCD = false;
+                    // Only re-enter zone for CD if really needed, or run detectChanges directly
+                    this.viewportRef?.changeDetectorRef.detectChanges();
+                });
+            });
+        }
+        this.scheduleAll();
+    }
+    show(options) {
+        const merged = this.mergeOptions(options);
+        const id = merged.id ?? "dynamicToast-default";
+        const prev = this._toasts().find((t) => t.id === id && !t.exiting);
+        const item = this.buildItem(merged, id, options.state, prev?.position);
+        this.upsert(item);
+        return id;
+    }
+    info(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "info" });
+    }
+    success(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "success" });
+    }
+    warning(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "warning" });
+    }
+    error(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "error" });
+    }
+    loading(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "loading", duration: null });
+    }
+    action(a, b) {
+        const opts = typeof a === "string" ? { ...(b ?? {}), title: a } : a;
+        return this.show({ ...opts, state: "action", duration: null });
+    }
+    update(id, patch) {
+        const existing = this._toasts().find((t) => t.id === id);
+        if (!existing)
+            return;
+        const merged = this.mergeOptions({ ...existing, ...patch, id });
+        const state = patch.state ?? existing.state;
+        const item = this.buildItem(merged, id, state, existing.position);
+        this.upsert(item);
+    }
+    promise(promise, opts) {
+        const id = this.show({
+            ...opts.loading,
+            state: "loading",
+            duration: null,
+            position: opts.position,
+        });
+        const p = typeof promise === "function" ? promise() : promise;
+        p.then((data) => {
+            if (opts.action) {
+                const actionOpts = typeof opts.action === "function" ? opts.action(data) : opts.action;
+                this.update(id, { ...actionOpts, state: "action", id });
+            }
+            else {
+                const successOpts = typeof opts.success === "function" ? opts.success(data) : opts.success;
+                this.update(id, { ...successOpts, state: "success", id });
+            }
+        }).catch((err) => {
+            const errorOpts = typeof opts.error === "function" ? opts.error(err) : opts.error;
+            this.update(id, { ...errorOpts, state: "error", id });
+        });
+        return p;
+    }
+    dismiss(id) {
+        const item = this._toasts().find((t) => t.id === id);
+        if (!item || item.exiting)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            this._toasts.update((prev) => prev.map((t) => (t.id === id ? { ...t, exiting: true } : t)));
+        });
+        this.viewportRef?.changeDetectorRef.detectChanges();
+        this.ngZone.runOutsideAngular(() => {
+            window.setTimeout(() => {
+                this._toasts.update((prev) => prev.filter((t) => t.id !== id));
+                this.clearTimers();
+                this.scheduleAll();
+                this.viewportRef?.changeDetectorRef.detectChanges();
+            }, EXIT_DURATION);
+        });
+    }
+    clear(position) {
+        this._toasts.update((prev) => position ? prev.filter((t) => t.position !== position) : []);
+        this.clearTimers();
+    }
+    pauseTimers() {
+        if (this.paused)
+            return;
+        this.paused = true;
+        this.clearTimers();
+    }
+    resumeTimers() {
+        if (!this.paused)
+            return;
+        this.paused = false;
+        this.scheduleAll();
+    }
+    clearTimers() {
+        for (const t of this.timers.values())
+            window.clearTimeout(t);
+        this.timers.clear();
+    }
+    scheduleAll() {
+        if (this.paused)
+            return;
+        this.ngZone.runOutsideAngular(() => {
+            const items = this._toasts();
+            for (const item of items) {
+                if (item.exiting)
+                    continue;
+                const key = timeoutKey(item);
+                if (this.timers.has(key))
+                    continue;
+                const dur = item.duration ?? DEFAULT_TOAST_DURATION;
+                if (dur === null || dur <= 0)
+                    continue;
+                this.timers.set(key, window.setTimeout(() => {
+                    // Re-enter zone only if needed, but dismiss handles zone internally now
+                    this.dismiss(item.id);
+                }, dur));
+            }
+            const alive = new Set(items.map(timeoutKey));
+            for (const [key, timer] of this.timers) {
+                if (!alive.has(key)) {
+                    window.clearTimeout(timer);
+                    this.timers.delete(key);
+                }
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DynamicToastService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+/*
+ * Public API Surface of ngx-dynamic-toast
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AUTO_COLLAPSE_DELAY, AUTO_EXPAND_DELAY, BLUR_RATIO, DEFAULT_ROUNDNESS, DEFAULT_TOAST_DURATION, DURATION_MS, DURATION_S, DynamicToastComponent, DynamicToastService, DynamicToastViewportComponent, EXIT_DURATION, HEADER_EXIT_MS, HEIGHT, ICONS, MIN_EXPAND_RATIO, PILL_PADDING, SWAP_COLLAPSE_MS, WIDTH };
+//# sourceMappingURL=ngx-dynamic-toast.mjs.map