@forgeroute/ui 0.4.69 → 0.4.70

package/fesm2022/forgeroute-ui.mjs

@@ -7886,66 +7886,154 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 const MIN_RESUME_MS = 1e3;
+const QUEUE_GAP_MS = 80;
+const COUNTDOWN_TICK_MS = 200;
+const DEFAULT_MAX_QUEUED = 20;
 var ToastService = class ToastService {
 	constructor() {
 		this.message = signal(null, ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
 		this.type = signal("success", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
 		this.dismissible = signal(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
 		this.persistentLiveRegion = signal(false, ...ngDevMode ? [{ debugName: "persistentLiveRegion" }] : /* istanbul ignore next */ []);
+		this.details = signal(null, ...ngDevMode ? [{ debugName: "details" }] : /* istanbul ignore next */ []);
+		this.queuedCount = signal(0, ...ngDevMode ? [{ debugName: "queuedCount" }] : /* istanbul ignore next */ []);
+		this.queueDefault = signal(false, ...ngDevMode ? [{ debugName: "queueDefault" }] : /* istanbul ignore next */ []);
+		this.countdownDefault = signal(false, ...ngDevMode ? [{ debugName: "countdownDefault" }] : /* istanbul ignore next */ []);
+		this.maxQueued = signal(DEFAULT_MAX_QUEUED, ...ngDevMode ? [{ debugName: "maxQueued" }] : /* istanbul ignore next */ []);
+		this.remainingMs = signal(0, ...ngDevMode ? [{ debugName: "remainingMs" }] : /* istanbul ignore next */ []);
+		this.totalMs = signal(0, ...ngDevMode ? [{ debugName: "totalMs" }] : /* istanbul ignore next */ []);
+		this.action$ = new Subject();
 		this._timer = null;
+		this._ticker = null;
+		this._advanceTimer = null;
 		this._deadline = 0;
 		this._remaining = 0;
 		this._paused = false;
+		this._queue = [];
 	}
-	show(msg, duration = 3e3) {
-		this._display("success", msg, duration);
+	show(msg, durationOrOptions = 3e3) {
+		this._enter("success", msg, 3e3, durationOrOptions);
 	}
-	success(msg, duration = 3e3) {
-		this._display("success", msg, duration);
+	success(msg, durationOrOptions = 3e3) {
+		this._enter("success", msg, 3e3, durationOrOptions);
 	}
-	info(msg, duration = 3e3) {
-		this._display("info", msg, duration);
+	info(msg, durationOrOptions = 3e3) {
+		this._enter("info", msg, 3e3, durationOrOptions);
 	}
-	error(msg, duration = 4e3) {
-		this._display("error", msg, duration);
+	error(msg, durationOrOptions = 4e3) {
+		this._enter("error", msg, 4e3, durationOrOptions);
+	}
+	notify(msg, options = {}) {
+		const type = options.type ?? "success";
+		this._enter(type, msg, type === "error" ? 4e3 : 3e3, options);
 	}
 	dismiss() {
-		this._clearTimer();
-		this._paused = false;
-		this.message.set(null);
+		this._finish();
+	}
+	runAction(id) {
+		const d = this.details();
+		const a = d?.actions.find((x) => x.id === id);
+		if (!d || !a || a.disabled) return;
+		d.onAction?.(id);
+		this.action$.next({
+			id,
+			key: d.key
+		});
+		if (!a.keepOpen) this._finish();
 	}
 	pause() {
 		if (this._paused || !this._timer || this.message() === null) return;
 		this._remaining = Math.max(0, this._deadline - Date.now());
+		this.remainingMs.set(this._remaining);
 		this._clearTimer();
 		this._paused = true;
 	}
 	resume() {
 		if (!this._paused) return;
 		this._paused = false;
-		this._start(Math.max(this._remaining, MIN_RESUME_MS));
+		this._start(Math.max(this._remaining, MIN_RESUME_MS), false);
 	}
 	ngOnDestroy() {
 		this._clearTimer();
+		this._clearTicker();
+		this._clearAdvance();
+		this._queue = [];
 		this._paused = false;
+		this.action$.complete();
 	}
 	_clearTimer() {
 		if (this._timer) clearTimeout(this._timer);
 		this._timer = null;
 	}
-	_start(duration) {
+	_clearTicker() {
+		if (this._ticker) clearInterval(this._ticker);
+		this._ticker = null;
+	}
+	_clearAdvance() {
+		if (this._advanceTimer) clearTimeout(this._advanceTimer);
+		this._advanceTimer = null;
+	}
+	_start(duration, fresh) {
 		this._deadline = Date.now() + duration;
-		this._timer = setTimeout(() => {
-			this.message.set(null);
-			this._timer = null;
-		}, duration);
+		this._timer = setTimeout(() => this._finish(), duration);
+		if (fresh) this.totalMs.set(duration);
+		this.remainingMs.set(duration);
+		if (this.details()?.countdown && !this._ticker) this._ticker = setInterval(() => {
+			if (!this._paused && this._timer) this.remainingMs.set(Math.max(0, this._deadline - Date.now()));
+		}, COUNTDOWN_TICK_MS);
+	}
+	_finish() {
+		this._clearTimer();
+		this._clearTicker();
+		this._paused = false;
+		this.message.set(null);
+		this.details.set(null);
+		this.remainingMs.set(0);
+		if (this._queue.length > 0 && !this._advanceTimer) this._advanceTimer = setTimeout(() => {
+			this._advanceTimer = null;
+			const next = this._queue.shift();
+			this.queuedCount.set(this._queue.length);
+			if (next) this._present(next);
+		}, QUEUE_GAP_MS);
+	}
+	_enter(type, msg, defaultDuration, arg) {
+		const options = typeof arg === "number" ? { duration: arg } : arg ?? {};
+		const hasRich = !!(options.title || options.actions?.length);
+		const countdown = options.countdown ?? this.countdownDefault();
+		const details = hasRich || countdown || options.key !== void 0 || !!options.onAction ? {
+			title: options.title,
+			actions: options.actions ?? [],
+			countdown,
+			key: options.key,
+			onAction: options.onAction
+		} : null;
+		const pending = {
+			type,
+			message: msg,
+			duration: options.duration ?? defaultDuration,
+			details
+		};
+		const queue = options.queue ?? this.queueDefault();
+		const busy = this.message() !== null || this._advanceTimer !== null;
+		if (queue && busy) {
+			const key = options.key;
+			if (key !== void 0 && (this.details()?.key === key || this._queue.some((q) => q.details?.key === key))) return;
+			if (this._queue.length >= this.maxQueued()) return;
+			this._queue.push(pending);
+			this.queuedCount.set(this._queue.length);
+			return;
+		}
+		this._clearAdvance();
+		this._present(pending);
 	}
-	_display(type, msg, duration) {
+	_present(p) {
 		this._clearTimer();
+		this._clearTicker();
 		this._paused = false;
-		this.type.set(type);
-		this.message.set(msg);
-		this._start(duration);
+		this.type.set(p.type);
+		this.details.set(p.details);
+		this.message.set(p.message);
+		this._start(p.duration, true);
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -8019,6 +8107,9 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 var ToastComponent = class ToastComponent {
+	onAction(id) {
+		this.toast.runAction(id);
+	}
 	onEscape(e) {
 		e.stopPropagation();
 		this.toast.dismiss();
@@ -8049,6 +8140,22 @@ var ToastComponent = class ToastComponent {
 		this.showClose = computed(() => this.dismissible() ?? this.toast.dismissible(), ...ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []);
 		this.persistentLiveRegion = input(null, ...ngDevMode ? [{ debugName: "persistentLiveRegion" }] : /* istanbul ignore next */ []);
 		this.persistent = computed(() => this.persistentLiveRegion() ?? this.toast.persistentLiveRegion(), ...ngDevMode ? [{ debugName: "persistent" }] : /* istanbul ignore next */ []);
+		this.queue = input(null, ...ngDevMode ? [{ debugName: "queue" }] : /* istanbul ignore next */ []);
+		this.countdown = input(null, ...ngDevMode ? [{ debugName: "countdown" }] : /* istanbul ignore next */ []);
+		this.maxQueued = input(null, ...ngDevMode ? [{ debugName: "maxQueued" }] : /* istanbul ignore next */ []);
+		this.countdownLabel = input("Dismissing in {n}s", ...ngDevMode ? [{ debugName: "countdownLabel" }] : /* istanbul ignore next */ []);
+		this.queueLabel = input("+{n} more", ...ngDevMode ? [{ debugName: "queueLabel" }] : /* istanbul ignore next */ []);
+		this.action = output();
+		this.isRich = computed(() => {
+			const d = this.toast.details();
+			return !!d && (!!d.title || d.actions.length > 0 || d.countdown);
+		}, ...ngDevMode ? [{ debugName: "isRich" }] : /* istanbul ignore next */ []);
+		this.countdownPct = computed(() => {
+			const total = this.toast.totalMs();
+			return total > 0 ? Math.min(100, Math.max(0, this.toast.remainingMs() / total * 100)) : 0;
+		}, ...ngDevMode ? [{ debugName: "countdownPct" }] : /* istanbul ignore next */ []);
+		this.countdownText = computed(() => this.countdownLabel().replace("{n}", String(Math.ceil(this.toast.remainingMs() / 1e3))), ...ngDevMode ? [{ debugName: "countdownText" }] : /* istanbul ignore next */ []);
+		this.queueText = computed(() => this.queueLabel().replace("{n}", String(this.toast.queuedCount())), ...ngDevMode ? [{ debugName: "queueText" }] : /* istanbul ignore next */ []);
 		this._adoptedMessage = signal(null, ...ngDevMode ? [{ debugName: "_adoptedMessage" }] : /* istanbul ignore next */ []);
 		this.adopted = computed(() => {
 			const m = this._adoptedMessage();
@@ -8059,6 +8166,18 @@ var ToastComponent = class ToastComponent {
 		this._focus = false;
 		this._registry.register(this._id);
 		inject(DestroyRef).onDestroy(() => this._registry.unregister(this._id));
+		effect(() => {
+			if (!this.isHost()) return;
+			const q = this.queue(), c = this.countdown(), m = this.maxQueued();
+			untracked(() => {
+				if (q !== null) this.toast.queueDefault.set(q);
+				if (c !== null) this.toast.countdownDefault.set(c);
+				if (m !== null) this.toast.maxQueued.set(Math.max(0, Math.floor(m)));
+			});
+		});
+		this.toast.action$.pipe(takeUntilDestroyed()).subscribe((e) => {
+			if (this.isHost()) this.action.emit(e);
+		});
 		effect(() => {
 			const host = this.isHost();
 			const msg = this.toast.message();
@@ -8109,8 +8228,44 @@ var ToastComponent = class ToastComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				queue: {
+					classPropertyName: "queue",
+					publicName: "queue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countdown: {
+					classPropertyName: "countdown",
+					publicName: "countdown",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxQueued: {
+					classPropertyName: "maxQueued",
+					publicName: "maxQueued",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				countdownLabel: {
+					classPropertyName: "countdownLabel",
+					publicName: "countdownLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				queueLabel: {
+					classPropertyName: "queueLabel",
+					publicName: "queueLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
+			outputs: { action: "action" },
 			ngImport: i0,
 			template: `
     @if (isHost() && persistent()) {
@@ -8128,6 +8283,7 @@ var ToastComponent = class ToastComponent {
     <ng-template #card>
       <div
         class="t-toast"
+        [class.t-rich]="isRich()"
         [class.t-error]="toast.type() === 'error'"
         [class.t-info]="toast.type() === 'info'"
         [class.t-adopted]="adopted()"
@@ -8149,7 +8305,14 @@ var ToastComponent = class ToastComponent {
             <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
           </svg>
         }
-        <span class="t-text">{{ toast.message() }}</span>
+        @if (isRich()) {
+          <span class="t-content">
+            @if (toast.details()?.title; as title) { <span class="t-title" data-testid="toast-title">{{ title }}</span> }
+            <span class="t-text">{{ toast.message() }}</span>
+          </span>
+        } @else {
+          <span class="t-text">{{ toast.message() }}</span>
+        }
         @if (showClose()) {
         <button type="button" class="t-close" aria-label="Dismiss notification" (click)="toast.dismiss()">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
@@ -8157,11 +8320,31 @@ var ToastComponent = class ToastComponent {
           </svg>
         </button>
         }
+        @if (toast.queuedCount() > 0) {
+          <span class="t-queue" data-testid="toast-queue">{{ queueText() }}</span>
+        }
+        @if (toast.details(); as d) {
+          @if (d.actions.length > 0) {
+            <div class="t-actions" role="group" aria-label="Actions" data-testid="toast-actions">
+              @for (a of d.actions; track a.id) {
+                <button type="button" class="t-action"
+                  [class.t-action-primary]="a.variant === 'primary'" [class.t-action-danger]="a.variant === 'danger'"
+                  [disabled]="a.disabled" [attr.data-testid]="'toast-action-' + a.id" (click)="onAction(a.id)">{{ a.label }}</button>
+              }
+            </div>
+          }
+          @if (d.countdown) {
+            <div class="t-countdown" aria-hidden="true">
+              <div class="t-countdown-bar"><div class="t-countdown-fill" [style.width.%]="countdownPct()" data-testid="toast-countdown-fill"></div></div>
+              <div class="t-countdown-label" data-testid="toast-countdown">{{ countdownText() }}</div>
+            </div>
+          }
+        }
       </div>
     </ng-template>
   `,
 			isInline: true,
-			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"],
+			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}.t-rich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:8px;row-gap:10px;min-width:min(320px,calc(100vw - 32px))}.t-rich>svg:first-child{margin-top:2px}.t-content{display:flex;flex-direction:column;gap:2px;min-width:0}.t-title{font-weight:700}.t-queue{grid-column:1 / -1;justify-self:end;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;background:#ffffff38}.t-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}.t-action{min-height:32px;padding:6px 14px;border-radius:8px;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;color:#fff;background:#ffffff2e;border:1px solid rgba(255,255,255,.6)}.t-action:hover:not(:disabled){background:#ffffff4d}.t-action:focus-visible{outline:2px solid #fff;outline-offset:2px}.t-action:disabled{opacity:.5;cursor:not-allowed}.t-action-primary{background:#fff;color:#0f172a;border-color:#fff}.t-action-primary:hover:not(:disabled){background:#f1f5f9}.t-action-danger{background:#7f1d1d;border-color:#ffffffb3}.t-action-danger:hover:not(:disabled){background:#991b1b}.t-countdown{grid-column:1 / -1;display:flex;flex-direction:column;gap:4px}.t-countdown-bar{height:4px;border-radius:2px;background:#ffffff47;overflow:hidden}.t-countdown-fill{height:100%;background:#fff;transition:width .2s linear}.t-countdown-label{font-size:.75rem;opacity:.85;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.t-countdown-fill{transition:none}}@media(pointer:coarse),(max-width:480px){.t-action{min-height:44px}}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"],
 			dependencies: [{
 				kind: "directive",
 				type: NgTemplateOutlet,
@@ -8204,6 +8387,7 @@ i0.ɵɵngDeclareClassMetadata({
     <ng-template #card>
       <div
         class="t-toast"
+        [class.t-rich]="isRich()"
         [class.t-error]="toast.type() === 'error'"
         [class.t-info]="toast.type() === 'info'"
         [class.t-adopted]="adopted()"
@@ -8225,7 +8409,14 @@ i0.ɵɵngDeclareClassMetadata({
             <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
           </svg>
         }
-        <span class="t-text">{{ toast.message() }}</span>
+        @if (isRich()) {
+          <span class="t-content">
+            @if (toast.details()?.title; as title) { <span class="t-title" data-testid="toast-title">{{ title }}</span> }
+            <span class="t-text">{{ toast.message() }}</span>
+          </span>
+        } @else {
+          <span class="t-text">{{ toast.message() }}</span>
+        }
         @if (showClose()) {
         <button type="button" class="t-close" aria-label="Dismiss notification" (click)="toast.dismiss()">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
@@ -8233,10 +8424,30 @@ i0.ɵɵngDeclareClassMetadata({
           </svg>
         </button>
         }
+        @if (toast.queuedCount() > 0) {
+          <span class="t-queue" data-testid="toast-queue">{{ queueText() }}</span>
+        }
+        @if (toast.details(); as d) {
+          @if (d.actions.length > 0) {
+            <div class="t-actions" role="group" aria-label="Actions" data-testid="toast-actions">
+              @for (a of d.actions; track a.id) {
+                <button type="button" class="t-action"
+                  [class.t-action-primary]="a.variant === 'primary'" [class.t-action-danger]="a.variant === 'danger'"
+                  [disabled]="a.disabled" [attr.data-testid]="'toast-action-' + a.id" (click)="onAction(a.id)">{{ a.label }}</button>
+              }
+            </div>
+          }
+          @if (d.countdown) {
+            <div class="t-countdown" aria-hidden="true">
+              <div class="t-countdown-bar"><div class="t-countdown-fill" [style.width.%]="countdownPct()" data-testid="toast-countdown-fill"></div></div>
+              <div class="t-countdown-label" data-testid="toast-countdown">{{ countdownText() }}</div>
+            </div>
+          }
+        }
       </div>
     </ng-template>
   `,
-			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"]
+			styles: [".t-live{position:absolute;width:0;height:0;margin:0;padding:0;overflow:visible}.t-toast{position:fixed;bottom:max(24px,env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);background:#047857;color:#fff;padding:11px 20px;border-radius:12px;font-size:.875rem;font-weight:500;z-index:9999;box-shadow:0 4px 16px #0000002e;animation:t-in .28s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));overflow-wrap:anywhere;word-break:break-word}.t-error{background:#dc2626}.t-info{background:#2563eb}.t-adopted{animation:none}.t-text{min-width:0}.t-close{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -10px -4px 0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}.t-close:after{content:\"\";position:absolute;inset:-8px}.t-close:hover{background:#fff3}.t-close:focus-visible{outline:2px solid #fff;outline-offset:1px}.t-rich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:8px;row-gap:10px;min-width:min(320px,calc(100vw - 32px))}.t-rich>svg:first-child{margin-top:2px}.t-content{display:flex;flex-direction:column;gap:2px;min-width:0}.t-title{font-weight:700}.t-queue{grid-column:1 / -1;justify-self:end;font-size:.75rem;font-weight:600;padding:1px 8px;border-radius:999px;background:#ffffff38}.t-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}.t-action{min-height:32px;padding:6px 14px;border-radius:8px;font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;color:#fff;background:#ffffff2e;border:1px solid rgba(255,255,255,.6)}.t-action:hover:not(:disabled){background:#ffffff4d}.t-action:focus-visible{outline:2px solid #fff;outline-offset:2px}.t-action:disabled{opacity:.5;cursor:not-allowed}.t-action-primary{background:#fff;color:#0f172a;border-color:#fff}.t-action-primary:hover:not(:disabled){background:#f1f5f9}.t-action-danger{background:#7f1d1d;border-color:#ffffffb3}.t-action-danger:hover:not(:disabled){background:#991b1b}.t-countdown{grid-column:1 / -1;display:flex;flex-direction:column;gap:4px}.t-countdown-bar{height:4px;border-radius:2px;background:#ffffff47;overflow:hidden}.t-countdown-fill{height:100%;background:#fff;transition:width .2s linear}.t-countdown-label{font-size:.75rem;opacity:.85;font-variant-numeric:tabular-nums}@media(prefers-reduced-motion:reduce){.t-countdown-fill{transition:none}}@media(pointer:coarse),(max-width:480px){.t-action{min-height:44px}}@keyframes t-in{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(prefers-reduced-motion:reduce){.t-toast{animation:none}}@media(max-width:480px){.t-toast{bottom:max(16px,env(safe-area-inset-bottom,16px));font-size:.8125rem;padding:10px 16px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -8256,6 +8467,50 @@ i0.ɵɵngDeclareClassMetadata({
 				alias: "persistentLiveRegion",
 				required: false
 			}]
+		}],
+		queue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "queue",
+				required: false
+			}]
+		}],
+		countdown: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countdown",
+				required: false
+			}]
+		}],
+		maxQueued: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxQueued",
+				required: false
+			}]
+		}],
+		countdownLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "countdownLabel",
+				required: false
+			}]
+		}],
+		queueLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "queueLabel",
+				required: false
+			}]
+		}],
+		action: [{
+			type: i0.Output,
+			args: ["action"]
 		}]
 	}
 });
@@ -13981,7 +14236,16 @@ var DataTableComponent = class DataTableComponent {
 					kind: "component",
 					type: ToastComponent,
 					selector: "ui-toast",
-					inputs: ["dismissible", "persistentLiveRegion"]
+					inputs: [
+						"dismissible",
+						"persistentLiveRegion",
+						"queue",
+						"countdown",
+						"maxQueued",
+						"countdownLabel",
+						"queueLabel"
+					],
+					outputs: ["action"]
 				},
 				{
 					kind: "component",
@@ -29555,6 +29819,9 @@ function provideForgerouteToast(options = {}) {
 	return makeEnvironmentProviders([provideEnvironmentInitializer(() => {
 		if (options.dismissible) inject(ToastService).dismissible.set(true);
 		if (options.persistentLiveRegion) inject(ToastService).persistentLiveRegion.set(true);
+		if (options.queue) inject(ToastService).queueDefault.set(true);
+		if (options.countdown) inject(ToastService).countdownDefault.set(true);
+		if (options.maxQueued !== void 0) inject(ToastService).maxQueued.set(Math.max(0, Math.floor(options.maxQueued)));
 		if (!isPlatformBrowser(inject(PLATFORM_ID))) return;
 		const doc = inject(DOCUMENT);
 		const appRef = inject(ApplicationRef);
@@ -33587,7 +33854,16 @@ var AppShellComponent = class AppShellComponent {
 					kind: "component",
 					type: ToastComponent,
 					selector: "ui-toast",
-					inputs: ["dismissible", "persistentLiveRegion"]
+					inputs: [
+						"dismissible",
+						"persistentLiveRegion",
+						"queue",
+						"countdown",
+						"maxQueued",
+						"countdownLabel",
+						"queueLabel"
+					],
+					outputs: ["action"]
 				},
 				{
 					kind: "component",
@@ -43558,7 +43834,16 @@ var CalendarComponent = class CalendarComponent {
 					kind: "component",
 					type: ToastComponent,
 					selector: "ui-toast",
-					inputs: ["dismissible", "persistentLiveRegion"]
+					inputs: [
+						"dismissible",
+						"persistentLiveRegion",
+						"queue",
+						"countdown",
+						"maxQueued",
+						"countdownLabel",
+						"queueLabel"
+					],
+					outputs: ["action"]
 				},
 				{
 					kind: "directive",
@@ -51243,7 +51528,16 @@ var ShareMenuComponent = class ShareMenuComponent {
 				kind: "component",
 				type: ToastComponent,
 				selector: "ui-toast",
-				inputs: ["dismissible", "persistentLiveRegion"]
+				inputs: [
+					"dismissible",
+					"persistentLiveRegion",
+					"queue",
+					"countdown",
+					"maxQueued",
+					"countdownLabel",
+					"queueLabel"
+				],
+				outputs: ["action"]
 			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});