@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-toast.mjs

@@ -1,245 +1,231 @@
-import { DOCUMENT } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, Service } from '@angular/core';
-
-const DEFAULT_TOAST_DURATION_MS = 5000;
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { DestroyRef, Service, inject } from "@angular/core";
+const DEFAULT_TOAST_DURATION_MS = 5e3;
 const VARIANT_CLASSES = {
-    default: 'border-border bg-background text-foreground',
-    destructive: 'border-destructive/50 bg-destructive text-destructive-foreground',
-    success: 'border-success/50 bg-success text-success-foreground',
-    info: 'border-info/50 bg-info text-info-foreground',
-    warning: 'border-warning/50 bg-warning text-warning-foreground',
+	default: "border-border bg-background text-foreground",
+	destructive: "border-destructive/50 bg-destructive text-destructive-foreground",
+	success: "border-success/50 bg-success text-success-foreground",
+	info: "border-info/50 bg-info text-info-foreground",
+	warning: "border-warning/50 bg-warning text-warning-foreground"
 };
-const resolveToastMessage = (message, value) => typeof message === 'function' ? message(value) : message;
-/**
- * Signal-era toast tanpa dependensi Material: stack dirender ke sebuah live
- * region (`role="status"`, `aria-live="polite"`) sehingga screen reader
- * mengumumkan setiap toast.
- */
-class ToastService {
-    documentRef = inject(DOCUMENT, { optional: true });
-    container = null;
-    active = new Map();
-    constructor() {
-        // The live region is created as soon as the service is injected, and it is
-        // never taken away again.
-        //
-        // A screen reader only announces content that appears INSIDE a live region
-        // that was already there. Creating the region together with the first toast
-        // meant the first message was silently missed, and removing the region when
-        // the stack emptied made the next first message miss too. An empty region
-        // costs nothing: it is fixed, has no background, and ignores the pointer.
-        const doc = this.documentRef;
-        if (doc) {
-            this.ensureContainer(doc);
-            inject(DestroyRef).onDestroy(() => {
-                this.container?.remove();
-                this.container = null;
-            });
-        }
-    }
-    show(options) {
-        const doc = this.documentRef;
-        if (!doc) {
-            return { dismiss: () => { }, afterDismissed: Promise.resolve({ dismissedByAction: false }) };
-        }
-        const variant = options.variant ?? 'default';
-        const container = this.ensureContainer(doc);
-        // Only move the container while it is empty. The container outlives its
-        // toasts now, so repositioning it for a later toast would teleport the ones
-        // already on screen out from under the reader.
-        if (this.active.size === 0) {
-            this.applyPosition(container, options);
-        }
-        const toast = doc.createElement('div');
-        toast.className = [
-            'toast-panel pointer-events-auto flex w-80 items-start gap-3 rounded-md border p-4 shadow-lg',
-            `toast-${variant}`,
-            VARIANT_CLASSES[variant],
-        ].join(' ');
-        toast.setAttribute('data-variant', variant);
-        const body = doc.createElement('div');
-        body.className = 'flex min-w-0 flex-1 flex-col gap-1';
-        if (options.title) {
-            const title = doc.createElement('p');
-            title.className = 'text-sm font-semibold leading-tight';
-            title.textContent = options.title;
-            body.appendChild(title);
-        }
-        if (options.description) {
-            const description = doc.createElement('p');
-            description.className = 'text-sm leading-snug opacity-90';
-            description.textContent = options.description;
-            body.appendChild(description);
-        }
-        toast.appendChild(body);
-        let resolveDismiss = () => { };
-        const afterDismissed = new Promise((resolve) => {
-            resolveDismiss = resolve;
-        });
-        let timeoutId = null;
-        const duration = options.durationMs === null ? null : (options.durationMs ?? DEFAULT_TOAST_DURATION_MS);
-        let remainingMs = duration;
-        let timerStartedAt = 0;
-        const clearTimer = () => {
-            if (timeoutId !== null) {
-                (doc.defaultView ?? globalThis).clearTimeout(timeoutId);
-                timeoutId = null;
-            }
-        };
-        const dismiss = (dismissedByAction = false) => {
-            clearTimer();
-            if (!this.active.delete(toast)) {
-                return;
-            }
-            toast.remove();
-            // The container stays: see the constructor. Removing it here is what made
-            // the next first toast go unannounced.
-            resolveDismiss({ dismissedByAction });
-        };
-        const resumeTimer = () => {
-            if (remainingMs === null || timeoutId !== null) {
-                return;
-            }
-            if (remainingMs <= 0) {
-                dismiss(false);
-                return;
-            }
-            timerStartedAt = Date.now();
-            timeoutId = (doc.defaultView ?? globalThis).setTimeout(() => {
-                timeoutId = null;
-                remainingMs = 0;
-                dismiss(false);
-            }, remainingMs);
-        };
-        const pauseTimer = () => {
-            if (remainingMs === null || timeoutId === null) {
-                return;
-            }
-            remainingMs = Math.max(0, remainingMs - (Date.now() - timerStartedAt));
-            clearTimer();
-        };
-        if (options.action) {
-            const action = doc.createElement('button');
-            action.type = 'button';
-            action.className =
-                'shrink-0 rounded-md border border-current/30 px-2 py-1 text-xs font-medium transition-opacity hover:opacity-80';
-            action.textContent = options.action;
-            action.addEventListener('click', () => dismiss(true), { once: true });
-            toast.appendChild(action);
-        }
-        const dismissButton = doc.createElement('button');
-        dismissButton.type = 'button';
-        dismissButton.className =
-            'toast-dismiss shrink-0 rounded-md p-1 text-current/80 transition-opacity hover:opacity-100';
-        dismissButton.setAttribute('aria-label', options.dismissLabel ?? 'Dismiss notification');
-        const dismissIcon = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        dismissIcon.setAttribute('aria-hidden', 'true');
-        dismissIcon.setAttribute('viewBox', '0 0 24 24');
-        dismissIcon.setAttribute('width', '16');
-        dismissIcon.setAttribute('height', '16');
-        dismissIcon.setAttribute('fill', 'none');
-        dismissIcon.setAttribute('stroke', 'currentColor');
-        dismissIcon.setAttribute('stroke-width', '2');
-        const dismissPath = doc.createElementNS('http://www.w3.org/2000/svg', 'path');
-        dismissPath.setAttribute('d', 'M6 6l12 12M18 6 6 18');
-        dismissIcon.appendChild(dismissPath);
-        dismissButton.appendChild(dismissIcon);
-        dismissButton.addEventListener('click', () => dismiss(false), { once: true });
-        toast.appendChild(dismissButton);
-        container.appendChild(toast);
-        this.active.set(toast, dismiss);
-        if (duration !== null && (options.pauseOnInteraction ?? true)) {
-            toast.addEventListener('pointerenter', pauseTimer);
-            toast.addEventListener('pointerleave', resumeTimer);
-            toast.addEventListener('focusin', pauseTimer);
-            toast.addEventListener('focusout', (event) => {
-                if (!toast.contains(event.relatedTarget)) {
-                    resumeTimer();
-                }
-            });
-        }
-        resumeTimer();
-        return { dismiss: () => dismiss(false), afterDismissed };
-    }
-    success(opts) {
-        return this.show({ ...opts, variant: 'success' });
-    }
-    info(opts) {
-        return this.show({ ...opts, variant: 'info' });
-    }
-    warning(opts) {
-        return this.show({ ...opts, variant: 'warning' });
-    }
-    error(opts) {
-        return this.show({ ...opts, variant: 'destructive' });
-    }
-    async promise(taskOrFactory, messages) {
-        const loading = this.show({ title: messages.loading, durationMs: null });
-        try {
-            const task = typeof taskOrFactory === 'function' ? taskOrFactory() : taskOrFactory;
-            const value = await task;
-            loading.dismiss();
-            this.success({ title: resolveToastMessage(messages.success, value) });
-            return value;
-        }
-        catch (error) {
-            loading.dismiss();
-            this.error({ title: resolveToastMessage(messages.error, error) });
-            throw error;
-        }
-    }
-    dismiss() {
-        for (const dismiss of [...this.active.values()]) {
-            dismiss(false);
-        }
-    }
-    ensureContainer(doc) {
-        if (this.container?.isConnected) {
-            return this.container;
-        }
-        const container = doc.createElement('div');
-        container.className = 'toast-container pointer-events-none fixed z-50 flex flex-col gap-2 p-4';
-        container.setAttribute('role', 'status');
-        container.setAttribute('aria-live', 'polite');
-        doc.body.appendChild(container);
-        this.container = container;
-        return container;
-    }
-    /**
-     * Position the persistent container for the toast being shown.
-     *
-     * Applied only when the stack is empty (see {@link show}), so a run of toasts
-     * shares one corner and nothing already visible jumps. The previous corner is
-     * cleared first, so switching corners between runs works.
-     */
-    applyPosition(container, options) {
-        for (const property of ['top', 'bottom', 'left', 'right', 'transform']) {
-            container.style.removeProperty(property);
-        }
-        const vertical = options.verticalPosition ?? 'bottom';
-        const horizontal = options.horizontalPosition ?? 'end';
-        container.style.setProperty(vertical === 'top' ? 'top' : 'bottom', '0');
-        if (horizontal === 'center') {
-            container.style.setProperty('left', '50%');
-            container.style.setProperty('transform', 'translateX(-50%)');
-        }
-        else if (horizontal === 'start' || horizontal === 'left') {
-            container.style.setProperty('left', '0');
-        }
-        else {
-            container.style.setProperty('right', '0');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.4", ngImport: i0, type: ToastService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ToastService, decorators: [{
-            type: Service
-        }], ctorParameters: () => [] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ToastService };
+const resolveToastMessage = (message, value) => typeof message === "function" ? message(value) : message;
+var ToastService = class ToastService {
+	documentRef = inject(DOCUMENT, { optional: true });
+	container = null;
+	active = /* @__PURE__ */ new Map();
+	constructor() {
+		const doc = this.documentRef;
+		if (doc) {
+			this.ensureContainer(doc);
+			inject(DestroyRef).onDestroy(() => {
+				this.container?.remove();
+				this.container = null;
+			});
+		}
+	}
+	show(options) {
+		const doc = this.documentRef;
+		if (!doc) return {
+			dismiss: () => {},
+			afterDismissed: Promise.resolve({ dismissedByAction: false })
+		};
+		const variant = options.variant ?? "default";
+		const container = this.ensureContainer(doc);
+		if (this.active.size === 0) this.applyPosition(container, options);
+		const toast = doc.createElement("div");
+		toast.className = [
+			"toast-panel pointer-events-auto flex w-80 items-start gap-3 rounded-md border p-4 shadow-lg",
+			`toast-${variant}`,
+			VARIANT_CLASSES[variant]
+		].join(" ");
+		toast.setAttribute("data-variant", variant);
+		const body = doc.createElement("div");
+		body.className = "flex min-w-0 flex-1 flex-col gap-1";
+		if (options.title) {
+			const title = doc.createElement("p");
+			title.className = "text-sm font-semibold leading-tight";
+			title.textContent = options.title;
+			body.appendChild(title);
+		}
+		if (options.description) {
+			const description = doc.createElement("p");
+			description.className = "text-sm leading-snug opacity-90";
+			description.textContent = options.description;
+			body.appendChild(description);
+		}
+		toast.appendChild(body);
+		let resolveDismiss = () => {};
+		const afterDismissed = new Promise((resolve) => {
+			resolveDismiss = resolve;
+		});
+		let timeoutId = null;
+		const duration = options.durationMs === null ? null : options.durationMs ?? DEFAULT_TOAST_DURATION_MS;
+		let remainingMs = duration;
+		let timerStartedAt = 0;
+		const clearTimer = () => {
+			if (timeoutId !== null) {
+				(doc.defaultView ?? globalThis).clearTimeout(timeoutId);
+				timeoutId = null;
+			}
+		};
+		const dismiss = (dismissedByAction = false) => {
+			clearTimer();
+			if (!this.active.delete(toast)) return;
+			toast.remove();
+			resolveDismiss({ dismissedByAction });
+		};
+		const resumeTimer = () => {
+			if (remainingMs === null || timeoutId !== null) return;
+			if (remainingMs <= 0) {
+				dismiss(false);
+				return;
+			}
+			timerStartedAt = Date.now();
+			timeoutId = (doc.defaultView ?? globalThis).setTimeout(() => {
+				timeoutId = null;
+				remainingMs = 0;
+				dismiss(false);
+			}, remainingMs);
+		};
+		const pauseTimer = () => {
+			if (remainingMs === null || timeoutId === null) return;
+			remainingMs = Math.max(0, remainingMs - (Date.now() - timerStartedAt));
+			clearTimer();
+		};
+		if (options.action) {
+			const action = doc.createElement("button");
+			action.type = "button";
+			action.className = "shrink-0 rounded-md border border-current/30 px-2 py-1 text-xs font-medium transition-opacity hover:opacity-80";
+			action.textContent = options.action;
+			action.addEventListener("click", () => dismiss(true), { once: true });
+			toast.appendChild(action);
+		}
+		const dismissButton = doc.createElement("button");
+		dismissButton.type = "button";
+		dismissButton.className = "toast-dismiss shrink-0 rounded-md p-1 text-current/80 transition-opacity hover:opacity-100";
+		dismissButton.setAttribute("aria-label", options.dismissLabel ?? "Dismiss notification");
+		const dismissIcon = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+		dismissIcon.setAttribute("aria-hidden", "true");
+		dismissIcon.setAttribute("viewBox", "0 0 24 24");
+		dismissIcon.setAttribute("width", "16");
+		dismissIcon.setAttribute("height", "16");
+		dismissIcon.setAttribute("fill", "none");
+		dismissIcon.setAttribute("stroke", "currentColor");
+		dismissIcon.setAttribute("stroke-width", "2");
+		const dismissPath = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+		dismissPath.setAttribute("d", "M6 6l12 12M18 6 6 18");
+		dismissIcon.appendChild(dismissPath);
+		dismissButton.appendChild(dismissIcon);
+		dismissButton.addEventListener("click", () => dismiss(false), { once: true });
+		toast.appendChild(dismissButton);
+		container.appendChild(toast);
+		this.active.set(toast, dismiss);
+		if (duration !== null && (options.pauseOnInteraction ?? true)) {
+			toast.addEventListener("pointerenter", pauseTimer);
+			toast.addEventListener("pointerleave", resumeTimer);
+			toast.addEventListener("focusin", pauseTimer);
+			toast.addEventListener("focusout", (event) => {
+				if (!toast.contains(event.relatedTarget)) resumeTimer();
+			});
+		}
+		resumeTimer();
+		return {
+			dismiss: () => dismiss(false),
+			afterDismissed
+		};
+	}
+	success(opts) {
+		return this.show({
+			...opts,
+			variant: "success"
+		});
+	}
+	info(opts) {
+		return this.show({
+			...opts,
+			variant: "info"
+		});
+	}
+	warning(opts) {
+		return this.show({
+			...opts,
+			variant: "warning"
+		});
+	}
+	error(opts) {
+		return this.show({
+			...opts,
+			variant: "destructive"
+		});
+	}
+	async promise(taskOrFactory, messages) {
+		const loading = this.show({
+			title: messages.loading,
+			durationMs: null
+		});
+		try {
+			const value = await (typeof taskOrFactory === "function" ? taskOrFactory() : taskOrFactory);
+			loading.dismiss();
+			this.success({ title: resolveToastMessage(messages.success, value) });
+			return value;
+		} catch (error) {
+			loading.dismiss();
+			this.error({ title: resolveToastMessage(messages.error, error) });
+			throw error;
+		}
+	}
+	dismiss() {
+		for (const dismiss of [...this.active.values()]) dismiss(false);
+	}
+	ensureContainer(doc) {
+		if (this.container?.isConnected) return this.container;
+		const container = doc.createElement("div");
+		container.className = "toast-container pointer-events-none fixed z-50 flex flex-col gap-2 p-4";
+		container.setAttribute("role", "status");
+		container.setAttribute("aria-live", "polite");
+		doc.body.appendChild(container);
+		this.container = container;
+		return container;
+	}
+	applyPosition(container, options) {
+		for (const property of [
+			"top",
+			"bottom",
+			"left",
+			"right",
+			"transform"
+		]) container.style.removeProperty(property);
+		const vertical = options.verticalPosition ?? "bottom";
+		const horizontal = options.horizontalPosition ?? "end";
+		container.style.setProperty(vertical === "top" ? "top" : "bottom", "0");
+		if (horizontal === "center") {
+			container.style.setProperty("left", "50%");
+			container.style.setProperty("transform", "translateX(-50%)");
+		} else if (horizontal === "start" || horizontal === "left") container.style.setProperty("left", "0");
+		else container.style.setProperty("right", "0");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ToastService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Service
+	});
+	static ɵprov = i0.ɵɵngDeclareService({
+		minVersion: "22.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ToastService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ToastService,
+	decorators: [{ type: Service }],
+	ctorParameters: () => []
+});
+export { ToastService };