@cedx/base 0.16.0 → 0.18.0

package/src/Client/UI/Components/Toaster.ts

@@ -1,52 +1,7 @@
 import {Context} from "../Context.js";
 import {createDocumentFragment} from "../ElementExtensions.js";
 import {Position, toCss} from "../Position.js";
-
-/**
- * Represents a notification.
- */
-export interface IToast {
-
-	/**
-	 * Value indicating whether to apply a fade transition.
-	 */
-	animation?: boolean;
-
-	/**
-	 * Value indicating whether to automatically hide the toast.
-	 */
-	autoHide?: boolean;
-
-	/**
-	 * The title displayed in the header.
-	 */
-	caption: string;
-
-	/**
-	 * The child content displayed in the body.
-	 */
-	childContent: DocumentFragment|string;
-
-	/**
-	 * The default contextual modifier.
-	 */
-	context?: Context;
-
-	/**
-	 * The culture used to format the relative time.
-	 */
-	culture?: Intl.Locale;
-
-	/**
-	 * The delay, in milliseconds, to hide the toast.
-	 */
-	delay?: number;
-
-	/**
-	 * The icon displayed next to the caption.
-	 */
-	icon?: string;
-}
+import type {IToast} from "./Toast.js";
 
 /**
  * Manages the notifications.
@@ -63,6 +18,14 @@ export class Toaster extends HTMLElement {
 	 */
 	readonly #toastTemplate: DocumentFragment = this.querySelector("template")!.content;
 
+	/**
+	 * Creates a new toaster.
+	 */
+	constructor() {
+		super();
+		for (const toast of this.querySelectorAll("toaster-item")) toast.addEventListener("hidden.bs.toast", () => toast.remove());
+	}
+
 	/**
 	 * Registers the component.
 	 */
@@ -77,8 +40,7 @@ export class Toaster extends HTMLElement {
 		return this.hasAttribute("animation");
 	}
 	set animation(value: boolean) {
-		if (value) this.setAttribute("animation", "");
-		else this.removeAttribute("animation");
+		this.toggleAttribute("animation", value);
 	}
 
 	/**
@@ -88,8 +50,7 @@ export class Toaster extends HTMLElement {
 		return this.hasAttribute("autohide");
 	}
 	set autoHide(value: boolean) {
-		if (value) this.setAttribute("autohide", "");
-		else this.removeAttribute("autohide");
+		this.toggleAttribute("autohide", value);
 	}
 
 	/**
@@ -156,9 +117,7 @@ export class Toaster extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "position":
-				this.#updatePosition(Object.values(Position).includes(newValue as Position) ? newValue as Position : Position.BottomEnd);
-				break;
+			case "position": this.#updatePosition(Object.values(Position).includes(newValue as Position) ? newValue as Position : Position.BottomEnd); break;
 			// No default
 		}
 	}
@@ -167,25 +126,34 @@ export class Toaster extends HTMLElement {
 	 * Shows a toast.
 	 * @param context The contextual modifier.
 	 * @param caption The title displayed in the toast header.
-	 * @param childContent The child content displayed in the toast body.
+	 * @param body The child content displayed in the toast body.
 	 */
-	notify(context: Context, caption: string, childContent: DocumentFragment|string): void {
-		this.show({context, caption, childContent});
-	}
+	show(context: Context, caption: string, body: DocumentFragment|string): void;
 
 	/**
-	 * Shows the specified toast.
+	 * Shows a toast.
 	 * @param toast The toast to show.
 	 */
-	show(toast: IToast): void {
+	show(toast: IToast): void;
+
+	/**
+	 * Shows a toast.
+	 * @param toast The toast to show, or the contextual modifier.
+	 * @param caption The title displayed in the toast header.
+	 * @param body The child content displayed in the toast body.
+	 */
+	show(toast: IToast|Context, caption = "", body: DocumentFragment|string = ""): void {
+		if (typeof toast == "string") toast = {context: toast, caption, body};
+
 		const item = document.createElement("toaster-item");
-		item.addEventListener("hidden.bs.toast", () => item.remove());
-		item.appendChild((this.#toastTemplate.cloneNode(true) as DocumentFragment).querySelector(".toast")!);
+		const childContent = (this.#toastTemplate.cloneNode(true) as DocumentFragment).querySelector(".toast")!;
+		childContent.addEventListener("hidden.bs.toast", () => item.remove());
+		item.appendChild(childContent);
 
 		item.animation = toast.animation ?? this.animation;
 		item.autoHide = toast.autoHide ?? this.autoHide;
+		item.body = typeof toast.body == "string" ? createDocumentFragment(toast.body) : toast.body;
 		item.caption = toast.caption;
-		item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
 		item.context = toast.context ?? this.context;
 		item.culture = toast.culture ?? this.culture;
 		item.delay = toast.delay ?? this.delay;