@cedx/base 0.13.0 → 0.14.0

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.13.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.14.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 Base library by [Cédric Belin](https://belin.io), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).

package/lib/FileExtensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileExtensions.d.ts","sourceRoot":"","sources":["../src/Client/FileExtensions.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAUzC;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAM,GAAG,IAAI,CAkBvE;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAatC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAOlD"}
+{"version":3,"file":"FileExtensions.d.ts","sourceRoot":"","sources":["../src/Client/FileExtensions.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAUzC;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAM,GAAG,IAAI,CAkBvE;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAatC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAOlD"}

package/lib/FileExtensions.js

@@ -1,4 +1,3 @@
-import { Duration } from "./Duration.js";
 /**
  * Downloads the specified file.
  * @param file The file to be downloaded.
@@ -34,7 +33,7 @@ export function open(file, options = {}) {
             return;
         clearInterval(timer);
         URL.revokeObjectURL(url);
-    }, 5 * Duration.Second);
+    }, 5_000);
 }
 /**
  * Prints the specified file.

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

@@ -0,0 +1,26 @@
+/**
+ * A component that moves back one page in the session history when clicked.
+ */
+export declare class BackButton extends HTMLElement {
+    /**
+     * Creates a new back button.
+     */
+    constructor();
+    /**
+     * The number of pages to go back.
+     */
+    get steps(): number;
+    set steps(value: number);
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "back-button": BackButton;
+    }
+}
+//# sourceMappingURL=BackButton.d.ts.map

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

@@ -0,0 +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"}

package/lib/UI/Components/BackButton.js

@@ -0,0 +1,28 @@
+/**
+ * A component that moves back one page in the session history when clicked.
+ */
+export class BackButton extends HTMLElement {
+    /**
+     * Creates a new back button.
+     */
+    constructor() {
+        super();
+        this.addEventListener("click", () => history.go(-this.steps));
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("back-button", this);
+    }
+    /**
+     * The number of pages to go back.
+     */
+    get steps() {
+        const value = Number(this.getAttribute("steps"));
+        return Math.max(0, Number.isNaN(value) ? 1 : value);
+    }
+    set steps(value) {
+        this.setAttribute("steps", value.toString());
+    }
+}

package/lib/UI/Components/LoadingIndicator.js

@@ -25,7 +25,7 @@ export class LoadingIndicator extends HTMLElement {
      */
     stop(options = {}) {
         this.#requestCount--;
-        if (options.force || this.#requestCount <= 0) {
+        if (this.#requestCount <= 0 || options.force) {
             this.#requestCount = 0;
             this.hidden = true;
         }

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

@@ -1,6 +1,6 @@
-import { Context } from "@cedx/base/UI/Context.js";
+import { Context } from "../Context.js";
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export declare class Toast extends HTMLElement {
     #private;
@@ -14,7 +14,7 @@ export declare class Toast extends HTMLElement {
     get animation(): boolean;
     set animation(value: boolean);
     /**
-     * Value indicating whether to automatically hide the notification.
+     * Value indicating whether to automatically hide the toast.
      */
     get autoHide(): boolean;
     set autoHide(value: boolean);
@@ -23,6 +23,10 @@ export declare class Toast extends HTMLElement {
      */
     get caption(): string;
     set caption(value: string);
+    /**
+     * The child content displayed in the body.
+     */
+    set childContent(value: DocumentFragment);
     /**
      * A contextual modifier.
      */
@@ -34,7 +38,7 @@ export declare class Toast extends HTMLElement {
     get culture(): Intl.Locale;
     set culture(value: Intl.Locale);
     /**
-     * The delay, in milliseconds, to hide the notification.
+     * The delay, in milliseconds, to hide the toast.
      */
     get delay(): number;
     set delay(value: number);
@@ -71,4 +75,15 @@ export declare class Toast extends HTMLElement {
      */
     show(): void;
 }
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "toaster-item": Toast;
+    }
+}
 //# sourceMappingURL=Toast.d.ts.map

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,0BAA0B,CAAC;AAGjE;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA6C;IAuC/E;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;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,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAkB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+DZ"}
+{"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,WAA6C;IAkC/E;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,CAAC,KAAK,EAAE,gBAAgB,EAEvC;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,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAkB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+DZ;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

@@ -1,8 +1,7 @@
-import { Duration } from "@cedx/base/Duration.js";
-import { Context, getIcon, toCss } from "@cedx/base/UI/Context.js";
 import { Toast as BootstrapToast } from "bootstrap";
+import { Context, getIcon, toCss } from "../Context.js";
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export class Toast extends HTMLElement {
     /**
@@ -17,10 +16,6 @@ export class Toast extends HTMLElement {
      * The formatter used to format the relative time.
      */
     #formatter;
-    /**
-     * The toast header.
-     */
-    #header = this.querySelector(".toast-header");
     /**
      * The time at which this component was initially shown.
      */
@@ -52,7 +47,7 @@ export class Toast extends HTMLElement {
             this.removeAttribute("animation");
     }
     /**
-     * Value indicating whether to automatically hide the notification.
+     * Value indicating whether to automatically hide the toast.
      */
     get autoHide() {
         return this.hasAttribute("autohide");
@@ -72,6 +67,12 @@ export class Toast extends HTMLElement {
     set caption(value) {
         this.setAttribute("caption", value);
     }
+    /**
+     * The child content displayed in the body.
+     */
+    set childContent(value) {
+        this.querySelector(".toast-body").replaceChildren(...value.childNodes);
+    }
     /**
      * A contextual modifier.
      */
@@ -93,11 +94,11 @@ export class Toast extends HTMLElement {
         this.setAttribute("culture", value.toString());
     }
     /**
-     * The delay, in milliseconds, to hide the notification.
+     * The delay, in milliseconds, to hide the toast.
      */
     get delay() {
         const value = Number(this.getAttribute("delay"));
-        return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+        return Math.max(0, Number.isNaN(value) ? 5_000 : value);
     }
     set delay(value) {
         this.setAttribute("delay", value.toString());
@@ -113,7 +114,7 @@ export class Toast extends HTMLElement {
      */
     get icon() {
         const value = this.getAttribute("icon") ?? "";
-        return value.trim() || getIcon(Context.Info);
+        return value.trim() || getIcon(this.context);
     }
     set icon(value) {
         this.setAttribute("icon", value);
@@ -148,7 +149,7 @@ export class Toast extends HTMLElement {
     connectedCallback() {
         const toast = this.querySelector(".toast");
         toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
-        toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, Duration.Second));
+        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 });
     }
@@ -193,7 +194,7 @@ export class Toast extends HTMLElement {
      * @param value The new value.
      */
     #updateCaption(value) {
-        this.#header.querySelector("b").textContent = value.trim();
+        this.querySelector(".toast-header b").textContent = value.trim();
     }
     /**
      * Updates the title displayed in the header.
@@ -201,25 +202,25 @@ export class Toast extends HTMLElement {
      */
     #updateContext(value) {
         const contexts = Object.values(Context);
-        let { classList } = this.#header;
+        let { classList } = this.querySelector(".toast-header");
         classList.remove(...contexts.map(context => `toast-header-${toCss(context)}`));
-        classList.add(`toast-header-${value}`);
-        ({ classList } = this.#header.querySelector(".icon"));
+        classList.add(`toast-header-${toCss(value)}`);
+        ({ classList } = this.querySelector(".toast-header .icon"));
         classList.remove(...contexts.map(context => `text-${toCss(context)}`));
-        classList.add(`text-${value}`);
+        classList.add(`text-${toCss(value)}`);
     }
     /**
      * Updates the label corresponding to the elapsed time.
      */
     #updateElapsedTime = () => {
         const { elapsedTime } = this;
-        this.#header.querySelector("small").textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / Duration.Second) : "";
+        this.querySelector(".toast-header small").textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / 1_000) : "";
     };
     /**
      * Updates the icon displayed next to the caption.
      * @param value The new value.
      */
     #updateIcon(value) {
-        this.#header.querySelector(".icon").textContent = value.trim() || getIcon(Context.Info);
+        this.querySelector(".toast-header .icon").textContent = value.trim() || getIcon(Context.Info);
     }
 }

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

@@ -0,0 +1,115 @@
+import { Context } from "../Context.js";
+import { Position } from "../Position.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 title displayed in the header.
+     */
+    caption: string;
+    /**
+     * The child content displayed in the body.
+     */
+    childContent: DocumentFragment | 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;
+}
+/**
+ * Manages the notification messages.
+ */
+export declare class Toaster extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation(): boolean;
+    set animation(value: boolean);
+    /**
+     * Value indicating whether to automatically hide the toasts.
+     */
+    get autoHide(): boolean;
+    set autoHide(value: boolean);
+    /**
+     * The default contextual modifier.
+     */
+    get context(): Context;
+    set context(value: Context);
+    /**
+     * The default culture used to format the relative times.
+     */
+    get culture(): Intl.Locale;
+    set culture(value: Intl.Locale);
+    /**
+     * The default delay, in milliseconds, to hide the toasts.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * The default icon displayed next to the captions.
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * The toaster placement.
+     */
+    get position(): Position;
+    set position(value: Position);
+    /**
+     * 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;
+    /**
+     * Shows a toast with the specified message.
+     * @param caption The title displayed in the header.
+     * @param message The message to show.
+     * @param options The toast options.
+     */
+    notify(context: Context, caption: string, childContent: DocumentFragment | string): void;
+    /**
+     * Shows a toast with the specified toast.
+     * @param toast The toast to show.
+     */
+    show(toast: IToast): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "toaster-container": Toaster;
+    }
+}
+//# sourceMappingURL=Toaster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAU,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAEtC;;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,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAclD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;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,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;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;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAItF;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;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

@@ -0,0 +1,148 @@
+import { Context, getIcon } from "../Context.js";
+import { createDocumentFragment } from "../ElementExtensions.js";
+import { Position, toCss } from "../Position.js";
+/**
+ * Manages the notification messages.
+ */
+export class Toaster extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["position"];
+    /**
+     * The template for a toast.
+     */
+    #toastTemplate = this.querySelector("template").content;
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("toaster-container", this);
+    }
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation() {
+        return this.hasAttribute("animation");
+    }
+    set animation(value) {
+        if (value)
+            this.setAttribute("animation", "");
+        else
+            this.removeAttribute("animation");
+    }
+    /**
+     * Value indicating whether to automatically hide the toasts.
+     */
+    get autoHide() {
+        return this.hasAttribute("autohide");
+    }
+    set autoHide(value) {
+        if (value)
+            this.setAttribute("autohide", "");
+        else
+            this.removeAttribute("autohide");
+    }
+    /**
+     * The default contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : Context.Info;
+    }
+    set context(value) {
+        this.setAttribute("context", value);
+    }
+    /**
+     * The default culture used to format the relative times.
+     */
+    get culture() {
+        const value = this.getAttribute("culture") ?? "";
+        return new Intl.Locale(value.trim() || navigator.language);
+    }
+    set culture(value) {
+        this.setAttribute("culture", value.toString());
+    }
+    /**
+     * The default delay, in milliseconds, to hide the toasts.
+     */
+    get delay() {
+        const value = Number(this.getAttribute("delay"));
+        return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+    }
+    set delay(value) {
+        this.setAttribute("delay", value.toString());
+    }
+    /**
+     * The default icon displayed next to the captions.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || getIcon(this.context);
+    }
+    set icon(value) {
+        this.setAttribute("icon", value);
+    }
+    /**
+     * The toaster placement.
+     */
+    get position() {
+        const value = this.getAttribute("position");
+        return Object.values(Position).includes(value) ? value : Position.BottomEnd;
+    }
+    set position(value) {
+        this.setAttribute("position", 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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "position":
+                    this.#updatePosition(Object.values(Position).includes(newValue) ? newValue : Position.BottomEnd);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Shows a toast with the specified message.
+     * @param caption The title displayed in the header.
+     * @param message The message to show.
+     * @param options The toast options.
+     */
+    notify(context, caption, childContent) {
+        this.show({ context, caption, childContent });
+    }
+    /**
+     * Shows a toast with the specified toast.
+     * @param toast The toast to show.
+     */
+    show(toast) {
+        const item = document.createElement("toaster-item");
+        item.addEventListener("hidden.bs.toast", () => item.remove());
+        item.appendChild(this.#toastTemplate.cloneNode(true).querySelector(".toast"));
+        item.animation = toast.animation ?? this.animation;
+        item.autoHide = toast.autoHide ?? this.autoHide;
+        item.caption = toast.caption;
+        item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
+        item.context = toast.context ?? this.context;
+        item.culture = toast.culture ?? this.culture;
+        item.delay = toast.delay ?? this.delay;
+        item.icon = toast.icon ?? this.icon;
+        this.firstElementChild.appendChild(item);
+        item.show();
+    }
+    /**
+     * Updates the toaster placement.
+     * @param value The new value.
+     */
+    #updatePosition(value) {
+        const { classList } = this.firstElementChild;
+        classList.remove(...Object.values(Position).flatMap(position => toCss(position).split(" ")));
+        classList.add(...toCss(value).split(" "));
+    }
+}

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.13.0",
+	"version": "0.14.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",

package/src/Client/FileExtensions.ts

@@ -1,5 +1,3 @@
-import {Duration} from "./Duration.js";
-
 /**
  * Downloads the specified file.
  * @param file The file to be downloaded.
@@ -38,7 +36,7 @@ export function open(file: File, options: {newTab?: boolean} = {}): void {
 		if (!handle.closed) return;
 		clearInterval(timer);
 		URL.revokeObjectURL(url);
-	}, 5 * Duration.Second);
+	}, 5_000);
 }
 
 /**

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

@@ -0,0 +1,44 @@
+/**
+ * A component that moves back one page in the session history when clicked.
+ */
+export class BackButton extends HTMLElement {
+
+	/**
+	 * Creates a new back button.
+	 */
+	constructor() {
+		super();
+		this.addEventListener("click", () => history.go(-this.steps));
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("back-button", this);
+	}
+
+	/**
+	 * The number of pages to go back.
+	 */
+	get steps(): number {
+		const value = Number(this.getAttribute("steps"));
+		return Math.max(0, Number.isNaN(value) ? 1 : value);
+	}
+	set steps(value: number) {
+		this.setAttribute("steps", value.toString());
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"back-button": BackButton;
+	}
+}

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

@@ -29,7 +29,7 @@ export class LoadingIndicator extends HTMLElement {
 	 */
 	stop(options: {force?: boolean} = {}): void {
 		this.#requestCount--;
-		if (options.force || this.#requestCount <= 0) {
+		if (this.#requestCount <= 0 || options.force) {
 			this.#requestCount = 0;
 			this.hidden = true;
 		}

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

@@ -1,9 +1,8 @@
-import {Duration} from "@cedx/base/Duration.js";
-import {Context, getIcon, toCss} from "@cedx/base/UI/Context.js";
 import {Toast as BootstrapToast} from "bootstrap";
+import {Context, getIcon, toCss} from "../Context.js";
 
 /**
- * Manages the notification messages.
+ * Represents a notification.
  */
 export class Toast extends HTMLElement {
 
@@ -22,11 +21,6 @@ export class Toast extends HTMLElement {
 	 */
 	#formatter!: Intl.RelativeTimeFormat;
 
-	/**
-	 * The toast header.
-	 */
-	readonly #header = this.querySelector(".toast-header")!;
-
 	/**
 	 * The time at which this component was initially shown.
 	 */
@@ -61,7 +55,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to automatically hide the notification.
+	 * Value indicating whether to automatically hide the toast.
 	 */
 	get autoHide(): boolean {
 		return this.hasAttribute("autohide");
@@ -81,6 +75,13 @@ 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.
 	 */
@@ -104,11 +105,11 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * The delay, in milliseconds, to hide the notification.
+	 * The delay, in milliseconds, to hide the toast.
 	 */
 	get delay(): number {
 		const value = Number(this.getAttribute("delay"));
-		return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+		return Math.max(0, Number.isNaN(value) ? 5_000 : value);
 	}
 	set delay(value: number) {
 		this.setAttribute("delay", value.toString());
@@ -126,7 +127,7 @@ export class Toast extends HTMLElement {
 	 */
 	get icon(): string {
 		const value = this.getAttribute("icon") ?? "";
-		return value.trim() || getIcon(Context.Info);
+		return value.trim() || getIcon(this.context);
 	}
 	set icon(value: string) {
 		this.setAttribute("icon", value);
@@ -150,7 +151,7 @@ export class Toast extends HTMLElement {
 				this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"});
 				break;
 			case "icon":
-				this.#updateIcon(newValue ?? "")
+				this.#updateIcon(newValue ?? "");
 				break;
 			// No default
 		}
@@ -162,7 +163,7 @@ export class Toast extends HTMLElement {
 	connectedCallback(): void {
 		const toast = this.querySelector(".toast")!;
 		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
-		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, Duration.Second));
+		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});
@@ -215,7 +216,7 @@ export class Toast extends HTMLElement {
 	 * @param value The new value.
 	 */
 	#updateCaption(value: string): void {
-		this.#header.querySelector("b")!.textContent = value.trim();
+		this.querySelector(".toast-header b")!.textContent = value.trim();
 	}
 
 	/**
@@ -225,13 +226,13 @@ export class Toast extends HTMLElement {
 	#updateContext(value: Context): void {
 		const contexts = Object.values(Context);
 
-		let {classList} = this.#header;
+		let {classList} = this.querySelector(".toast-header")!;
 		classList.remove(...contexts.map(context => `toast-header-${toCss(context)}`));
-		classList.add(`toast-header-${value}`);
+		classList.add(`toast-header-${toCss(value)}`);
 
-		({classList} = this.#header.querySelector(".icon")!);
+		({classList} = this.querySelector(".toast-header .icon")!);
 		classList.remove(...contexts.map(context => `text-${toCss(context)}`));
-		classList.add(`text-${value}`);
+		classList.add(`text-${toCss(value)}`);
 	}
 
 	/**
@@ -239,7 +240,7 @@ export class Toast extends HTMLElement {
 	 */
 	readonly #updateElapsedTime: () => void = () => {
 		const {elapsedTime} = this;
-		this.#header.querySelector("small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / Duration.Second) : "";
+		this.querySelector(".toast-header small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / 1_000) : "";
 	};
 
 	/**
@@ -247,6 +248,19 @@ export class Toast extends HTMLElement {
 	 * @param value The new value.
 	 */
 	#updateIcon(value: string): void {
-		this.#header.querySelector(".icon")!.textContent = value.trim() || getIcon(Context.Info);
+		this.querySelector(".toast-header .icon")!.textContent = value.trim() || getIcon(Context.Info);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"toaster-item": Toast;
 	}
 }

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

@@ -0,0 +1,219 @@
+import {Context, getIcon} from "../Context.js";
+import {createDocumentFragment} from "../ElementExtensions.js";
+import {Position, toCss} from "../Position.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 title displayed in the header.
+	 */
+	caption: string;
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	childContent: DocumentFragment|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;
+}
+
+/**
+ * Manages the notification messages.
+ */
+export class Toaster extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["position"];
+
+	/**
+	 * The template for a toast.
+	 */
+	readonly #toastTemplate: DocumentFragment = this.querySelector("template")!.content;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("toaster-container", this);
+	}
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	get animation(): boolean {
+		return this.hasAttribute("animation");
+	}
+	set animation(value: boolean) {
+		if (value) this.setAttribute("animation", "");
+		else this.removeAttribute("animation");
+	}
+
+	/**
+	 * Value indicating whether to automatically hide the toasts.
+	 */
+	get autoHide(): boolean {
+		return this.hasAttribute("autohide");
+	}
+	set autoHide(value: boolean) {
+		if (value) this.setAttribute("autohide", "");
+		else this.removeAttribute("autohide");
+	}
+
+	/**
+	 * The default 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 default culture used to format the relative times.
+	 */
+	get culture(): Intl.Locale {
+		const value = this.getAttribute("culture") ?? "";
+		return new Intl.Locale(value.trim() || navigator.language);
+	}
+	set culture(value: Intl.Locale) {
+		this.setAttribute("culture", value.toString());
+	}
+
+	/**
+	 * The default delay, in milliseconds, to hide the toasts.
+	 */
+	get delay(): number {
+		const value = Number(this.getAttribute("delay"));
+		return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+	}
+	set delay(value: number) {
+		this.setAttribute("delay", value.toString());
+	}
+
+	/**
+	 * The default icon displayed next to the captions.
+	 */
+	get icon(): string {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || getIcon(this.context);
+	}
+	set icon(value: string) {
+		this.setAttribute("icon", value);
+	}
+
+	/**
+	 * The toaster placement.
+	 */
+	get position(): Position {
+		const value = this.getAttribute("position") as Position;
+		return Object.values(Position).includes(value) ? value : Position.BottomEnd;
+	}
+	set position(value: Position) {
+		this.setAttribute("position", 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 "position":
+				this.#updatePosition(Object.values(Position).includes(newValue as Position) ? newValue as Position : Position.BottomEnd);
+				break;
+			// No default
+		}
+	}
+
+	/**
+	 * Shows a toast with the specified message.
+	 * @param caption The title displayed in the header.
+	 * @param message The message to show.
+	 * @param options The toast options.
+	 */
+	notify(context: Context, caption: string, childContent: DocumentFragment|string): void {
+		this.show({context, caption, childContent});
+	}
+
+	/**
+	 * Shows a toast with the specified toast.
+	 * @param toast The toast to show.
+	 */
+	show(toast: IToast): void {
+		const item = document.createElement("toaster-item");
+		item.addEventListener("hidden.bs.toast", () => item.remove());
+		item.appendChild((this.#toastTemplate.cloneNode(true) as DocumentFragment).querySelector(".toast")!);
+
+		item.animation = toast.animation ?? this.animation;
+		item.autoHide = toast.autoHide ?? this.autoHide;
+		item.caption = toast.caption;
+		item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
+		item.context = toast.context ?? this.context;
+		item.culture = toast.culture ?? this.culture;
+		item.delay = toast.delay ?? this.delay;
+		item.icon = toast.icon ?? this.icon;
+
+		this.firstElementChild!.appendChild(item);
+		item.show();
+	}
+
+	/**
+	 * Updates the toaster placement.
+	 * @param value The new value.
+	 */
+	#updatePosition(value: Position): void {
+		const {classList} = this.firstElementChild!;
+		classList.remove(...Object.values(Position).flatMap(position => toCss(position).split(" ")));
+		classList.add(...toCss(value).split(" "));
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"toaster-container": Toaster;
+	}
+}