@cedx/base 0.21.1 → 0.23.0

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

@@ -0,0 +1,127 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+
+	/**
+	 * The associated element.
+	 */
+	#element: Element = document.body;
+
+	/**
+	 * The handle to the underlying platform wake lock.
+	 */
+	#sentinel: WakeLockSentinel|null = null;
+
+	/**
+	 * Creates a new full-screen toggler.
+	 */
+	constructor() {
+		super();
+		this.addEventListener("click", this.toggleFullScreen.bind(this)); // eslint-disable-line @typescript-eslint/no-misused-promises
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("fullscreen-toggler", this);
+	}
+
+	/**
+	 * The CSS selector used to target the element.
+	 */
+	get target(): string {
+		const value = this.getAttribute("target") ?? "";
+		return value.trim() || "body";
+	}
+	set target(value: string) {
+		this.setAttribute("target", value);
+	}
+
+	/**
+	 * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+	 */
+	get wakeLock(): boolean {
+		return this.hasAttribute("wakeLock");
+	}
+	set wakeLock(value: boolean) {
+		this.toggleAttribute("target", value);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element = document.querySelector(this.target) ?? document.body;
+		this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Toggles the full-screen mode of the associated element.
+	 * @param event The dispatched event.
+	 * @returns Resolves when the full-screen mode has been toggled.
+	 */
+	async toggleFullScreen(event?: Event): Promise<void> {
+		event?.preventDefault();
+		if (document.fullscreenElement) await document.exitFullscreen();
+		else await this.#element.requestFullscreen();
+	}
+
+	/**
+	 * Acquires a new wake lock.
+	 * @returns Resolves when the wake lock has been acquired.
+	 */
+	async #acquireWakeLock(): Promise<void> {
+		if (this.#sentinel && !this.#sentinel.released) return;
+		if (this.wakeLock) this.#sentinel = await navigator.wakeLock.request();
+	}
+
+	/**
+	 * Acquires or releases the wake lock when the document enters or exits the full-screen mode.
+	 * @param event The dispatched event.
+	 */
+	readonly #onFullScreenChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement) void this.#acquireWakeLock();
+		else void this.#releaseWakeLock();
+	};
+
+	/**
+	 * Eventually acquires a new wake lock when the document visibility has changed.
+	 * @param event The dispatched event.
+	 */
+	readonly #onVisibilityChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement && !document.hidden) void this.#acquireWakeLock();
+	};
+
+	/**
+	 * Releases the acquired wake lock.
+	 * @returns Resolves when the wake lock has been released.
+	 */
+	async #releaseWakeLock(): Promise<void> {
+		if (!this.#sentinel || this.#sentinel.released) return;
+		await this.#sentinel.release();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"fullscreen-toggler": FullScreenToggler;
+	}
+}

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

@@ -27,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme);
+		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme.bind(this));
 	}
 
 	/**
@@ -149,11 +149,11 @@ export class ThemeDropdown extends HTMLElement {
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	readonly #setAppTheme: (event: Event) => void = event => {
+	#setAppTheme(event: Event): void {
 		event.preventDefault();
 		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
 		this.save();
-	};
+	}
 
 	/**
 	 * Updates the alignment of the dropdown menu.

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

@@ -1,52 +1,6 @@
 import {Toast as BootstrapToast} from "bootstrap";
 import {Context, getIcon, toCss} from "../Context.js";
 
-/**
- * Represents a notification.
- */
-export interface IToast {
-
-	/**
-	 * Value indicating whether to automatically hide the toast.
-	 */
-	autoHide?: boolean;
-
-	/**
-	 * The child content displayed in the body.
-	 */
-	body: DocumentFragment;
-
-	/**
-	 * 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;
-
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	fade?: boolean;
-
-	/**
-	 * The icon displayed next to the caption.
-	 */
-	icon?: string|null;
-}
-
 /**
  * Represents a notification.
  */
@@ -219,8 +173,8 @@ export class Toast extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		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));
+		toast.addEventListener("hide.bs.toast", () => clearInterval(this.#timer));
+		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000));
 
 		this.#toast = new BootstrapToast(toast);
 		if (this.open) this.show();
@@ -305,10 +259,10 @@ export class Toast extends HTMLElement {
 	/**
 	 * Updates the label corresponding to the elapsed time.
 	 */
-	readonly #updateElapsedTime: () => void = () => {
+	#updateElapsedTime(): void {
 		const {elapsedTime} = this;
 		this.querySelector(".toast-header small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / 1_000) : "";
-	};
+	}
 
 	/**
 	 * Updates the value indicating whether to apply a transition.

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

@@ -1,6 +1,51 @@
 import {Context} from "../Context.js";
 import {Position, toCss} from "../Position.js";
-import type {IToast} from "./Toast.js";
+
+/**
+ * Represents a notification.
+ */
+export interface IToast {
+
+	/**
+	 * Value indicating whether to automatically hide the toast.
+	 */
+	autoHide?: boolean;
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	body: DocumentFragment;
+
+	/**
+	 * 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;
+
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	fade?: boolean;
+
+	/**
+	 * The icon displayed next to the caption.
+	 */
+	icon?: string;
+}
 
 /**
  * Manages the notifications.
@@ -125,25 +170,17 @@ export class Toaster extends HTMLElement {
 	 * Shows a toast.
 	 * @param context The contextual modifier.
 	 * @param caption The title displayed in the toast header.
-	 * @param body The child content displayed in the toast body.
+	 * @param message The child content displayed in the toast body.
 	 */
-	show(context: Context, caption: string, body: DocumentFragment): void;
+	notify(context: Context, caption: string, message: DocumentFragment): void {
+		return this.show({body: message, caption, context});
+	}
 
 	/**
 	 * Shows a toast.
 	 * @param toast The toast to show.
 	 */
-	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 = document.createDocumentFragment()): void {
-		if (typeof toast == "string") toast = {context: toast, caption, body};
-
+	show(toast: IToast): void {
 		const item = document.createElement("toaster-item");
 		const childContent = (this.#toastTemplate.cloneNode(true) as DocumentFragment).querySelector(".toast")!;
 		childContent.addEventListener("hidden.bs.toast", () => item.remove());

package/src/Client/UI/DialogResult.ts

@@ -1,12 +1,12 @@
 /**
- * Specifies the return value of a dialog box.
+ * Specifies common return values of a dialog box.
  */
 export const DialogResult = Object.freeze({
 
 	/**
 	 * The dialog box does not return any value.
 	 */
-	None: "None",
+	None: "",
 
 	/**
 	 * The return value of the dialog box is "OK".
@@ -31,17 +31,7 @@ export const DialogResult = Object.freeze({
 	/**
 	 * The return value of the dialog box is "Ignore".
 	 */
-	Ignore: "Ignore",
-
-	/**
-	 * The return value of the dialog box is "Yes".
-	 */
-	Yes: "Yes",
-
-	/**
-	 * The return value of the dialog box is "No".
-	 */
-	No: "No"
+	Ignore: "Ignore"
 });
 
 /**

package/src/Client/UI/Tag.ts

@@ -33,8 +33,11 @@ export function html(fragments: TemplateStringsArray, ...values: unknown[]): Doc
  * @returns The CSS string corresponding to the specified value.
  */
 function stringFromCss(value: unknown): string {
-	// eslint-disable-next-line @typescript-eslint/no-base-to-string
-	if (!(value instanceof CSSStyleSheet)) return value === null || typeof value == "undefined" ? "" : String(value);
+	if (!(value instanceof CSSStyleSheet)) {
+		if (Array.isArray(value)) return value.map(stringFromCss).join("\n");
+		return value === null || typeof value == "undefined" ? "" : String(value); // eslint-disable-line @typescript-eslint/no-base-to-string
+	}
+
 	return Array.from(value.cssRules).map(cssRule => cssRule.cssText).join("\n");
 }
 
@@ -44,8 +47,11 @@ function stringFromCss(value: unknown): string {
  * @returns The HTML string corresponding to the specified value.
  */
 function stringFromHtml(value: unknown): string {
-	// eslint-disable-next-line @typescript-eslint/no-base-to-string
-	if (!(value instanceof DocumentFragment)) return value === null || typeof value == "undefined" ? "" : String(value);
+	if (!(value instanceof DocumentFragment)) {
+		if (Array.isArray(value)) return value.map(stringFromHtml).join("");
+		return value === null || typeof value == "undefined" ? "" : String(value); // eslint-disable-line @typescript-eslint/no-base-to-string
+	}
+
 	const element = document.createElement("div");
 	element.appendChild(value);
 	return element.innerHTML;

package/src/Client/UI/Variant.ts

@@ -1,27 +1,30 @@
+import {Context} from "./Context.js";
+
 /**
  * Defines tone variants.
  */
 export const Variant = Object.freeze({
+	...Context,
 
 	/**
-	 * A dark variant.
+	 * A primary tone.
 	 */
-	Dark: "Dark",
+	Primary: "Primary",
 
 	/**
-	 * A light variant.
+	 * A secondary tone.
 	 */
-	Light: "Light",
+	Secondary: "Secondary",
 
 	/**
-	 * A primary variant.
+	 * A light tone.
 	 */
-	Primary: "Primary",
+	Light: "Light",
 
 	/**
-	 * A secondary variant.
+	 * A dark tone.
 	 */
-	Secondary: "Secondary"
+	Dark: "Dark"
 });
 
 /**

package/lib/UI/Components/DialogButton.d.ts

@@ -1,82 +0,0 @@
-import { Context } from "../Context.js";
-import { DialogResult } from "../DialogResult.js";
-import { Variant } from "../Variant.js";
-/**
- * Represents a dialog box button.
- */
-export interface IDialogButton {
-    /**
-     * A contextual modifier.
-     */
-    context?: Context | null;
-    /**
-     * The button icon.
-     */
-    icon?: string | null;
-    /**
-     * The button label.
-     */
-    label?: string;
-    /**
-     * The button value.
-     */
-    value?: DialogResult;
-    /**
-     * A tone variant.
-     */
-    variant?: Variant | null;
-}
-/**
- * Represents a dialog box button.
- */
-export declare class DialogButton extends HTMLElement {
-    #private;
-    /**
-     * The list of observed attributes.
-     */
-    static readonly observedAttributes: string[];
-    /**
-     * A contextual modifier.
-     */
-    get context(): Context | null;
-    set context(value: Context | null);
-    /**
-     * The button icon.
-     */
-    get icon(): string | null;
-    set icon(value: string | null);
-    /**
-     * The button label.
-     */
-    get label(): string;
-    set label(value: string);
-    /**
-     * The button value.
-     */
-    get value(): DialogResult;
-    set value(value: DialogResult);
-    /**
-     * A tone variant.
-     */
-    get variant(): Variant | null;
-    set variant(value: Variant | null);
-    /**
-     * 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;
-}
-/**
- * Declaration merging.
- */
-declare global {
-    /**
-     * The map of HTML tag names.
-     */
-    interface HTMLElementTagNameMap {
-        "dialog-button": DialogButton;
-    }
-}
-//# sourceMappingURL=DialogButton.d.ts.map

package/lib/UI/Components/DialogButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;;IAE5C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAoD;IAStF;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,YAAY,CAGxB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAG9B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CA6D/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/lib/UI/Components/DialogButton.js

@@ -1,151 +0,0 @@
-import { Context, toCss as contextCss } from "../Context.js";
-import { DialogResult } from "../DialogResult.js";
-import { Variant, toCss as variantCss } from "../Variant.js";
-/**
- * Represents a dialog box button.
- */
-export class DialogButton extends HTMLElement {
-    /**
-     * The list of observed attributes.
-     */
-    static observedAttributes = ["context", "icon", "label", "value", "variant"];
-    /**
-     * Registers the component.
-     */
-    static {
-        customElements.define("dialog-button", this);
-    }
-    /**
-     * A contextual modifier.
-     */
-    get context() {
-        const value = this.getAttribute("context");
-        return Object.values(Context).includes(value) ? value : null;
-    }
-    set context(value) {
-        if (value)
-            this.setAttribute("context", value);
-        else
-            this.removeAttribute("context");
-    }
-    /**
-     * The button icon.
-     */
-    get icon() {
-        const value = this.getAttribute("icon") ?? "";
-        return value.trim() || null;
-    }
-    set icon(value) {
-        if (value)
-            this.setAttribute("icon", value);
-        else
-            this.removeAttribute("icon");
-    }
-    /**
-     * The button label.
-     */
-    get label() {
-        return (this.getAttribute("label") ?? "").trim();
-    }
-    set label(value) {
-        this.setAttribute("label", value);
-    }
-    /**
-     * The button value.
-     */
-    get value() {
-        const value = this.getAttribute("value");
-        return Object.values(DialogResult).includes(value) ? value : DialogResult.None;
-    }
-    set value(value) {
-        this.setAttribute("value", value);
-    }
-    /**
-     * A tone variant.
-     */
-    get variant() {
-        const value = this.getAttribute("variant");
-        return Object.values(Variant).includes(value) ? value : null;
-    }
-    set variant(value) {
-        if (value)
-            this.setAttribute("variant", value);
-        else
-            this.removeAttribute("variant");
-    }
-    /**
-     * 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, oldValue, newValue) {
-        if (newValue != oldValue)
-            switch (attribute) {
-                case "context":
-                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : null);
-                    break;
-                case "icon":
-                    this.#updateIcon(newValue);
-                    break;
-                case "label":
-                    this.#updateLabel(newValue ?? "");
-                    break;
-                case "value":
-                    this.#updateValue(Object.values(DialogResult).includes(newValue) ? newValue : DialogResult.None);
-                    break;
-                case "variant":
-                    this.#updateVariant(Object.values(Variant).includes(newValue) ? newValue : null);
-                    break;
-                // No default
-            }
-    }
-    /**
-     * Updates the contextual modifier.
-     * @param value The new value.
-     */
-    #updateContext(value) {
-        const { classList } = this.querySelector("button");
-        classList.remove(...Object.values(Context).map(context => `btn-${contextCss(context)}`));
-        if (value)
-            classList.add(`btn-${contextCss(value)}`);
-    }
-    /**
-     * Updates the button icon.
-     * @param value The new value.
-     */
-    #updateIcon(value) {
-        const element = this.querySelector(".icon");
-        const icon = (value ?? "").trim();
-        element.textContent = icon;
-        element.hidden = !icon;
-    }
-    /**
-     * Updates the button label.
-     * @param value The new value.
-     */
-    #updateLabel(value) {
-        const element = this.querySelector("span");
-        const label = value.trim();
-        element.textContent = label;
-        element.hidden = !label;
-        this.querySelector(".icon").classList.toggle("me-1", !element.hidden);
-    }
-    /**
-     * Updates the button value.
-     * @param value The new value.
-     */
-    #updateValue(value) {
-        this.querySelector("button").value = value;
-    }
-    /**
-     * Updates the tone variant.
-     * @param value The new value.
-     */
-    #updateVariant(value) {
-        const { classList } = this.querySelector("button");
-        classList.remove(...Object.values(Variant).map(variant => `btn-${variantCss(variant)}`));
-        if (value)
-            classList.add(`btn-${variantCss(value)}`);
-    }
-}