@cedx/base 0.16.0 → 0.18.0

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

@@ -0,0 +1,417 @@
+import {Modal} from "bootstrap";
+import {Context, getIcon, toCss} from "../Context.js";
+import {DialogResult} from "../DialogResult.js";
+import {createDocumentFragment} from "../ElementExtensions.js";
+import {Variant} from "../Variant.js";
+import type {DialogButton, IDialogButton} from "./DialogButton.js";
+
+/**
+ * Represents a message to display in a dialog box.
+ */
+export interface IMessage {
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	animation?: boolean;
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	body: DocumentFragment|string;
+
+	/**
+	 * The title displayed in the header.
+	 */
+	caption: string;
+
+	/**
+	 * Value indicating whether to vertically center this message box.
+	 */
+	centered?: boolean;
+
+	/**
+	 * A contextual modifier.
+	 */
+	context?: Context;
+
+	/**
+	 * The child content displayed in the footer.
+	 */
+	footer?: DocumentFragment|string;
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	icon?: string|null;
+
+	/**
+	 * Value indicating whether the body is scrollable.
+	 */
+	scrollable?: boolean;
+}
+
+/**
+ * Displays a message window, also known as dialog box, which presents a message to the user.
+ */
+export class MessageBox extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+
+	/**
+	 * The template for a button.
+	 */
+	readonly #buttonTemplate: DocumentFragment = this.querySelector("template")!.content;
+
+	/**
+	 * The underlying Bootstrap modal.
+	 */
+	#modal!: Modal;
+
+	/**
+	 * The function invoked to return the dialog box result.
+	 */
+	#resolve: (value: DialogResult) => void = () => { /* Noop */ };
+
+	/**
+	 * The dialog result.
+	 */
+	#result: DialogResult = DialogResult.None;
+
+	/**
+	 * Creates a new message box.
+	 */
+	constructor() {
+		super();
+		this.firstElementChild!.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
+		this.querySelector(".btn-close")!.addEventListener("click", this.#close);
+		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close);
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("message-box", this);
+	}
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	get animation(): boolean {
+		return this.hasAttribute("animation");
+	}
+	set animation(value: boolean) {
+		this.toggleAttribute("animation", value);
+	}
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		this.querySelector(".modal-body > div")!.replaceChildren(...value.childNodes);
+	}
+
+	/**
+	 * The title displayed in the header.
+	 */
+	get caption(): string {
+		return (this.getAttribute("caption") ?? "").trim();
+	}
+	set caption(value: string) {
+		this.setAttribute("caption", value);
+	}
+
+	/**
+	 * Value indicating whether to vertically center this message box.
+	 */
+	get centered(): boolean {
+		return this.hasAttribute("centered");
+	}
+	set centered(value: boolean) {
+		this.toggleAttribute("centered", value);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : Context.Info;
+	}
+	set context(value: Context) {
+		this.setAttribute("context", value);
+	}
+
+	/**
+	 * The child content displayed in the footer.
+	 */
+	set footer(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		const footer = this.querySelector<HTMLElement>(".modal-footer")!;
+		footer.hidden = !value.hasChildNodes();
+		footer.replaceChildren(...value.childNodes);
+	}
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	get icon(): string|null {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || null;
+	}
+	set icon(value: string|null) {
+		this.toggleAttribute("icon", Boolean(value));
+	}
+
+	/**
+	 * Value indicating whether to this message box will not close when clicking outside of it.
+	 */
+	get modal(): boolean {
+		return this.hasAttribute("modal");
+	}
+	set modal(value: boolean) {
+		this.toggleAttribute("modal", value);
+	}
+
+	/**
+	 * Value indicating whether to initially show this message box.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", value);
+	}
+
+	/**
+	 * Value indicating whether the body is scrollable.
+	 */
+	get scrollable(): boolean {
+		return this.hasAttribute("scrollable");
+	}
+	set scrollable(value: boolean) {
+		this.toggleAttribute("scrollable", value);
+	}
+
+	/**
+	 * Method invoked when an attribute has been changed.
+	 * @param attribute The attribute name.
+	 * @param oldValue The previous attribute value.
+	 * @param newValue The new attribute value.
+	 */
+	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
+		if (newValue != oldValue) switch (attribute) {
+			case "animation": this.#updateAnimation(newValue != null); break;
+			case "caption": this.#updateCaption(newValue ?? ""); break;
+			case "centered": this.#updateCentered(newValue != null); break;
+			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
+			case "icon": this.#updateIcon(newValue); break;
+			case "modal": this.#updateModal(newValue != null); break;
+			case "scrollable": this.#updateScrolling(newValue != null); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Shows an alert message with an "OK" button.
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @returns The dialog box result.
+	 */
+	async alert(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
+		return await this.show(context, caption, body, [
+			{label: "OK", value: DialogResult.OK, variant: Variant.Primary}
+		]);
+	}
+
+	/**
+	 * Closes this message box.
+	 * @param result The dialog box result.
+	 */
+	close(result: DialogResult = DialogResult.None): void {
+		this.#result = result;
+		this.#modal.hide();
+	}
+
+	/**
+	 * Shows a confirmation message with two buttons, "OK" and "Cancel".
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @returns The dialog box result.
+	 */
+	async confirm(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
+		return await this.show(context, caption, body, [
+			{label: "OK", value: DialogResult.OK, variant: Variant.Primary},
+			{label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary}
+		]);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		this.#modal = new Modal(this.firstElementChild!);
+		if (this.open) void this.show();
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		this.#modal.dispose();
+	}
+
+	/**
+	 * Shows a message.
+	 * @param message The message to show.
+	 * @returns The dialog box result.
+	 */
+	show(message?: IMessage): Promise<DialogResult>;
+
+	/**
+	 * Shows a message.
+	 * @param context The contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @param buttons The buttons displayed in the footer.
+	 * @returns The dialog box result.
+	 */
+	show(context: Context, caption: string, body: DocumentFragment|string, buttons?: IDialogButton[]): Promise<DialogResult>;
+
+	/**
+	 * Shows a message.
+	 * @param message The message to show, or the contextual modifier.
+	 * @param caption The title displayed in the header.
+	 * @param body The child content displayed in the body.
+	 * @param buttons The buttons displayed in the footer.
+	 * @returns The dialog box result.
+	 */
+	show(message: IMessage|Context|null = null, caption = "", body: DocumentFragment|string = "", buttons: IDialogButton[] = []): Promise<DialogResult> {
+		if (typeof message == "string") {
+			const footer = document.createDocumentFragment();
+			footer.append(...buttons.map(button => this.#createButton(button)));
+			message = {context: message, caption, body, footer};
+		}
+
+		if (typeof message == "object" && message) {
+			this.body = typeof message.body == "string" ? createDocumentFragment(message.body) : message.body;
+			this.caption = message.caption;
+			this.context = message.context ?? Context.Info;
+			this.icon = message.icon ?? getIcon(this.context);
+
+			const footer = typeof message.footer == "string" ? createDocumentFragment(message.footer) : (message.footer ?? document.createDocumentFragment());
+			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close);
+			this.footer = footer;
+		}
+
+		const {promise, resolve} = Promise.withResolvers<DialogResult>();
+		this.#resolve = resolve;
+		this.#result = DialogResult.None;
+		this.#modal.show();
+		return promise;
+	}
+
+	/**
+	 * Closes this message box.
+	 * @param event The dispatched event.
+	 */
+	readonly #close: (event: Event) => void = event => {
+		const button = (event.target as Element).closest("button")!;
+		this.close(Object.values(DialogResult).includes(button.value as DialogResult) ? button.value as DialogResult : DialogResult.None);
+	}
+
+	/**
+	 * Creates the component instance corresponding to the specified button.
+	 * @param button An object describing the appearance of the button.
+	 * @returns The component instance corresponding to the specified button.
+	 */
+	#createButton(button: IDialogButton): DialogButton {
+		const element = document.createElement("dialog-button");
+		const childContent = (this.#buttonTemplate.cloneNode(true) as DocumentFragment).querySelector("button")!;
+		childContent.addEventListener("click", this.#close);
+		element.appendChild(childContent);
+
+		element.context = button.context ?? null;
+		element.icon = button.icon ?? null;
+		element.label = button.label ?? "";
+		element.value = button.value ?? DialogResult.None;
+		element.variant = button.variant ?? null;
+		return element;
+	}
+
+	/**
+	 * Updates the message box animation.
+	 * @param value The new value.
+	 */
+	#updateAnimation(value: boolean): void {
+		this.firstElementChild!.classList.toggle("fade", value);
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateCaption(value: string): void {
+		this.querySelector(".modal-title")!.textContent = value.trim();
+	}
+
+	/**
+	 * Updates the value indicating whether to vertically center this message box.
+	 * @param value The new value.
+	 */
+	#updateCentered(value: boolean): void {
+		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-centered", value);
+	}
+
+	/**
+	 * Updates the contextual modifier.
+	 * @param value The new value.
+	 */
+	#updateContext(value: Context): void {
+		const {classList} = this.querySelector(".modal-body > .icon")!;
+		classList.remove(...Object.values(Context).map(context => `text-${toCss(context)}`));
+		classList.add(`text-${toCss(value)}`);
+	}
+
+	/**
+	 * Updates the icon displayed next to the body.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string|null): void {
+		this.querySelector(".modal-body > .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
+	}
+
+	/**
+	 * Updates the value indicating whether to this message box will not close when clicking outside of it.
+	 * @param value The new value.
+	 */
+	#updateModal(value: boolean): void {
+		(this.firstElementChild! as HTMLElement).dataset.bsBackdrop = value ? "static" : "true";
+	}
+
+	/**
+	 * Updates the body scrolling.
+	 * @param value The new value.
+	 */
+	#updateScrolling(value: boolean): void {
+		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-scrollable", value);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"message-box": MessageBox;
+	}
+}

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

@@ -1,6 +1,52 @@
 import {Toast as BootstrapToast} from "bootstrap";
 import {Context, getIcon, toCss} from "../Context.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 child content displayed in the body.
+	 */
+	body: DocumentFragment|string;
+
+	/**
+	 * The title displayed in the header.
+	 */
+	caption: 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|null;
+}
+
 /**
  * Represents a notification.
  */
@@ -9,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.
@@ -50,8 +96,7 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("animation");
 	}
 	set animation(value: boolean) {
-		if (value) this.setAttribute("animation", "");
-		else this.removeAttribute("animation");
+		this.toggleAttribute("animation", value);
 	}
 
 	/**
@@ -61,8 +106,14 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("autohide");
 	}
 	set autoHide(value: boolean) {
-		if (value) this.setAttribute("autohide", "");
-		else this.removeAttribute("autohide");
+		this.toggleAttribute("autohide", value);
+	}
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
 	}
 
 	/**
@@ -75,13 +126,6 @@ export class Toast extends HTMLElement {
 		this.setAttribute("caption", value);
 	}
 
-	/**
-	 * The child content displayed in the body.
-	 */
-	set childContent(value: DocumentFragment) { // eslint-disable-line accessor-pairs
-		this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
-	}
-
 	/**
 	 * A contextual modifier.
 	 */
@@ -141,8 +185,7 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("open");
 	}
 	set open(value: boolean) {
-		if (value) this.setAttribute("open", "");
-		else this.removeAttribute("open");
+		this.toggleAttribute("open", value);
 	}
 
 	/**
@@ -154,25 +197,33 @@ 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
 		}
 	}
 
+	/**
+	 * Closes this toast.
+	 */
+	close(): void {
+		this.#toast.hide();
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		const toast = this.querySelector(".toast")!;
+		const toast = this.firstElementChild!;
 		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();
 	}
 
 	/**
@@ -183,13 +234,6 @@ export class Toast extends HTMLElement {
 		this.#toast.dispose();
 	}
 
-	/**
-	 * Hides this toast.
-	 */
-	hide(): void {
-		this.#toast.hide();
-	}
-
 	/**
 	 * Shows this toast.
 	 */
@@ -218,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";
 	}
 
 	/**
@@ -249,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.
 	 */
@@ -264,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);
-	}
 }
 
 /**