@cedx/base 0.21.0 → 0.22.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.0/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.22.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/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;
     /**
@@ -33,9 +29,9 @@ 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.querySelector(".btn-close").addEventListener("click", event => this.#close(event));
         for (const button of this.querySelectorAll(".modal-footer button"))
-            button.addEventListener("click", this.#close);
+            button.addEventListener("click", event => this.#close(event));
     }
     /**
      * Registers the component.
@@ -47,7 +43,7 @@ export class DialogBox extends HTMLElement {
      * The child content displayed in the body.
      */
     set body(value) {
-        this.querySelector(".modal-body > div").replaceChildren(...value.childNodes);
+        this.querySelector(".modal-body").replaceChildren(...value.childNodes);
     }
     /**
      * The title displayed in the header.
@@ -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", event => this.#close(event));
             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/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", event => this.#setAppTheme(event));
     }
     /**
      * 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

@@ -170,7 +170,7 @@ 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("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.

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

@@ -1,6 +1,42 @@
 import { Context } from "../Context.js";
 import { Position } 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.
  */
@@ -60,9 +96,9 @@ export declare 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;
     /**
      * Shows a toast.
      * @param toast The toast to show.

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,YAAY,CAAC;AAEvC;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAaH;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;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,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,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAErE;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAsCzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAE/C;;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,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAOlD;;OAEG;;IAaH;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;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,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,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA4BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}

package/lib/UI/Components/Toaster.js

@@ -114,13 +114,18 @@ export class Toaster extends HTMLElement {
     }
     /**
      * Shows a toast.
-     * @param toast The toast to show, or the contextual modifier.
+     * @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(toast, caption = "", body = document.createDocumentFragment()) {
-        if (typeof toast == "string")
-            toast = { context: toast, caption, body };
+    notify(context, caption, message) {
+        return this.show({ body: message, caption, context });
+    }
+    /**
+     * Shows a toast.
+     * @param toast The toast to show.
+     */
+    show(toast) {
         const item = document.createElement("toaster-item");
         const childContent = this.#toastTemplate.cloneNode(true).querySelector(".toast");
         childContent.addEventListener("hidden.bs.toast", () => item.remove());

package/lib/UI/DialogResult.d.ts

@@ -1,11 +1,11 @@
 /**
- * Specifies the return value of a dialog box.
+ * Specifies common return values of a dialog box.
  */
 export declare const DialogResult: Readonly<{
     /**
      * The dialog box does not return any value.
      */
-    None: "None";
+    None: "";
     /**
      * The return value of the dialog box is "OK".
      */
@@ -26,14 +26,6 @@ export declare const DialogResult: Readonly<{
      * 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";
 }>;
 /**
  * Specifies the return value of a dialog box.

package/lib/UI/DialogResult.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogResult.d.ts","sourceRoot":"","sources":["../../src/Client/UI/DialogResult.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY;IAExB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"DialogResult.d.ts","sourceRoot":"","sources":["../../src/Client/UI/DialogResult.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,YAAY;IAExB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,YAAY,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC"}

package/lib/UI/DialogResult.js

@@ -1,11 +1,11 @@
 /**
- * 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".
      */
@@ -25,13 +25,5 @@ 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/lib/UI/Tag.js

@@ -24,9 +24,11 @@ export function html(fragments, ...values) {
  * @returns The CSS string corresponding to the specified value.
  */
 function stringFromCss(value) {
-    // 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");
 }
 /**
@@ -35,9 +37,11 @@ function stringFromCss(value) {
  * @returns The HTML string corresponding to the specified value.
  */
 function stringFromHtml(value) {
-    // 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/lib/UI/Variant.d.ts

@@ -3,21 +3,25 @@
  */
 export declare const Variant: Readonly<{
     /**
-     * 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";
+    Danger: "Danger";
+    Warning: "Warning";
+    Info: "Info";
+    Success: "Success";
 }>;
 /**
  * Defines tone variants.

package/lib/UI/Variant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}
+{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,OAAO;IAGnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;;;;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}