@cedx/base 0.11.0 → 0.12.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.11.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.12.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/UI/Components/OfflineIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAShD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}
+{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAShD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAQ5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/Components/OfflineIndicator.js

@@ -12,19 +12,19 @@ export class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        this.#updateHiddenState();
+        this.#update();
         for (const event of ["online", "offline"])
-            addEventListener(event, this.#updateHiddenState);
+            addEventListener(event, this.#update);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         for (const event of ["online", "offline"])
-            removeEventListener(event, this.#updateHiddenState);
+            removeEventListener(event, this.#update);
     }
     /**
-     * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+     * Updates this component.
      */
-    #updateHiddenState = () => this.hidden = navigator.onLine;
+    #update = () => this.hidden = navigator.onLine;
 }

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

@@ -25,7 +25,7 @@ export declare class TabActivator extends HTMLElement {
     /**
      * The tab list.
      */
-    get tabs(): NodeListOf<HTMLButtonElement>;
+    get tabs(): NodeListOf<HTMLElement>;
     /**
      * Method invoked when this component is connected.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAS5C;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAExC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAS5C;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,CAElC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

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

@@ -40,6 +40,10 @@ export declare class ThemeDropdown extends HTMLElement {
      * @param newValue The new attribute value.
      */
     attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Closes the dropdown menu.
+     */
+    close(): void;
     /**
      * Method invoked when this component is connected.
      */
@@ -48,6 +52,14 @@ export declare class ThemeDropdown extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
+    /**
+     * Opens the dropdown menu.
+     */
+    open(): void;
+    /**
+     * Saves the current application theme into the local storage.
+     */
+    save(): void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAOxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,aAAa,CAG7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAEjC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAwB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAsB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAYxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,aAAa,CAG7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAEjC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAe/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAkDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/ThemeDropdown.js

@@ -1,3 +1,4 @@
+import { Dropdown } from "bootstrap";
 import { AppTheme, getIcon } from "../AppTheme.js";
 import { MenuAlignment } from "../MenuAlignment.js";
 /**
@@ -8,6 +9,10 @@ export class ThemeDropdown extends HTMLElement {
      * The list of observed attributes.
      */
     static observedAttributes = ["alignment", "apptheme", "label"];
+    /**
+     * The dropdown menu.
+     */
+    #dropdown;
     /**
      * The media query used to check the application theme.
      */
@@ -18,7 +23,7 @@ export class ThemeDropdown extends HTMLElement {
     constructor() {
         super();
         for (const button of this.querySelectorAll("button"))
-            button.addEventListener("click", this.#setTheme);
+            button.addEventListener("click", this.#setAppTheme);
     }
     /**
      * Registers the component.
@@ -45,7 +50,6 @@ export class ThemeDropdown extends HTMLElement {
     }
     set appTheme(value) {
         this.setAttribute("apptheme", value);
-        localStorage.setItem(this.storageKey, this.appTheme);
     }
     /**
      * The label of the dropdown menu.
@@ -76,48 +80,57 @@ export class ThemeDropdown extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
-                case "alignment": {
-                    const alignment = Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End;
-                    const { classList } = this.querySelector(".dropdown-menu");
-                    if (alignment == MenuAlignment.End)
-                        classList.add("dropdown-menu-end");
-                    else
-                        classList.remove("dropdown-menu-end");
+                case "alignment":
+                    this.#updateAlignment(Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End);
                     break;
-                }
-                case "apptheme": {
-                    const appTheme = Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System;
-                    this.querySelector(".dropdown-toggle > .icon").textContent = getIcon(appTheme);
-                    this.querySelector(`button[data-theme="${appTheme}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
-                    this.#applyTheme();
+                case "apptheme":
+                    this.#updateAppTheme(Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System);
                     break;
-                }
-                case "label": {
-                    this.querySelector(".dropdown-toggle > span").textContent = (newValue ?? "").trim() || "Thème";
+                case "label":
+                    this.#updateLabel(newValue ?? "");
                     break;
-                }
                 // No default
             }
     }
+    /**
+     * Closes the dropdown menu.
+     */
+    close() {
+        this.#dropdown.hide();
+    }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
         const appTheme = localStorage.getItem(this.storageKey);
         if (appTheme)
-            this.setAttribute("apptheme", appTheme);
-        this.#mediaQuery.addEventListener("change", this.#applyTheme);
+            this.appTheme = appTheme;
+        this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle"));
+        this.#mediaQuery.addEventListener("change", this.#applyToDocument);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        this.#mediaQuery.removeEventListener("change", this.#applyTheme);
+        this.#dropdown.dispose();
+        this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
+    }
+    /**
+     * Opens the dropdown menu.
+     */
+    open() {
+        this.#dropdown.show();
+    }
+    /**
+     * Saves the current application theme into the local storage.
+     */
+    save() {
+        localStorage.setItem(this.storageKey, this.appTheme);
     }
     /**
      * Applies the application theme to the document.
      */
-    #applyTheme = () => {
+    #applyToDocument = () => {
         const { appTheme } = this;
         const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
         document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
@@ -126,9 +139,36 @@ export class ThemeDropdown extends HTMLElement {
      * Changes the current application theme.
      * @param event The dispatched event.
      */
-    #setTheme = event => {
+    #setAppTheme = event => {
         event.preventDefault();
-        const button = event.target.closest("button");
-        this.appTheme = button.dataset.theme;
+        this.appTheme = event.target.closest("button").dataset.theme;
+        this.save();
     };
+    /**
+     * Updates the alignment of the dropdown menu.
+     * @param value The new value.
+     */
+    #updateAlignment(value) {
+        const { classList } = this.querySelector(".dropdown-menu");
+        if (value == MenuAlignment.End)
+            classList.add("dropdown-menu-end");
+        else
+            classList.remove("dropdown-menu-end");
+    }
+    /**
+     * Updates the application theme.
+     * @param value The new value.
+     */
+    #updateAppTheme(value) {
+        this.querySelector(".dropdown-toggle > .icon").textContent = getIcon(value);
+        this.querySelector(`button[data-theme="${value}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
+        this.#applyToDocument();
+    }
+    /**
+     * Updates the label of the dropdown menu.
+     * @param value The new value.
+     */
+    #updateLabel(value) {
+        this.querySelector(".dropdown-toggle > span").textContent = value.trim() || "Thème";
+    }
 }

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

@@ -0,0 +1,74 @@
+import { Context } from "@cedx/base/UI/Context.js";
+/**
+ * Manages the notification messages.
+ */
+export declare class Toast 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 notification.
+     */
+    get autoHide(): boolean;
+    set autoHide(value: boolean);
+    /**
+     * The title displayed in the header.
+     */
+    get caption(): string;
+    set caption(value: string);
+    /**
+     * A contextual modifier.
+     */
+    get context(): Context;
+    set context(value: Context);
+    /**
+     * The culture used to format the relative time.
+     */
+    get culture(): Intl.Locale;
+    set culture(value: Intl.Locale);
+    /**
+     * The delay, in milliseconds, to hide the notification.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * The time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime(): number;
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * 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;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Hides this toast.
+     */
+    hide(): void;
+    /**
+     * Shows this toast.
+     */
+    show(): void;
+}
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAU,MAAM,0BAA0B,CAAC;AAG1D;;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"}

package/lib/UI/Components/Toast.js

@@ -0,0 +1,225 @@
+import { Duration } from "@cedx/base/Duration.js";
+import { Context, getIcon } from "@cedx/base/UI/Context.js";
+import { Toast as BootstrapToast } from "bootstrap";
+/**
+ * Manages the notification messages.
+ */
+export class Toast extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["caption", "context", "culture", "icon"];
+    /**
+     * The time units.
+     */
+    static #timeUnits = ["second", "minute", "hour"];
+    /**
+     * 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.
+     */
+    #initialTime = Date.now();
+    /**
+     * The timer identifier.
+     */
+    #timer = 0;
+    /**
+     * The underlying Bootstrap toast.
+     */
+    #toast;
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("toaster-item", 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 notification.
+     */
+    get autoHide() {
+        return this.hasAttribute("autohide");
+    }
+    set autoHide(value) {
+        if (value)
+            this.setAttribute("autohide", "");
+        else
+            this.removeAttribute("autohide");
+    }
+    /**
+     * The title displayed in the header.
+     */
+    get caption() {
+        return (this.getAttribute("caption") ?? "").trim();
+    }
+    set caption(value) {
+        this.setAttribute("caption", value);
+    }
+    /**
+     * A 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 culture used to format the relative time.
+     */
+    get culture() {
+        const value = this.getAttribute("culture") ?? "";
+        return new Intl.Locale(value.trim() || navigator.language);
+    }
+    set culture(value) {
+        this.setAttribute("culture", value.toString());
+    }
+    /**
+     * The delay, in milliseconds, to hide the notification.
+     */
+    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 time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime() {
+        return Date.now() - this.#initialTime;
+    }
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || getIcon(Context.Info);
+    }
+    set icon(value) {
+        this.setAttribute("icon", 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 "caption":
+                    this.#updateCaption(newValue ?? "");
+                    break;
+                case "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : Context.Info);
+                    break;
+                case "culture":
+                    this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, { style: "long" });
+                    break;
+                case "icon":
+                    this.#updateIcon(newValue ?? "");
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    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));
+        const { animation, autoHide: autohide, delay } = this;
+        this.#toast = new BootstrapToast(toast, { animation, autohide, delay });
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        clearInterval(this.#timer);
+        this.#toast.dispose();
+    }
+    /**
+     * Hides this toast.
+     */
+    hide() {
+        this.#toast.hide();
+    }
+    /**
+     * Shows this toast.
+     */
+    show() {
+        if (!this.#toast.isShown()) {
+            this.#initialTime = Date.now();
+            this.#updateElapsedTime();
+        }
+        this.#toast.show();
+    }
+    /**
+     * Formats the specified elapsed time.
+     * @param elapsed The elapsed time, in seconds.
+     * @returns The formated time.
+     */
+    #formatTime(elapsed) {
+        let index = 0;
+        while (elapsed > 60 && index < Toast.#timeUnits.length) {
+            elapsed /= 60;
+            index++;
+        }
+        return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
+    }
+    /**
+     * Updates the title displayed in the header.
+     * @param value The new value.
+     */
+    #updateCaption(value) {
+        this.#header.querySelector("b").textContent = value.trim();
+    }
+    /**
+     * Updates the title displayed in the header.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const contexts = Object.values(Context);
+        let { classList } = this.#header;
+        classList.remove(...contexts.map(context => `toast-header-${context}`));
+        classList.add(`toast-header-${value}`);
+        ({ classList } = this.#header.querySelector(".icon"));
+        classList.remove(...contexts.map(context => `text-${context}`));
+        classList.add(`text-${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) : "";
+    };
+    /**
+     * 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);
+    }
+}

package/lib/UI/Position.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Defines the placement of an element.
+ */
+export declare const Position: Readonly<{
+    /**
+     * Top left.
+     */
+    TopLeft: "TopLeft";
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter";
+    /**
+     * Top right.
+     */
+    TopRight: "TopRight";
+    /**
+     * Middle left.
+     */
+    MiddleLeft: "MiddleLeft";
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter";
+    /**
+     * Middle right.
+     */
+    MiddleRight: "MiddleRight";
+    /**
+     * Bottom left.
+     */
+    BottomLeft: "BottomLeft";
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter";
+    /**
+     * Bottom right.
+     */
+    BottomRight: "BottomRight";
+}>;
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];
+//# sourceMappingURL=Position.d.ts.map

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

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

package/lib/UI/Position.js

@@ -0,0 +1,41 @@
+/**
+ * Defines the placement of an element.
+ */
+export const Position = Object.freeze({
+    /**
+     * Top left.
+     */
+    TopLeft: "TopLeft",
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter",
+    /**
+     * Top right.
+     */
+    TopRight: "TopRight",
+    /**
+     * Middle left.
+     */
+    MiddleLeft: "MiddleLeft",
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter",
+    /**
+     * Middle right.
+     */
+    MiddleRight: "MiddleRight",
+    /**
+     * Bottom left.
+     */
+    BottomLeft: "BottomLeft",
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter",
+    /**
+     * Bottom right.
+     */
+    BottomRight: "BottomRight"
+});

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.11.0",
+	"version": "0.12.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
@@ -15,7 +15,7 @@
 		"@types/mocha": "^10.0.10",
 		"@types/node": "^24.3.0",
 		"@types/serve-handler": "^6.1.4",
-		"chai": "^6.0.0",
+		"chai": "^6.0.1",
 		"esbuild": "^0.25.9",
 		"globals": "^16.3.0",
 		"mocha": "^11.7.1",

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

@@ -14,22 +14,21 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		this.#updateHiddenState();
-		for (const event of ["online", "offline"]) addEventListener(event, this.#updateHiddenState);
+		this.#update();
+		for (const event of ["online", "offline"]) addEventListener(event, this.#update);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateHiddenState);
+		for (const event of ["online", "offline"]) removeEventListener(event, this.#update);
 	}
 
 	/**
-	 * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+	 * Updates this component.
 	 */
-	readonly #updateHiddenState: () => void = () =>
-		this.hidden = navigator.onLine;
+	readonly #update: () => void = () => this.hidden = navigator.onLine;
 }
 
 /**

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

@@ -56,7 +56,7 @@ export class TabActivator extends HTMLElement {
 	/**
 	 * The tab list.
 	 */
-	get tabs(): NodeListOf<HTMLButtonElement> {
+	get tabs(): NodeListOf<HTMLElement> {
 		return this.querySelectorAll('[data-bs-toggle="tab"]');
 	}
 

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

@@ -1,3 +1,4 @@
+import {Dropdown} from "bootstrap";
 import {AppTheme, getIcon} from "../AppTheme.js";
 import {MenuAlignment} from "../MenuAlignment.js";
 
@@ -11,6 +12,11 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	static readonly observedAttributes = ["alignment", "apptheme", "label"];
 
+	/**
+	 * The dropdown menu.
+	 */
+	#dropdown!: Dropdown;
+
 	/**
 	 * The media query used to check the application theme.
 	 */
@@ -21,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme);
+		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setAppTheme);
 	}
 
 	/**
@@ -51,7 +57,6 @@ export class ThemeDropdown extends HTMLElement {
 	}
 	set appTheme(value: AppTheme) {
 		this.setAttribute("apptheme", value);
-		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
@@ -84,48 +89,63 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "alignment": {
-				const alignment = Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End;
-				const {classList} = this.querySelector(".dropdown-menu")!;
-				if (alignment == MenuAlignment.End) classList.add("dropdown-menu-end");
-				else classList.remove("dropdown-menu-end");
+			case "alignment":
+				this.#updateAlignment(Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End);
 				break;
-			}
-			case "apptheme": {
-				const appTheme = Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System;
-				this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(appTheme);
-				this.querySelector(`button[data-theme="${appTheme}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
-				this.#applyTheme();
+			case "apptheme":
+				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
 				break;
-			}
-			case "label": {
-				this.querySelector(".dropdown-toggle > span")!.textContent = (newValue ?? "").trim() || "Thème";
+			case "label":
+				this.#updateLabel(newValue ?? "");
 				break;
-			}
 			// No default
 		}
 	}
 
+	/**
+	 * Closes the dropdown menu.
+	 */
+	close(): void {
+		this.#dropdown.hide();
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
 		const appTheme = localStorage.getItem(this.storageKey) as AppTheme|null;
-		if (appTheme) this.setAttribute("apptheme", appTheme);
-		this.#mediaQuery.addEventListener("change", this.#applyTheme);
+		if (appTheme) this.appTheme = appTheme;
+
+		this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle")!);
+		this.#mediaQuery.addEventListener("change", this.#applyToDocument);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		this.#mediaQuery.removeEventListener("change", this.#applyTheme);
+		this.#dropdown.dispose();
+		this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
+	}
+
+	/**
+	 * Opens the dropdown menu.
+	 */
+	open(): void {
+		this.#dropdown.show();
+	}
+
+	/**
+	 * Saves the current application theme into the local storage.
+	 */
+	save(): void {
+		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
 	 * Applies the application theme to the document.
 	 */
- 	readonly #applyTheme: () => void = () => {
+ 	readonly #applyToDocument: () => void = () => {
 		const {appTheme} = this;
 		const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
 		document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
@@ -135,11 +155,39 @@ export class ThemeDropdown extends HTMLElement {
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	readonly #setTheme: (event: Event) => void = event => {
+	readonly #setAppTheme: (event: Event) => void = event => {
 		event.preventDefault();
-		const button = (event.target as HTMLElement).closest("button")!;
-		this.appTheme = button.dataset.theme! as AppTheme;
+		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
+		this.save();
 	};
+
+	/**
+	 * Updates the alignment of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateAlignment(value: MenuAlignment): void {
+		const {classList} = this.querySelector(".dropdown-menu")!;
+		if (value == MenuAlignment.End) classList.add("dropdown-menu-end");
+		else classList.remove("dropdown-menu-end");
+	}
+
+	/**
+	 * Updates the application theme.
+	 * @param value The new value.
+	 */
+	#updateAppTheme(value: AppTheme): void {
+		this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(value);
+		this.querySelector(`button[data-theme="${value}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
+		this.#applyToDocument();
+	}
+
+	/**
+	 * Updates the label of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		this.querySelector(".dropdown-toggle > span")!.textContent = value.trim() || "Thème";
+	}
 }
 
 /**

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

@@ -0,0 +1,252 @@
+import {Duration} from "@cedx/base/Duration.js";
+import {Context, getIcon} from "@cedx/base/UI/Context.js";
+import {Toast as BootstrapToast} from "bootstrap";
+
+/**
+ * Manages the notification messages.
+ */
+export class Toast extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["caption", "context", "culture", "icon"];
+
+	/**
+	 * The time units.
+	 */
+	static readonly #timeUnits: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour"];
+
+	/**
+	 * The formatter used to format the relative time.
+	 */
+	#formatter!: Intl.RelativeTimeFormat;
+
+	/**
+	 * The toast header.
+	 */
+	readonly #header = this.querySelector(".toast-header")!;
+
+	/**
+	 * The time at which this component was initially shown.
+	 */
+	#initialTime = Date.now();
+
+	/**
+	 * The timer identifier.
+	 */
+	#timer = 0;
+
+	/**
+	 * The underlying Bootstrap toast.
+	 */
+	#toast!: BootstrapToast;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("toaster-item", 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 notification.
+	 */
+	get autoHide(): boolean {
+		return this.hasAttribute("autohide");
+	}
+	set autoHide(value: boolean) {
+		if (value) this.setAttribute("autohide", "");
+		else this.removeAttribute("autohide");
+	}
+
+	/**
+	 * The title displayed in the header.
+	 */
+	get caption(): string {
+		return (this.getAttribute("caption") ?? "").trim();
+	}
+	set caption(value: string) {
+		this.setAttribute("caption", value);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : Context.Info;
+	}
+	set context(value: Context) {
+		this.setAttribute("context", value);
+	}
+
+	/**
+	 * The culture used to format the relative time.
+	 */
+	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 delay, in milliseconds, to hide the notification.
+	 */
+	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 time elapsed since this component was initially shown, in milliseconds.
+	 */
+	get elapsedTime(): number {
+		return Date.now() - this.#initialTime;
+	}
+
+	/**
+	 * The icon displayed next to the caption.
+	 */
+	get icon(): string {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || getIcon(Context.Info);
+	}
+	set icon(value: string) {
+		this.setAttribute("icon", 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 "caption":
+				this.#updateCaption(newValue ?? "");
+				break;
+			case "context":
+				this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info);
+				break;
+			case "culture":
+				this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"});
+				break;
+			case "icon":
+				this.#updateIcon(newValue ?? "")
+				break;
+			// No default
+		}
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	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));
+
+		const {animation, autoHide: autohide, delay} = this;
+		this.#toast = new BootstrapToast(toast, {animation, autohide, delay});
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		clearInterval(this.#timer);
+		this.#toast.dispose();
+	}
+
+	/**
+	 * Hides this toast.
+	 */
+	hide(): void {
+		this.#toast.hide();
+	}
+
+	/**
+	 * Shows this toast.
+	 */
+	show(): void {
+		if (!this.#toast.isShown()) {
+			this.#initialTime = Date.now();
+			this.#updateElapsedTime();
+		}
+
+		this.#toast.show();
+	}
+
+	/**
+	 * Formats the specified elapsed time.
+	 * @param elapsed The elapsed time, in seconds.
+	 * @returns The formated time.
+	 */
+	#formatTime(elapsed: number): string {
+		let index = 0;
+		while (elapsed > 60 && index < Toast.#timeUnits.length) {
+			elapsed /= 60;
+			index++;
+		}
+
+		return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateCaption(value: string): void {
+		this.#header.querySelector("b")!.textContent = value.trim();
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateContext(value: Context): void {
+		const contexts = Object.values(Context);
+
+		let {classList} = this.#header;
+		classList.remove(...contexts.map(context => `toast-header-${context}`));
+		classList.add(`toast-header-${value}`);
+
+		({classList} = this.#header.querySelector(".icon")!);
+		classList.remove(...contexts.map(context => `text-${context}`));
+		classList.add(`text-${value}`);
+	}
+
+	/**
+	 * Updates the label corresponding to the elapsed time.
+	 */
+	readonly #updateElapsedTime: () => void = () => {
+		const {elapsedTime} = this;
+		this.#header.querySelector("small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / Duration.Second) : "";
+	};
+
+	/**
+	 * Updates the icon displayed next to the caption.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string): void {
+		this.#header.querySelector(".icon")!.textContent = value.trim() || getIcon(Context.Info);
+	}
+}

package/src/Client/UI/Position.ts

@@ -0,0 +1,55 @@
+/**
+ * Defines the placement of an element.
+ */
+export const Position = Object.freeze({
+
+	/**
+	 * Top left.
+	 */
+	TopLeft: "TopLeft",
+
+	/**
+	 * Top center.
+	 */
+	TopCenter: "TopCenter",
+
+	/**
+	 * Top right.
+	 */
+	TopRight: "TopRight",
+
+	/**
+	 * Middle left.
+	 */
+	MiddleLeft: "MiddleLeft",
+
+	/**
+	 * Middle center.
+	 */
+	MiddleCenter: "MiddleCenter",
+
+	/**
+	 * Middle right.
+	 */
+	MiddleRight: "MiddleRight",
+
+	/**
+	 * Bottom left.
+	 */
+	BottomLeft: "BottomLeft",
+
+	/**
+	 * Bottom center.
+	 */
+	BottomCenter: "BottomCenter",
+
+	/**
+	 * Bottom right.
+	 */
+	BottomRight: "BottomRight"
+});
+
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];