@cedx/base 0.17.0 → 0.18.0

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

@@ -18,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.
 	 */
@@ -86,7 +94,8 @@ export class Toaster extends HTMLElement {
 		return value.trim() || null;
 	}
 	set icon(value: string|null) {
-		this.toggleAttribute("icon", Boolean(value));
+		if (value) this.setAttribute("icon", value);
+		else this.removeAttribute("icon");
 	}
 
 	/**
@@ -108,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
 		}
 	}
@@ -121,18 +128,27 @@ export class Toaster extends HTMLElement {
 	 * @param caption The title displayed in the toast header.
 	 * @param body The child content displayed in the toast body.
 	 */
-	notify(context: Context, caption: string, body: DocumentFragment|string): void {
-		this.show({context, caption, body});
-	}
+	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;