@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-toast.mjs

@@ -0,0 +1,1311 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, input, output, contentChild, computed, ChangeDetectionStrategy, Component, signal, Injector, ElementRef, TemplateRef, untracked, ViewEncapsulation, Injectable, makeEnvironmentProviders } from '@angular/core';
+import { Overlay, createGlobalPositionStrategy } from '@angular/cdk/overlay';
+import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { ReplaySubject, Subject, defer, startWith } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { tv } from 'tailwind-variants';
+
+/**
+ * Per-call configuration for {@link ToastService} methods. Also used as the
+ * payload of {@link TW_TOAST_DEFAULT_OPTIONS} for app-wide defaults.
+ */
+class ToastConfig {
+    /** Severity of the toast. Defaults to `'info'`. */
+    severity = 'info';
+    /** Screen position of the toast stack. Defaults to `'bottom-right'`. */
+    position = 'bottom-right';
+    /** Auto-dismiss duration in ms. `0` disables auto-dismiss. Defaults to `5000`. */
+    duration = 5000;
+    // Default true: toasts must offer an escape hatch — sticky / long-duration toasts
+    // otherwise trap users; opt-out only for ephemeral progress markers paired with `duration`.
+    /** When true, renders a close (×) button. Defaults to `true`. */
+    dismissible = true;
+    /**
+     * Live-region politeness. When omitted, resolves to `'assertive'` for
+     * `severity: 'error'` and `'polite'` otherwise. Pass `'off'` to skip
+     * `LiveAnnouncer` entirely.
+     */
+    politeness;
+    /** Action button configuration. Omit to hide the action button. */
+    action;
+    /** Arbitrary data provided to component / template content via `TW_TOAST_DATA`. */
+    data = null;
+    /** Extra CSS classes merged onto the toast panel root via `twMerge`. */
+    panelClass;
+    /**
+     * Icon override. Pass a string (treated as text glyph / icon name) or
+     * `false` to hide the icon. When omitted the severity-default icon is used.
+     *
+     * Note: To render arbitrary icon markup, pass a `TemplateRef` to `show()`
+     * itself (the whole toast is a custom template) — the icon slot accepts only
+     * primitives for the string-content path.
+     */
+    icon;
+    // Default true: matches Material/Radix/Sonner conventions — prevents a toast from
+    // disappearing mid-read; opt-out only for fully ambient progress indicators.
+    /** When true, pause the auto-dismiss timer while the toast is hovered or holds focus. Defaults to `true`. */
+    pauseOnInteraction = true;
+    // Default true: matches mobile-platform expectations and gives non-precise pointers
+    // (touch) an easy dismiss gesture; opt-out only if the gesture conflicts with content.
+    /** Enable horizontal swipe-to-dismiss via pointer gestures. Defaults to `true`. */
+    swipeToDismiss = true;
+    /**
+     * Maximum visible toasts *per position*. When exceeded, the oldest toast in
+     * that position dismisses with reason `'max-exceeded'`. Defaults to `5`.
+     */
+    maxVisible = 5;
+    /** Explicit id. When omitted a unique id is generated. */
+    id;
+    /** Accessible label applied to the toast element. When omitted, text content is used. */
+    ariaLabel;
+    /** Accessible label applied to the per-position `role="region"` container. Defaults to `'Notifications'`. */
+    regionAriaLabel;
+}
+/** Injection token providing `config.data` to projected component / template content. */
+const TW_TOAST_DATA = new InjectionToken('TW_TOAST_DATA');
+/** Injection token providing the owning {@link ToastRef} to projected component content. */
+const TW_TOAST_REF = new InjectionToken('TW_TOAST_REF');
+/** Injection token carrying application-wide toast defaults. Set via `provideToast(defaults)`. */
+const TW_TOAST_DEFAULT_OPTIONS = new InjectionToken('TW_TOAST_DEFAULT_OPTIONS');
+
+const toastVariants = tv({
+    slots: {
+        root: 'pointer-events-auto relative flex items-start gap-3 w-full max-w-sm p-4 rounded-lg border shadow-md text-sm will-change-transform transition-colors duration-normal motion-reduce:transition-none',
+        icon: 'size-5 shrink-0 mt-0.5',
+        title: 'text-sm font-semibold',
+        description: 'text-sm',
+        content: 'flex-1 min-w-0',
+        action: 'inline-flex items-center justify-center px-3 py-1.5 rounded-md text-sm font-medium cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        // Dismiss container is `size-6` (24px — xs square-interactive-target
+        // scale per CLAUDE.md icon sub-scale). The inner SVG is `size-4` (16px
+        // glyph scale), centred via flex; the larger container gives the
+        // touch/click affordance without enlarging the visual glyph.
+        dismiss: 'absolute top-3 right-3 inline-flex items-center justify-center size-6 rounded-md cursor-pointer transition-colors duration-normal motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+    },
+    variants: {
+        severity: {
+            info: {},
+            success: {},
+            warning: {},
+            error: {},
+            neutral: {},
+        },
+    },
+    // Color slot tokens (`{role}-soft`, `-soft-fg`, `-icon`, …) own light/dark
+    // contrast — components consume the slot only. See `_semantic.css`.
+    // Slot-token safelist: see `projects/ngx-tw/theme/index.css` `@source inline(...)`
+    // — Tailwind v4's JIT cannot scan template-literal class names, so every
+    // `bg-${severity}-soft` / `text-${severity}-icon` permutation below must be
+    // enumerated there.
+    compoundVariants: ['info', 'success', 'warning', 'error', 'neutral'].map((severity) => ({
+        severity,
+        class: {
+            root: `bg-${severity}-soft text-${severity}-soft-fg-muted border-${severity}-border`,
+            icon: `text-${severity}-icon`,
+            title: `text-${severity}-soft-fg`,
+            description: `text-${severity}-soft-fg-muted`,
+            action: `text-${severity}-soft-fg hover:bg-${severity}-soft-hover`,
+            dismiss: `text-${severity}-icon hover:bg-${severity}-soft-hover`,
+        },
+    })),
+    defaultVariants: {
+        severity: 'info',
+    },
+}, { twMerge: true });
+/** Slot directive for the icon. When projected, overrides the severity-default icon. */
+class ToastIconDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.iconClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ToastIconDirective, isStandalone: true, selector: "[twToastIcon]", host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastIcon]',
+                    host: {
+                        '[class]': 'classes()',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+/** Slot directive for the bold title line inside a toast. */
+class ToastTitleDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.titleClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ToastTitleDirective, isStandalone: true, selector: "[twToastTitle]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastTitle]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+/** Slot directive for a secondary description line inside a toast. */
+class ToastDescriptionDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.descriptionClasses;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ToastDescriptionDirective, isStandalone: true, selector: "[twToastDescription]", host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastDescription]',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                }]
+        }] });
+/** Slot directive for the action button. Apply to a native `<button>` to inherit the severity-aware styling. */
+class ToastActionDirective {
+    toast = inject(ToastComponent);
+    /** @internal */
+    classes = this.toast.actionClasses;
+    /** @internal */
+    onClick() {
+        this.toast.actionClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ToastActionDirective, isStandalone: true, selector: "[twToastAction]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastActionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twToastAction]',
+                    host: {
+                        type: 'button',
+                        '[class]': 'classes()',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+/**
+ * Visual toast / snackbar panel. Rendered internally by {@link ToastService} for
+ * string content, and exported for consumers who want to compose the same
+ * visual inside a custom `TemplateRef` or component class passed to `show()`.
+ */
+class ToastComponent {
+    /** Severity variant. Drives color palette, default icon, and ARIA role / live politeness. Defaults to `'info'`. */
+    severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    // Default true: mirrors `ToastConfig.dismissible` — toasts must offer an escape
+    // hatch by default; opt-out only for ephemeral progress markers paired with `duration`.
+    /** Whether to render the close button. Defaults to `true`. */
+    dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    /**
+     * Icon override. Pass a string to render as text inside the icon slot, or
+     * `false` to hide the built-in severity icon. Ignored when a `[twToastIcon]`
+     * child is projected. When omitted, the severity-default icon renders.
+     *
+     * For arbitrary icon markup, project a `[twToastIcon]` child instead.
+     */
+    icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Explicit aria-label for the toast wrapper. When omitted, text content is used by assistive tech. */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Fires when the close button is clicked. */
+    dismissed = output();
+    /** Fires when a `[twToastAction]` button is clicked. */
+    actionClicked = output();
+    /** @internal */
+    projectedIcon = contentChild(ToastIconDirective, ...(ngDevMode ? [{ debugName: "projectedIcon" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    hasProjectedIcon = computed(() => !!this.projectedIcon(), ...(ngDevMode ? [{ debugName: "hasProjectedIcon" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => toastVariants({ severity: this.severity() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    rootClasses = computed(() => {
+        const base = this.variantResult().root();
+        return this.dismissible() ? `${base} pr-10` : base;
+    }, ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    iconClasses = computed(() => this.variantResult().icon(), ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    titleClasses = computed(() => this.variantResult().title(), ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    descriptionClasses = computed(() => this.variantResult().description(), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    contentClasses = computed(() => this.variantResult().content(), ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    actionClasses = computed(() => this.variantResult().action(), ...(ngDevMode ? [{ debugName: "actionClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    dismissClasses = computed(() => this.variantResult().dismiss(), ...(ngDevMode ? [{ debugName: "dismissClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    roleAttr = computed(() => this.severity() === 'error' ? 'alert' : 'status', ...(ngDevMode ? [{ debugName: "roleAttr" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    ariaLiveAttr = computed(() => this.severity() === 'error' ? 'assertive' : 'polite', ...(ngDevMode ? [{ debugName: "ariaLiveAttr" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ToastComponent, isStandalone: true, selector: "tw-toast", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", actionClicked: "actionClicked" }, host: { attributes: { "aria-atomic": "true" }, properties: { "class": "rootClasses()", "attr.role": "roleAttr()", "attr.aria-live": "ariaLiveAttr()", "attr.aria-label": "ariaLabel() || null", "attr.data-severity": "severity()" } }, queries: [{ propertyName: "projectedIcon", first: true, predicate: ToastIconDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (hasProjectedIcon()) {
+      <ng-content select="[twToastIcon]" />
+    } @else if (icon() !== false) {
+      <span [class]="iconClasses()" aria-hidden="true">
+        @switch (severity()) {
+          @case ('info') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('success') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('warning') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('error') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @default {
+            @if (icon() && icon() !== false) {
+              {{ icon() }}
+            }
+          }
+        }
+      </span>
+    }
+    <div [class]="contentClasses()">
+      <ng-content select="[twToastTitle]" />
+      <ng-content select="[twToastDescription]" />
+      <ng-content />
+      <ng-content select="[twToastAction]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-toast',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'rootClasses()',
+                        '[attr.role]': 'roleAttr()',
+                        '[attr.aria-live]': 'ariaLiveAttr()',
+                        'aria-atomic': 'true',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-severity]': 'severity()',
+                    },
+                    template: `
+    @if (hasProjectedIcon()) {
+      <ng-content select="[twToastIcon]" />
+    } @else if (icon() !== false) {
+      <span [class]="iconClasses()" aria-hidden="true">
+        @switch (severity()) {
+          @case ('info') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-.75 2.5a.75.75 0 0 0 0 1.5h.25v3h-.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5h-.25v-3.75a.75.75 0 0 0-.75-.75h-1Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('success') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('warning') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @case ('error') {
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-full">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
+            </svg>
+          }
+          @default {
+            @if (icon() && icon() !== false) {
+              {{ icon() }}
+            }
+          }
+        }
+      </span>
+    }
+    <div [class]="contentClasses()">
+      <ng-content select="[twToastTitle]" />
+      <ng-content select="[twToastDescription]" />
+      <ng-content />
+      <ng-content select="[twToastAction]" />
+    </div>
+    @if (dismissible()) {
+      <button
+        type="button"
+        aria-label="Dismiss"
+        [class]="dismissClasses()"
+        (click)="dismissed.emit()"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+          <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
+        </svg>
+      </button>
+    }
+  `,
+                }]
+        }], propDecorators: { severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], projectedIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ToastIconDirective), { isSignal: true }] }] } });
+
+const POSITION_AXIS = {
+    'top-right': 'right',
+    'bottom-right': 'right',
+    'top-left': 'left',
+    'bottom-left': 'left',
+    'top-center': 'top',
+    'bottom-center': 'bottom',
+};
+const POSITION_HOST_CLASSES = {
+    'top-right': 'items-end',
+    'bottom-right': 'items-end',
+    'top-left': 'items-start',
+    'bottom-left': 'items-start',
+    'top-center': 'items-center',
+    'bottom-center': 'items-center',
+};
+const POSITION_ORDER_REVERSED = {
+    'top-right': false,
+    'top-left': false,
+    'top-center': false,
+    'bottom-right': true,
+    'bottom-left': true,
+    'bottom-center': true,
+};
+const SWIPE_DISMISS_FRACTION = 0.4;
+const SWIPE_MAX_OPACITY_FADE = 0.6;
+/**
+ * Internal flex-column host rendered inside each per-position CDK overlay.
+ * Stacks visible toasts via `@for`, wires pause-on-interaction, Escape
+ * dismissal, swipe gestures, and `LiveAnnouncer` announcements.
+ *
+ * @docs-private
+ */
+class ToastContainerComponent {
+    /** Per-position stacking anchor. Mutated from {@link ToastService} via `.instance.position.set(...)`. */
+    position = signal('bottom-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Accessible label applied to the `role="region"` host. Mutated from the service on init. */
+    regionLabel = signal('Notifications', ...(ngDevMode ? [{ debugName: "regionLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Toasts currently assigned to this container. The service pushes toasts
+     * into this signal; the container filters by state to drive `animate.leave`.
+     */
+    visibleRefs = signal([], ...(ngDevMode ? [{ debugName: "visibleRefs" }] : /* istanbul ignore next */ []));
+    injector = inject(Injector);
+    liveAnnouncer = inject(LiveAnnouncer);
+    host = inject((ElementRef));
+    swipeSessions = new WeakMap();
+    entries = computed(() => {
+        const pos = this.position();
+        const axis = POSITION_AXIS[pos];
+        const enter = `toast-enter-${axis}`;
+        const leave = `toast-leave-${axis}`;
+        const refs = this.visibleRefs().filter((ref) => {
+            const s = ref.state();
+            return s === 'entering' || s === 'visible' || s === 'paused';
+        });
+        return refs.map((ref) => ({
+            ref,
+            kind: resolveKind(ref.content()),
+            enterClass: enter,
+            leaveClass: leave,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    orderedEntries = computed(() => {
+        const list = this.entries();
+        return POSITION_ORDER_REVERSED[this.position()] ? [...list].reverse() : list;
+    }, ...(ngDevMode ? [{ debugName: "orderedEntries" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const base = 'flex flex-col gap-2 w-full max-w-sm';
+        const align = POSITION_HOST_CLASSES[this.position()];
+        return `${base} ${align}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    /** @internal Called by the service right after attaching a new toast. Runs `LiveAnnouncer`. */
+    _announceOpen(ref) {
+        const politeness = this.resolvePoliteness(ref);
+        if (politeness === 'off')
+            return;
+        const msg = this.resolveAnnouncementText(ref);
+        if (msg)
+            this.liveAnnouncer.announce(msg, politeness);
+    }
+    /** @internal Called by the service when `ref.update()` fires — re-announces with the new severity / content. */
+    _announceUpdate(ref) {
+        this._announceOpen(ref);
+    }
+    /** @internal Captures the component instance after `cdkPortalOutlet` attaches. */
+    onPortalAttached(ref, attached) {
+        if (attached && 'instance' in attached) {
+            ref.componentInstance = attached.instance;
+        }
+    }
+    /** @internal Injector factory for component-class content. Provides `TW_TOAST_DATA` + `TW_TOAST_REF`. */
+    _createContentInjector(ref) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: TW_TOAST_REF, useValue: ref },
+                { provide: TW_TOAST_DATA, useValue: ref.data() },
+            ],
+        });
+    }
+    // ── Template helpers ──
+    asString(content) {
+        return typeof content === 'string' ? content : '';
+    }
+    asTemplate(content) {
+        return content instanceof TemplateRef ? content : null;
+    }
+    templateContext(ref) {
+        return { $implicit: ref.data(), ref };
+    }
+    panelClassFor(ref) {
+        const raw = ref.config.panelClass;
+        if (!raw)
+            return '';
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }
+    // ── Interaction handlers ──
+    onPointerEnter(ref) {
+        ref._setHovered(true);
+    }
+    onPointerLeave(ref) {
+        ref._setHovered(false);
+    }
+    onFocusIn(ref) {
+        ref._setFocused(true);
+    }
+    onFocusOut(ref, event) {
+        const related = event.relatedTarget;
+        const target = event.currentTarget;
+        if (related && target && target.contains(related))
+            return;
+        ref._setFocused(false);
+    }
+    onEscape(ref, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        ref._dismissWith('manual');
+    }
+    onSwipeStart(ref, event, el) {
+        if (!ref.config.swipeToDismiss)
+            return;
+        if (event.button !== 0)
+            return;
+        const target = event.target;
+        if (target?.closest('button, a, input, select, textarea, [role="button"]'))
+            return;
+        const width = el.getBoundingClientRect().width;
+        this.swipeSessions.set(ref, {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            width,
+            active: false,
+        });
+        el.setPointerCapture(event.pointerId);
+        const onMove = (e) => this.onSwipeMove(ref, e, el);
+        const onUp = (e) => this.onSwipeEnd(ref, e, el, onMove, onUp);
+        el.addEventListener('pointermove', onMove);
+        el.addEventListener('pointerup', onUp);
+        el.addEventListener('pointercancel', onUp);
+    }
+    onSwipeMove(ref, event, _el) {
+        const session = this.swipeSessions.get(ref);
+        if (!session || event.pointerId !== session.pointerId)
+            return;
+        const dx = event.clientX - session.startX;
+        if (!session.active && Math.abs(dx) < 6)
+            return;
+        session.active = true;
+        ref.swipeTransform.set(`translate3d(${dx}px, 0, 0)`);
+        const fade = 1 - Math.min(Math.abs(dx) / session.width, 1) * SWIPE_MAX_OPACITY_FADE;
+        ref.swipeOpacity.set(fade);
+    }
+    onSwipeEnd(ref, event, el, onMove, onUp) {
+        const session = this.swipeSessions.get(ref);
+        el.removeEventListener('pointermove', onMove);
+        el.removeEventListener('pointerup', onUp);
+        el.removeEventListener('pointercancel', onUp);
+        if (!session || event.pointerId !== session.pointerId)
+            return;
+        try {
+            el.releasePointerCapture(session.pointerId);
+        }
+        catch {
+            /* no-op */
+        }
+        this.swipeSessions.delete(ref);
+        if (!session.active)
+            return;
+        const dx = event.clientX - session.startX;
+        const threshold = session.width * SWIPE_DISMISS_FRACTION;
+        const allowed = this.swipeDirectionAllowed(dx);
+        if (Math.abs(dx) >= threshold && allowed) {
+            untracked(() => {
+                ref.swipeTransform.set(`translate3d(${Math.sign(dx) * session.width * 1.2}px, 0, 0)`);
+                ref.swipeOpacity.set(0);
+                ref.leaveAnimationOverride.set('fade-out');
+            });
+            ref._dismissWith('swipe');
+        }
+        else {
+            ref.swipeTransform.set(null);
+            ref.swipeOpacity.set(null);
+        }
+    }
+    swipeDirectionAllowed(dx) {
+        const pos = this.position();
+        if (pos === 'top-right' || pos === 'bottom-right')
+            return dx > 0;
+        if (pos === 'top-left' || pos === 'bottom-left')
+            return dx < 0;
+        return true;
+    }
+    resolvePoliteness(ref) {
+        if (ref.config.politeness)
+            return ref.config.politeness;
+        return ref.severity() === 'error' ? 'assertive' : 'polite';
+    }
+    resolveAnnouncementText(ref) {
+        const explicit = ref.ariaLabel();
+        if (explicit)
+            return explicit;
+        const content = ref.content();
+        if (typeof content === 'string')
+            return content;
+        const host = this.host.nativeElement.querySelector(`[data-toast-id="${ref.id}"]`);
+        if (host)
+            return host.textContent?.trim() ?? '';
+        return this.host.nativeElement.textContent?.trim() ?? '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ToastContainerComponent, isStandalone: true, selector: "tw-toast-container", host: { attributes: { "role": "region" }, properties: { "class": "hostClasses()", "attr.aria-label": "regionLabel()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    @for (entry of orderedEntries(); track entry.ref.id) {
+      <div
+        class="pointer-events-auto w-full max-w-sm"
+        [attr.data-toast-id]="entry.ref.id"
+        [style.transform]="entry.ref.swipeTransform() || null"
+        [style.opacity]="entry.ref.swipeOpacity() ?? null"
+        [style.touch-action]="'pan-y'"
+        [animate.enter]="entry.enterClass"
+        [animate.leave]="entry.ref.leaveAnimationOverride() ?? entry.leaveClass"
+        (pointerenter)="onPointerEnter(entry.ref)"
+        (pointerleave)="onPointerLeave(entry.ref)"
+        (focusin)="onFocusIn(entry.ref)"
+        (focusout)="onFocusOut(entry.ref, $event)"
+        (keydown.escape)="onEscape(entry.ref, $event)"
+        (pointerdown)="onSwipeStart(entry.ref, $event, swipeEl)"
+        #swipeEl
+      >
+        @switch (entry.kind) {
+          @case ('string') {
+            <tw-toast
+              [severity]="entry.ref.severity()"
+              [dismissible]="entry.ref.dismissible()"
+              [icon]="entry.ref.icon()"
+              [ariaLabel]="entry.ref.ariaLabel()"
+              [class]="panelClassFor(entry.ref)"
+              (dismissed)="entry.ref._dismissWith('manual')"
+              (actionClicked)="entry.ref.triggerAction()"
+            >
+              {{ asString(entry.ref.content()) }}
+              @if (entry.ref.action(); as action) {
+                <button twToastAction>{{ action.label }}</button>
+              }
+            </tw-toast>
+          }
+          @case ('template') {
+            <tw-toast
+              [severity]="entry.ref.severity()"
+              [dismissible]="entry.ref.dismissible()"
+              [icon]="entry.ref.icon()"
+              [ariaLabel]="entry.ref.ariaLabel()"
+              [class]="panelClassFor(entry.ref)"
+              (dismissed)="entry.ref._dismissWith('manual')"
+              (actionClicked)="entry.ref.triggerAction()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="asTemplate(entry.ref.content())"
+                [ngTemplateOutletContext]="templateContext(entry.ref)"
+              />
+              @if (entry.ref.action(); as action) {
+                <button twToastAction>{{ action.label }}</button>
+              }
+            </tw-toast>
+          }
+          @case ('component') {
+            <ng-template
+              [cdkPortalOutlet]="entry.ref._portal"
+              (attached)="onPortalAttached(entry.ref, $event)"
+            />
+          }
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ToastComponent, selector: "tw-toast", inputs: ["severity", "dismissible", "icon", "ariaLabel"], outputs: ["dismissed", "actionClicked"] }, { kind: "directive", type: ToastActionDirective, selector: "[twToastAction]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-toast-container',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NgTemplateOutlet, CdkPortalOutlet, ToastComponent, ToastActionDirective],
+                    host: {
+                        role: 'region',
+                        '[class]': 'hostClasses()',
+                        '[attr.aria-label]': 'regionLabel()',
+                        '[attr.data-position]': 'position()',
+                    },
+                    template: `
+    @for (entry of orderedEntries(); track entry.ref.id) {
+      <div
+        class="pointer-events-auto w-full max-w-sm"
+        [attr.data-toast-id]="entry.ref.id"
+        [style.transform]="entry.ref.swipeTransform() || null"
+        [style.opacity]="entry.ref.swipeOpacity() ?? null"
+        [style.touch-action]="'pan-y'"
+        [animate.enter]="entry.enterClass"
+        [animate.leave]="entry.ref.leaveAnimationOverride() ?? entry.leaveClass"
+        (pointerenter)="onPointerEnter(entry.ref)"
+        (pointerleave)="onPointerLeave(entry.ref)"
+        (focusin)="onFocusIn(entry.ref)"
+        (focusout)="onFocusOut(entry.ref, $event)"
+        (keydown.escape)="onEscape(entry.ref, $event)"
+        (pointerdown)="onSwipeStart(entry.ref, $event, swipeEl)"
+        #swipeEl
+      >
+        @switch (entry.kind) {
+          @case ('string') {
+            <tw-toast
+              [severity]="entry.ref.severity()"
+              [dismissible]="entry.ref.dismissible()"
+              [icon]="entry.ref.icon()"
+              [ariaLabel]="entry.ref.ariaLabel()"
+              [class]="panelClassFor(entry.ref)"
+              (dismissed)="entry.ref._dismissWith('manual')"
+              (actionClicked)="entry.ref.triggerAction()"
+            >
+              {{ asString(entry.ref.content()) }}
+              @if (entry.ref.action(); as action) {
+                <button twToastAction>{{ action.label }}</button>
+              }
+            </tw-toast>
+          }
+          @case ('template') {
+            <tw-toast
+              [severity]="entry.ref.severity()"
+              [dismissible]="entry.ref.dismissible()"
+              [icon]="entry.ref.icon()"
+              [ariaLabel]="entry.ref.ariaLabel()"
+              [class]="panelClassFor(entry.ref)"
+              (dismissed)="entry.ref._dismissWith('manual')"
+              (actionClicked)="entry.ref.triggerAction()"
+            >
+              <ng-container
+                [ngTemplateOutlet]="asTemplate(entry.ref.content())"
+                [ngTemplateOutletContext]="templateContext(entry.ref)"
+              />
+              @if (entry.ref.action(); as action) {
+                <button twToastAction>{{ action.label }}</button>
+              }
+            </tw-toast>
+          }
+          @case ('component') {
+            <ng-template
+              [cdkPortalOutlet]="entry.ref._portal"
+              (attached)="onPortalAttached(entry.ref, $event)"
+            />
+          }
+        }
+      </div>
+    }
+  `,
+                }]
+        }] });
+function resolveKind(content) {
+    if (typeof content === 'string')
+        return 'string';
+    if (content instanceof TemplateRef)
+        return 'template';
+    return 'component';
+}
+
+/** Duration (ms) of the toast enter / leave animation. Must match `_base.css` toast-slide keyframes. */
+const TOAST_ANIMATION_DURATION = 150;
+/** Padding added to animation fallback timers to guarantee cleanup if the CSS event is swallowed. */
+const TOAST_ANIMATION_FALLBACK_PADDING = 50;
+/**
+ * Reference to a toast opened via {@link ToastService}. Use to dismiss the
+ * toast, pause / resume its auto-dismiss timer, or observe its lifecycle.
+ *
+ * The service returns a ref synchronously from every open method; the toast
+ * itself is attached asynchronously inside the CDK overlay.
+ */
+class ToastRef {
+    dismissCallback;
+    /** Unique id. Generated if `config.id` was not provided. */
+    id;
+    /** Instance of the component rendered inside the toast (only for component-class content). */
+    componentInstance = null;
+    /** Resolved static config for this toast (defaults merged, severity shorthand applied). */
+    config;
+    /** Reactive lifecycle state. */
+    state;
+    /** Reactive severity — may change after `update()` (used by the `promise()` helper). */
+    severity;
+    /** Reactive dismissibility. */
+    dismissible;
+    /** Reactive icon override. */
+    icon;
+    /** Reactive content (the source of truth for what gets rendered). */
+    content;
+    /** Reactive action button configuration. */
+    action;
+    /** Reactive accessible label. */
+    ariaLabel;
+    /** Reactive data payload — re-read by the container to update `TW_TOAST_DATA`. */
+    data;
+    /** @internal Reactive "transient" class applied by swipe gestures (e.g. `translate3d(...)`). */
+    swipeTransform = signal(null, ...(ngDevMode ? [{ debugName: "swipeTransform" }] : /* istanbul ignore next */ []));
+    /** @internal Reactive opacity applied during swipe gestures. */
+    swipeOpacity = signal(null, ...(ngDevMode ? [{ debugName: "swipeOpacity" }] : /* istanbul ignore next */ []));
+    /** @internal Leave-animation class override. When non-null, container uses this instead of the position default. */
+    leaveAnimationOverride = signal(null, ...(ngDevMode ? [{ debugName: "leaveAnimationOverride" }] : /* istanbul ignore next */ []));
+    /** @internal Portal for component-class content. Set by the service; null for string / template content. */
+    _portal = null;
+    /** @internal True while the pointer hovers this toast. */
+    _hovered = false;
+    /** @internal True while focus is within this toast. */
+    _focused = false;
+    /** @internal Set by the service so the ref can reach the CDK-owned OverlayRef if it needs to. */
+    _overlayPanelElement = null;
+    stateSignal = signal('entering', ...(ngDevMode ? [{ debugName: "stateSignal" }] : /* istanbul ignore next */ []));
+    severitySignal;
+    dismissibleSignal;
+    iconSignal;
+    contentSignal;
+    actionSignal;
+    ariaLabelSignal;
+    dataSignal;
+    afterOpenedSubject = new ReplaySubject(1);
+    beforeDismissedSubject = new ReplaySubject(1);
+    afterDismissedSubject = new ReplaySubject(1);
+    updatedSubject = new Subject();
+    dismissReason = 'programmatic';
+    dismissResult;
+    autoDismissTimer = null;
+    autoDismissStartedAt = 0;
+    autoDismissRemaining = 0;
+    paused = false;
+    enterTimer = null;
+    leaveTimer = null;
+    constructor(id, content, config, dismissCallback) {
+        this.dismissCallback = dismissCallback;
+        this.id = id;
+        this.config = config;
+        this.severitySignal = signal(config.severity ?? 'info', ...(ngDevMode ? [{ debugName: "severitySignal" }] : /* istanbul ignore next */ []));
+        this.dismissibleSignal = signal(config.dismissible ?? true, ...(ngDevMode ? [{ debugName: "dismissibleSignal" }] : /* istanbul ignore next */ []));
+        this.iconSignal = signal(typeof config.icon === 'string' || config.icon === false ? config.icon : undefined, ...(ngDevMode ? [{ debugName: "iconSignal" }] : /* istanbul ignore next */ []));
+        this.contentSignal = signal(content, ...(ngDevMode ? [{ debugName: "contentSignal" }] : /* istanbul ignore next */ []));
+        this.actionSignal = signal(config.action, ...(ngDevMode ? [{ debugName: "actionSignal" }] : /* istanbul ignore next */ []));
+        this.ariaLabelSignal = signal(config.ariaLabel, ...(ngDevMode ? [{ debugName: "ariaLabelSignal" }] : /* istanbul ignore next */ []));
+        this.dataSignal = signal(config.data ?? null, ...(ngDevMode ? [{ debugName: "dataSignal" }] : /* istanbul ignore next */ []));
+        this.state = this.stateSignal.asReadonly();
+        this.severity = this.severitySignal.asReadonly();
+        this.dismissible = this.dismissibleSignal.asReadonly();
+        this.icon = this.iconSignal.asReadonly();
+        this.content = this.contentSignal.asReadonly();
+        this.action = this.actionSignal.asReadonly();
+        this.ariaLabel = this.ariaLabelSignal.asReadonly();
+        this.data = this.dataSignal.asReadonly();
+        this.autoDismissRemaining = config.duration ?? 0;
+        this.enterTimer = setTimeout(() => this._markVisible(), TOAST_ANIMATION_DURATION + TOAST_ANIMATION_FALLBACK_PADDING);
+    }
+    /**
+     * Dismiss the toast programmatically. The leave animation plays before the
+     * element is removed and subscribers are notified. Safe to call multiple times.
+     */
+    dismiss(result) {
+        this._dismissWith('programmatic', result);
+    }
+    /** Pause the auto-dismiss timer (if any). Called automatically on hover / focus when `pauseOnInteraction` is true. */
+    pause() {
+        if (this.paused)
+            return;
+        this.paused = true;
+        if (this.autoDismissTimer !== null) {
+            const elapsed = Date.now() - this.autoDismissStartedAt;
+            this.autoDismissRemaining = Math.max(0, this.autoDismissRemaining - elapsed);
+            clearTimeout(this.autoDismissTimer);
+            this.autoDismissTimer = null;
+        }
+        const current = this.stateSignal();
+        if (current === 'visible')
+            this.stateSignal.set('paused');
+    }
+    /** Resume the auto-dismiss timer with the remaining time. */
+    resume() {
+        if (!this.paused)
+            return;
+        this.paused = false;
+        if (this.stateSignal() === 'paused')
+            this.stateSignal.set('visible');
+        if (this.config.duration && this.config.duration > 0) {
+            if (this.autoDismissRemaining <= 0) {
+                this._dismissWith('timeout');
+                return;
+            }
+            this._startAutoDismissTimer();
+        }
+    }
+    /**
+     * @internal Update the hover state. When `pauseOnInteraction` is set and
+     * either hover or focus is active, the auto-dismiss timer is paused.
+     */
+    _setHovered(hovered) {
+        this._hovered = hovered;
+        this._syncInteractionPause();
+    }
+    /** @internal Update the focus-within state. See `_setHovered`. */
+    _setFocused(focused) {
+        this._focused = focused;
+        this._syncInteractionPause();
+    }
+    _syncInteractionPause() {
+        if (!this.config.pauseOnInteraction)
+            return;
+        if (this._hovered || this._focused) {
+            this.pause();
+        }
+        else {
+            this.resume();
+        }
+    }
+    /** Invoke the configured action handler (or dismiss with reason `'action'` if none is set). */
+    triggerAction() {
+        const action = this.actionSignal();
+        if (!action)
+            return;
+        if (action.handler) {
+            action.handler(this);
+        }
+        else {
+            this._dismissWith('action');
+        }
+    }
+    /** Mutate the live toast in place. Used by the `promise()` helper to swap loading → success / error. */
+    update(patch) {
+        const currentState = this.stateSignal();
+        if (currentState === 'dismissing' || currentState === 'dismissed')
+            return;
+        if (patch.severity !== undefined)
+            this.severitySignal.set(patch.severity);
+        if (patch.dismissible !== undefined)
+            this.dismissibleSignal.set(patch.dismissible);
+        if (patch.icon !== undefined)
+            this.iconSignal.set(patch.icon);
+        if (patch.content !== undefined)
+            this.contentSignal.set(patch.content);
+        if (patch.action !== undefined)
+            this.actionSignal.set(patch.action ?? undefined);
+        if (patch.ariaLabel !== undefined)
+            this.ariaLabelSignal.set(patch.ariaLabel);
+        if (patch.data !== undefined)
+            this.dataSignal.set(patch.data);
+        if (patch.duration !== undefined) {
+            this.config.duration = patch.duration;
+            this.autoDismissRemaining = patch.duration;
+            if (this.autoDismissTimer !== null) {
+                clearTimeout(this.autoDismissTimer);
+                this.autoDismissTimer = null;
+            }
+            if (!this.paused && (currentState === 'visible' || currentState === 'paused')) {
+                this._startAutoDismissTimer();
+            }
+        }
+        this.updatedSubject.next(patch);
+    }
+    /** Observable that emits once after the enter animation completes. */
+    afterOpened() {
+        return this.afterOpenedSubject.asObservable();
+    }
+    /** Observable that emits once when the dismiss sequence starts. */
+    beforeDismissed() {
+        return this.beforeDismissedSubject.asObservable();
+    }
+    /** Observable that emits once after the leave animation completes and the ref is cleaned up. */
+    afterDismissed() {
+        return this.afterDismissedSubject.asObservable();
+    }
+    /** @internal Observable of `update()` calls. The container subscribes to re-announce to `LiveAnnouncer`. */
+    _updates() {
+        return this.updatedSubject.asObservable();
+    }
+    /** @internal Called by the service when the max-visible cap is exceeded. */
+    _dismissAsMaxExceeded() {
+        this._dismissWith('max-exceeded');
+    }
+    /** @internal Start the dismiss sequence with the given reason. */
+    _dismissWith(reason, result) {
+        const currentState = this.stateSignal();
+        if (currentState === 'dismissing' || currentState === 'dismissed')
+            return;
+        this.dismissReason = reason;
+        this.dismissResult = result;
+        this.stateSignal.set('dismissing');
+        if (this.autoDismissTimer !== null) {
+            clearTimeout(this.autoDismissTimer);
+            this.autoDismissTimer = null;
+        }
+        if (this.enterTimer !== null) {
+            clearTimeout(this.enterTimer);
+            this.enterTimer = null;
+        }
+        this.beforeDismissedSubject.next(result);
+        this.beforeDismissedSubject.complete();
+        this.leaveTimer = setTimeout(() => this._finishDismiss(), TOAST_ANIMATION_DURATION + TOAST_ANIMATION_FALLBACK_PADDING);
+    }
+    /** @internal Finalise dismissal — clears timers, emits `afterDismissed`, and hands control back to the service. */
+    _finishDismiss() {
+        if (this.stateSignal() === 'dismissed')
+            return;
+        this.stateSignal.set('dismissed');
+        if (this.leaveTimer !== null) {
+            clearTimeout(this.leaveTimer);
+            this.leaveTimer = null;
+        }
+        const dismissal = {
+            reason: this.dismissReason,
+            result: this.dismissResult,
+        };
+        this.afterDismissedSubject.next(dismissal);
+        this.afterDismissedSubject.complete();
+        this.updatedSubject.complete();
+        this.dismissCallback(this);
+    }
+    _markVisible() {
+        if (this.enterTimer !== null) {
+            clearTimeout(this.enterTimer);
+            this.enterTimer = null;
+        }
+        const current = this.stateSignal();
+        if (current !== 'entering')
+            return;
+        this.stateSignal.set('visible');
+        this.afterOpenedSubject.next();
+        this.afterOpenedSubject.complete();
+        if (this.config.duration && this.config.duration > 0 && !this.paused) {
+            this._startAutoDismissTimer();
+        }
+    }
+    _startAutoDismissTimer() {
+        if (this.autoDismissRemaining <= 0)
+            return;
+        if (this.autoDismissTimer !== null)
+            clearTimeout(this.autoDismissTimer);
+        this.autoDismissStartedAt = Date.now();
+        this.autoDismissTimer = setTimeout(() => this._dismissWith('timeout'), this.autoDismissRemaining);
+    }
+}
+
+const OVERLAY_EDGE_OFFSET = '1rem';
+let nextToastId = 0;
+function generateId() {
+    return `tw-toast-${++nextToastId}`;
+}
+/**
+ * Opens Tailwind-styled toasts / snackbars inside CDK overlays. One overlay is
+ * created per `ToastPosition` on first use and reused for the lifetime of the
+ * service; toasts stack vertically inside their position container.
+ *
+ * Not `providedIn: 'root'` — register via {@link provideToast}.
+ */
+class ToastService {
+    overlay = inject(Overlay);
+    injector = inject(Injector);
+    defaultOptions = inject(TW_TOAST_DEFAULT_OPTIONS, { optional: true }) ?? {};
+    parent = inject(ToastService, { optional: true, skipSelf: true });
+    positionOverlays = new Map();
+    activeRefsAtThisLevel = signal([], ...(ngDevMode ? [{ debugName: "activeRefsAtThisLevel" }] : /* istanbul ignore next */ []));
+    afterOpenedSubject = new Subject();
+    afterAllDismissedSubject = new Subject();
+    /** Reactive list of every toast that has not yet fully dismissed. */
+    activeToasts = this.parent
+        ? this.parent.activeToasts
+        : this.activeRefsAtThisLevel.asReadonly();
+    /** Emits every time a new toast is opened. */
+    afterOpened = this.parent
+        ? this.parent.afterOpened
+        : this.afterOpenedSubject.asObservable();
+    /** Emits when the active-toasts list transitions back to empty. Emits immediately on subscribe if none are open. */
+    afterAllDismissed = defer(() => this.activeToasts().length
+        ? this.getAfterAllDismissedSource()
+        : this.getAfterAllDismissedSource().pipe(startWith(undefined)));
+    /**
+     * Open a toast. Content may be a string (rendered inside the default
+     * `ToastComponent`), a `TemplateRef` (rendered via `TemplatePortal`), or a
+     * component class (rendered via `ComponentPortal` with `TW_TOAST_REF` +
+     * `TW_TOAST_DATA` injected).
+     */
+    show(content, config) {
+        const merged = this.resolveConfig(config);
+        return this.openInternal(content, merged);
+    }
+    /** Shorthand for `show(message, { severity: 'success', ... })`. */
+    success(message, config) {
+        return this.openWithSeverity('success', message, config);
+    }
+    /** Shorthand for `show(message, { severity: 'error', politeness: 'assertive', ... })`. */
+    error(message, config) {
+        return this.openWithSeverity('error', message, config, 'assertive');
+    }
+    /** Shorthand for `show(message, { severity: 'warning', ... })`. */
+    warning(message, config) {
+        return this.openWithSeverity('warning', message, config);
+    }
+    /** Shorthand for `show(message, { severity: 'info', ... })`. */
+    info(message, config) {
+        return this.openWithSeverity('info', message, config);
+    }
+    /**
+     * Show a loading toast, then swap it to success / error when the promise
+     * settles. The same ref is returned and re-used across all three states.
+     * The loading toast is pinned (duration forced to 0, dismissible forced to
+     * false) until the promise resolves.
+     */
+    promise(promise, messages, config) {
+        const resolvedDuration = config?.duration ?? this.defaultOptions.duration ?? 5000;
+        const ref = this.show(messages.loading, {
+            ...config,
+            severity: 'neutral',
+            duration: 0,
+            dismissible: false,
+        });
+        promise.then((value) => {
+            if (ref.state() === 'dismissed' || ref.state() === 'dismissing')
+                return;
+            const msg = typeof messages.success === 'function' ? messages.success(value) : messages.success;
+            ref.update({
+                severity: 'success',
+                content: msg,
+                duration: resolvedDuration,
+                dismissible: config?.dismissible ?? true,
+            });
+            this.announceUpdate(ref);
+        }, (err) => {
+            if (ref.state() === 'dismissed' || ref.state() === 'dismissing')
+                return;
+            const msg = typeof messages.error === 'function' ? messages.error(err) : messages.error;
+            ref.update({
+                severity: 'error',
+                content: msg,
+                duration: resolvedDuration,
+                dismissible: config?.dismissible ?? true,
+            });
+            this.announceUpdate(ref);
+        });
+        return ref;
+    }
+    /** Dismiss a toast by id. No-op if no matching toast is active. */
+    dismiss(id) {
+        const match = this.activeToasts().find((ref) => ref.id === id);
+        if (match)
+            match.dismiss();
+    }
+    /** Dismiss every active toast across every position. */
+    dismissAll() {
+        const refs = [...this.activeToasts()];
+        for (let i = refs.length - 1; i >= 0; i--)
+            refs[i].dismiss();
+    }
+    /** Look up an active toast by id. */
+    getToastById(id) {
+        return this.activeToasts().find((ref) => ref.id === id);
+    }
+    ngOnDestroy() {
+        const refs = [...this.activeRefsAtThisLevel()];
+        for (let i = refs.length - 1; i >= 0; i--)
+            refs[i]._finishDismiss();
+        for (const { overlayRef } of this.positionOverlays.values()) {
+            overlayRef.dispose();
+        }
+        this.positionOverlays.clear();
+        this.afterOpenedSubject.complete();
+        this.afterAllDismissedSubject.complete();
+    }
+    openWithSeverity(severity, message, config, forcedPoliteness) {
+        const merged = this.resolveConfig(config);
+        merged.severity = severity;
+        if (forcedPoliteness && !config?.politeness)
+            merged.politeness = forcedPoliteness;
+        return this.openInternal(message, merged);
+    }
+    openInternal(content, config) {
+        const id = config.id ?? generateId();
+        config.id = id;
+        const ref = new ToastRef(id, content, config, (dismissed) => this.handleDismissed(dismissed));
+        if (isComponentConstructor(content)) {
+            const injector = this.getContainerForPosition(config.position).containerRef.instance._createContentInjector(ref);
+            ref._portal = new ComponentPortal(content, null, injector);
+        }
+        this.enforceMaxVisible(config.position, config.maxVisible ?? 5);
+        this.registerOpen(ref);
+        this.attachToContainer(ref, config.position);
+        this.announceOpen(ref);
+        return ref;
+    }
+    enforceMaxVisible(position, max) {
+        if (max <= 0)
+            return;
+        const atPosition = this.activeToasts().filter((ref) => (ref.config.position ?? 'bottom-right') === position &&
+            ref.state() !== 'dismissing' &&
+            ref.state() !== 'dismissed');
+        while (atPosition.length >= max) {
+            const oldest = atPosition.shift();
+            if (!oldest)
+                break;
+            oldest._dismissAsMaxExceeded();
+        }
+    }
+    registerOpen(ref) {
+        const scope = this.parent ?? this;
+        const anyRef = ref;
+        scope.activeRefsAtThisLevel.update((list) => [...list, anyRef]);
+        scope.afterOpenedSubject.next(anyRef);
+    }
+    handleDismissed(ref) {
+        const scope = this.parent ?? this;
+        scope.activeRefsAtThisLevel.update((list) => list.filter((r) => r !== ref));
+        const position = ref.config.position ?? 'bottom-right';
+        const entry = this.positionOverlays.get(position);
+        if (entry) {
+            const instance = entry.containerRef.instance;
+            instance.visibleRefs.update((list) => list.filter((r) => r !== ref));
+        }
+        if (scope.activeRefsAtThisLevel().length === 0) {
+            scope.afterAllDismissedSubject.next();
+        }
+    }
+    attachToContainer(ref, position) {
+        const entry = this.getContainerForPosition(position);
+        const instance = entry.containerRef.instance;
+        const anyRef = ref;
+        instance.visibleRefs.update((list) => [...list, anyRef]);
+        ref._overlayPanelElement = entry.overlayRef.overlayElement;
+    }
+    announceOpen(ref) {
+        const entry = this.positionOverlays.get(ref.config.position ?? 'bottom-right');
+        entry?.containerRef.instance._announceOpen(ref);
+    }
+    announceUpdate(ref) {
+        const entry = this.positionOverlays.get(ref.config.position ?? 'bottom-right');
+        entry?.containerRef.instance._announceUpdate(ref);
+    }
+    getContainerForPosition(position) {
+        const existing = this.positionOverlays.get(position);
+        if (existing)
+            return existing;
+        const overlayRef = this.overlay.create({
+            positionStrategy: this.buildPositionStrategy(position),
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            hasBackdrop: false,
+            panelClass: ['tw-toast-overlay', `tw-toast-overlay-${position}`],
+        });
+        const containerPortal = new ComponentPortal(ToastContainerComponent, null, this.injector);
+        const containerRef = overlayRef.attach(containerPortal);
+        containerRef.instance.position.set(position);
+        containerRef.instance.regionLabel.set(this.defaultOptions.regionAriaLabel ?? 'Notifications');
+        const entry = { overlayRef, containerRef };
+        this.positionOverlays.set(position, entry);
+        return entry;
+    }
+    buildPositionStrategy(position) {
+        const strategy = createGlobalPositionStrategy(this.injector);
+        switch (position) {
+            case 'top-right':
+                strategy.top(OVERLAY_EDGE_OFFSET).right(OVERLAY_EDGE_OFFSET);
+                break;
+            case 'top-left':
+                strategy.top(OVERLAY_EDGE_OFFSET).left(OVERLAY_EDGE_OFFSET);
+                break;
+            case 'top-center':
+                strategy.top(OVERLAY_EDGE_OFFSET).centerHorizontally();
+                break;
+            case 'bottom-right':
+                strategy.bottom(OVERLAY_EDGE_OFFSET).right(OVERLAY_EDGE_OFFSET);
+                break;
+            case 'bottom-left':
+                strategy.bottom(OVERLAY_EDGE_OFFSET).left(OVERLAY_EDGE_OFFSET);
+                break;
+            case 'bottom-center':
+                strategy.bottom(OVERLAY_EDGE_OFFSET).centerHorizontally();
+                break;
+        }
+        return strategy;
+    }
+    resolveConfig(config) {
+        const merged = new ToastConfig();
+        Object.assign(merged, this.defaultOptions, config);
+        return merged;
+    }
+    getAfterAllDismissedSource() {
+        return this.parent ? this.parent.getAfterAllDismissedSource() : this.afterAllDismissedSubject;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable
+        }] });
+function isComponentConstructor(value) {
+    return typeof value === 'function' && !(value instanceof TemplateRef);
+}
+/**
+ * Registers {@link ToastService} for dependency injection and installs optional
+ * application-wide defaults.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideToast({ position: 'top-right', duration: 4000 })]
+ * });
+ * ```
+ */
+function provideToast(defaultOptions) {
+    const providers = [ToastService];
+    if (defaultOptions) {
+        providers.push({ provide: TW_TOAST_DEFAULT_OPTIONS, useValue: defaultOptions });
+    }
+    return makeEnvironmentProviders(providers);
+}
+const ToastInternals = {
+    /** @internal Reset id counter for tests. */
+    _resetIdForTesting() {
+        nextToastId = 0;
+    },
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TW_TOAST_DATA, TW_TOAST_DEFAULT_OPTIONS, TW_TOAST_REF, ToastActionDirective, ToastComponent, ToastConfig, ToastDescriptionDirective, ToastIconDirective, ToastRef, ToastService, ToastTitleDirective, provideToast };
+//# sourceMappingURL=cdevhub-ngx-tw-toast.mjs.map