@cedx/base 0.17.0 → 0.19.0

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

@@ -89,15 +89,9 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "alignment":
-				this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End);
-				break;
-			case "apptheme":
-				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
-				break;
-			case "label":
-				this.#updateLabel(newValue ?? "");
-				break;
+			case "alignment": this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End); break;
+			case "apptheme": this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System); break;
+			case "label": this.#updateLabel(newValue ?? ""); break;
 			// No default
 		}
 	}

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

@@ -55,7 +55,7 @@ export class Toast extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
+	static readonly observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
 
 	/**
 	 * The time units.
@@ -174,7 +174,8 @@ export class Toast 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");
 	}
 
 	/**
@@ -196,11 +197,12 @@ export class Toast extends HTMLElement {
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
 			case "animation": this.#updateAnimation(newValue != null); break;
+			case "autohide": this.#updateAutoHide(newValue != null); break;
 			case "caption": this.#updateCaption(newValue ?? ""); break;
 			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
 			case "culture": this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"}); break;
+			case "delay": this.#updateDelay(Number(newValue)); break;
 			case "icon": this.#updateIcon(newValue); break;
-			case "open": this.#updateVisibility(newValue != null); break;
 			// No default
 		}
 	}
@@ -220,8 +222,8 @@ export class Toast extends HTMLElement {
 		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
 		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
 
-		const {animation, autoHide: autohide, delay} = this;
-		this.#toast = new BootstrapToast(toast, {animation, autohide, delay});
+		this.#toast = new BootstrapToast(toast);
+		if (this.open) this.show();
 	}
 
 	/**
@@ -260,11 +262,19 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Updates the toast animation.
+	 * Updates the value indicating whether to apply a fade transition.
 	 * @param value The new value.
 	 */
 	#updateAnimation(value: boolean): void {
-		this.firstElementChild!.classList.toggle("fade", value);
+		(this.firstElementChild! as HTMLElement).dataset.bsAnimation = value ? "true" : "false";
+	}
+
+	/**
+	 * Updates the value indicating whether to automatically hide this toast.
+	 * @param value The new value.
+	 */
+	#updateAutoHide(value: boolean): void {
+		(this.firstElementChild! as HTMLElement).dataset.bsAutohide = value ? "true" : "false";
 	}
 
 	/**
@@ -291,6 +301,15 @@ export class Toast extends HTMLElement {
 		classList.add(`text-${toCss(value)}`);
 	}
 
+	/**
+	 * Updates the delay to hide the toast.
+	 * @param value The new value.
+	 */
+	#updateDelay(value: number): void {
+		const delay = Math.max(0, Number.isNaN(value) ? 5_000 : value);
+		(this.firstElementChild! as HTMLElement).dataset.bsDelay = delay.toString();
+	}
+
 	/**
 	 * Updates the label corresponding to the elapsed time.
 	 */
@@ -306,14 +325,6 @@ export class Toast extends HTMLElement {
 	#updateIcon(value: string|null): void {
 		this.querySelector(".toast-header .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
 	}
-
-	/**
-	 * Updates the toast visibility.
-	 * @param value The new value.
-	 */
-	#updateVisibility(value: boolean): void {
-		this.firstElementChild!.classList.toggle("show", value);
-	}
 }
 
 /**

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;