@cedx/base 0.21.1 → 0.23.0

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Cédric Belin's Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.21.1/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.23.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 Base library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).

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

@@ -1,7 +1,8 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export declare class BackButton extends HTMLElement {
+    #private;
     /**
      * Creates a new back button.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;CACD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;CAUD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/lib/UI/Components/BackButton.js

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export class BackButton extends HTMLElement {
     /**
@@ -7,7 +7,7 @@ export class BackButton extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", () => history.go(-this.steps));
+        this.addEventListener("click", this.#goBack.bind(this));
     }
     /**
      * Registers the component.
@@ -25,4 +25,12 @@ export class BackButton extends HTMLElement {
     set steps(value) {
         this.setAttribute("steps", value.toString());
     }
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    #goBack(event) {
+        event.preventDefault();
+        history.go(-this.steps);
+    }
 }

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

@@ -1,10 +1,30 @@
 import { type Context } from "../Context.js";
-import { DialogResult } from "../DialogResult.js";
-import type { IDialogButton } from "./DialogButton.js";
+import { Variant } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export interface IDialogButton {
+    /**
+     * The button icon.
+     */
+    icon?: string;
+    /**
+     * The button label.
+     */
+    label?: string;
+    /**
+     * The button value.
+     */
+    value?: string;
+    /**
+     * A tone variant.
+     */
+    variant?: Context | Variant;
+}
 /**
  * Represents a message to display in a dialog box.
  */
-export interface IMessage {
+export interface IDialogMessage {
     /**
      * The child content displayed in the body.
      */
@@ -64,6 +84,10 @@ export declare class DialogBox extends HTMLElement {
      */
     get open(): boolean;
     set open(value: boolean);
+    /**
+     * The dialog result.
+     */
+    get result(): string;
     /**
      * Value indicating whether the body is scrollable.
      */
@@ -77,26 +101,27 @@ export declare class DialogBox extends HTMLElement {
      */
     attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
     /**
-     * Shows an alert message with an "OK" button.
+     * Shows an alert message with an "OK" button by default.
      * @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.
+     * @param message The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog result.
      */
-    alert(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult>;
+    alert(context: Context, caption: string, message: DocumentFragment, buttons?: IDialogButton[]): Promise<string>;
     /**
      * Closes this dialog box.
-     * @param result The dialog box result.
+     * @param result The dialog result.
      */
-    close(result?: DialogResult): void;
+    close(result?: string): void;
     /**
      * 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.
+     * @param message The child content displayed in the body.
+     * @returns The dialog result.
      */
-    confirm(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult>;
+    confirm(context: Context, caption: string, message: DocumentFragment): Promise<string>;
     /**
      * Method invoked when this component is connected.
      */
@@ -108,18 +133,9 @@ export declare class DialogBox extends HTMLElement {
     /**
      * 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.
+     * @returns The dialog result.
      */
-    show(context: Context, caption: string, body: DocumentFragment, buttons?: IDialogButton[]): Promise<DialogResult>;
+    show(message?: IDialogMessage | null): Promise<string>;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,EAAiB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAGhD,OAAO,KAAK,EAAe,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,QAAQ;IAExB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0D;IAsB5F;;OAEG;;IAeH;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAIjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAW/F;;;;;;OAMG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC;IAMvF;;;OAGG;IACH,KAAK,CAAC,MAAM,GAAE,YAAgC,GAAG,IAAI;IAKrD;;;;;;OAMG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC;IAOzF;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC;IAE/C;;;;;;;OAOG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,YAAY,CAAC;CAkHjH;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,EAA+B,MAAM,eAAe,CAAC;AAGzE,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAE9B;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0D;IAiB5F;;OAEG;;IAeH;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAIjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAW/F;;;;;;;OAOG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,GAAE,aAAa,EAAO,GAAG,OAAO,CAAC,MAAM,CAAC;IAoBnH;;;OAGG;IACH,KAAK,CAAC,MAAM,GAAE,MAA0B,GAAG,IAAI;IAK/C;;;;;;OAMG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC;IAOtF;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,IAAI,CAAC,OAAO,GAAE,cAAc,GAAC,IAAW,GAAG,OAAO,CAAC,MAAM,CAAC;CAgE1D;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/lib/UI/Components/DialogBox.js

@@ -1,8 +1,8 @@
 import { Modal } from "bootstrap";
-import { getIcon, toCss } from "../Context.js";
+import { toCss as contextCss, getIcon } from "../Context.js";
 import { DialogResult } from "../DialogResult.js";
 import { html } from "../Tag.js";
-import { Variant } from "../Variant.js";
+import { Variant, toCss as variantCss } from "../Variant.js";
 /**
  * Displays a dialog box, which presents a message to the user.
  */
@@ -11,20 +11,16 @@ export class DialogBox extends HTMLElement {
      * The list of observed attributes.
      */
     static observedAttributes = ["caption", "centered", "fade", "modal", "scrollable"];
-    /**
-     * The template for a button.
-     */
-    #buttonTemplate = this.querySelector("template").content;
     /**
      * The underlying Bootstrap modal.
      */
     #modal;
     /**
-     * The function invoked to return the dialog box result.
+     * The function invoked to resolve the dialog result.
      */
-    #resolve = () => { };
+    #resolve;
     /**
-     * The dialog result.
+     * The promise providing the dialog result.
      */
     #result = DialogResult.None;
     /**
@@ -32,10 +28,10 @@ export class DialogBox extends HTMLElement {
      */
     constructor() {
         super();
-        this.firstElementChild.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
-        this.querySelector(".btn-close").addEventListener("click", this.#close);
+        this.firstElementChild.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+        this.querySelector(".btn-close").addEventListener("click", this.#close.bind(this));
         for (const button of this.querySelectorAll(".modal-footer button"))
-            button.addEventListener("click", this.#close);
+            button.addEventListener("click", this.#close.bind(this));
     }
     /**
      * Registers the component.
@@ -102,6 +98,12 @@ export class DialogBox extends HTMLElement {
     set open(value) {
         this.toggleAttribute("open", value);
     }
+    /**
+     * The dialog result.
+     */
+    get result() {
+        return this.#result;
+    }
     /**
      * Value indicating whether the body is scrollable.
      */
@@ -139,20 +141,35 @@ export class DialogBox extends HTMLElement {
             }
     }
     /**
-     * Shows an alert message with an "OK" button.
+     * Shows an alert message with an "OK" button by default.
      * @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.
+     * @param message The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog result.
      */
-    alert(context, caption, body) {
-        return this.show(context, caption, this.#getBodyTemplate(context, body), [
-            { label: "OK", value: DialogResult.OK, variant: Variant.Primary }
-        ]);
+    alert(context, caption, message, buttons = []) {
+        return this.show({
+            caption,
+            body: html `
+				<div class="d-flex gap-2">
+					<i class="icon icon-fill fs-1 text-${contextCss(context)}"> ${getIcon(context)}</i>
+					<div class="flex-grow-1">${message}</div>
+				</div>
+			`,
+            footer: html `
+				${(buttons.length ? buttons : [{ label: "OK", value: DialogResult.OK, variant: Variant.Primary }]).map(button => html `
+					<button class="btn btn-${variantCss(button.variant ?? Variant.Primary)}" type="button" value="${button.value ?? DialogResult.None}">
+						${button.icon ? html `<i class="icon ${button.label ? "me-1" : ""}">${button.icon}</i>` : ""}
+						${button.label}
+					</button>
+				`)}
+			`
+        });
     }
     /**
      * Closes this dialog box.
-     * @param result The dialog box result.
+     * @param result The dialog result.
      */
     close(result = DialogResult.None) {
         this.#result = result;
@@ -162,11 +179,11 @@ export class DialogBox extends HTMLElement {
      * 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.
+     * @param message The child content displayed in the body.
+     * @returns The dialog result.
      */
-    confirm(context, caption, body) {
-        return this.show(context, caption, this.#getBodyTemplate(context, body), [
+    confirm(context, caption, message) {
+        return this.alert(context, caption, message, [
             { label: "OK", value: DialogResult.OK, variant: Variant.Primary },
             { label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary }
         ]);
@@ -187,22 +204,14 @@ export class DialogBox extends HTMLElement {
     }
     /**
      * 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.
+     * @param message The message to show.
+     * @returns The dialog result.
      */
-    show(message = null, caption = "", body = document.createDocumentFragment(), buttons = []) {
-        if (typeof message == "string") {
-            const footer = document.createDocumentFragment();
-            footer.append(...buttons.map(button => this.#createButton(button)));
-            message = { body, caption, footer };
-        }
+    show(message = null) {
         if (message) {
             const footer = message.footer ?? document.createDocumentFragment();
             for (const button of footer.querySelectorAll("button"))
-                button.addEventListener("click", this.#close);
+                button.addEventListener("click", this.#close.bind(this));
             this.body = message.body;
             this.caption = message.caption;
             this.footer = footer;
@@ -217,40 +226,9 @@ export class DialogBox extends HTMLElement {
      * Closes this dialog box.
      * @param event The dispatched event.
      */
-    #close = event => {
-        const button = event.target.closest("button");
-        this.close(Object.values(DialogResult).includes(button.value) ? button.value : 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) {
-        const element = document.createElement("dialog-button");
-        const childContent = this.#buttonTemplate.cloneNode(true).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;
-    }
-    /**
-     * Gets the body template corresponding to the specified context and message.
-     * @param context The contextual modifier.
-     * @param message The child content displayed in the body.
-     * @returns The body template corresponding to the specified context and message.
-     */
-    #getBodyTemplate(context, message) {
-        return html `
-			<div class="d-flex gap-2">
-				<i class="icon icon-fill fs-1 text-${toCss(context)}"> ${getIcon(context)}</i>
-				<div class="flex-grow-1">${message}</div>
-			</div>
-		`;
+    #close(event) {
+        event.preventDefault();
+        this.close(event.target.closest("button").value);
     }
     /**
      * Updates the title displayed in the header.

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

@@ -0,0 +1,46 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export declare class FullScreenToggler extends HTMLElement {
+    #private;
+    /**
+     * Creates a new full-screen toggler.
+     */
+    constructor();
+    /**
+     * The CSS selector used to target the element.
+     */
+    get target(): string;
+    set target(value: string);
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock(): boolean;
+    set wakeLock(value: boolean);
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Resolves when the full-screen mode has been toggled.
+     */
+    toggleFullScreen(event?: Event): Promise<void>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "fullscreen-toggler": FullScreenToggler;
+    }
+}
+//# sourceMappingURL=FullScreenToggler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenToggler.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/FullScreenToggler.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAYjD;;OAEG;;IAaH;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;;;OAIG;IACG,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;CAwCpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}

package/lib/UI/Components/FullScreenToggler.js

@@ -0,0 +1,109 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+    /**
+     * The associated element.
+     */
+    #element = document.body;
+    /**
+     * The handle to the underlying platform wake lock.
+     */
+    #sentinel = 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() {
+        const value = this.getAttribute("target") ?? "";
+        return value.trim() || "body";
+    }
+    set target(value) {
+        this.setAttribute("target", value);
+    }
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock() {
+        return this.hasAttribute("wakeLock");
+    }
+    set wakeLock(value) {
+        this.toggleAttribute("target", value);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        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() {
+        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?.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() {
+        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.
+     */
+    #onFullScreenChanged = () => {
+        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.
+     */
+    #onVisibilityChanged = () => {
+        if (document.fullscreenElement && !document.hidden)
+            void this.#acquireWakeLock();
+    };
+    /**
+     * Releases the acquired wake lock.
+     * @returns Resolves when the wake lock has been released.
+     */
+    async #releaseWakeLock() {
+        if (!this.#sentinel || this.#sentinel.released)
+            return;
+        await this.#sentinel.release();
+    }
+}

package/lib/UI/Components/ThemeDropdown.js

@@ -23,7 +23,7 @@ export class ThemeDropdown extends HTMLElement {
     constructor() {
         super();
         for (const button of this.querySelectorAll(".dropdown-menu button"))
-            button.addEventListener("click", this.#setAppTheme);
+            button.addEventListener("click", this.#setAppTheme.bind(this));
     }
     /**
      * Registers the component.
@@ -139,11 +139,11 @@ export class ThemeDropdown extends HTMLElement {
      * Changes the current application theme.
      * @param event The dispatched event.
      */
-    #setAppTheme = event => {
+    #setAppTheme(event) {
         event.preventDefault();
         this.appTheme = event.target.closest("button").dataset.theme;
         this.save();
-    };
+    }
     /**
      * Updates the alignment of the dropdown menu.
      * @param value The new value.

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

@@ -1,41 +1,4 @@
 import { Context } 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.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0E;IAkC5G;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwFZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0E;IAkC5G;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwFZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}

package/lib/UI/Components/Toast.js

@@ -169,8 +169,8 @@ export class Toast extends HTMLElement {
      */
     connectedCallback() {
         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();
@@ -243,10 +243,10 @@ export class Toast extends HTMLElement {
     /**
      * Updates the label corresponding to the elapsed time.
      */
-    #updateElapsedTime = () => {
+    #updateElapsedTime() {
         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.
      * @param value The new value.