@cedx/base 0.11.0 → 0.13.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.13.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,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"}

package/lib/UI/Components/Toast.js

@@ -0,0 +1,225 @@
+import { Duration } from "@cedx/base/Duration.js";
+import { Context, getIcon, toCss } 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-${toCss(context)}`));
+        classList.add(`toast-header-${value}`);
+        ({ classList } = this.#header.querySelector(".icon"));
+        classList.remove(...contexts.map(context => `text-${toCss(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/Context.d.ts

@@ -5,19 +5,19 @@ export declare const Context: Readonly<{
     /**
      * A danger.
      */
-    Danger: "danger";
+    Danger: "Danger";
     /**
      * A warning.
      */
-    Warning: "warning";
+    Warning: "Warning";
     /**
      * An information.
      */
-    Info: "info";
+    Info: "Info";
     /**
      * A success.
      */
-    Success: "success";
+    Success: "Success";
 }>;
 /**
  * Defines contextual modifiers.
@@ -29,4 +29,10 @@ export type Context = typeof Context[keyof typeof Context];
  * @returns The icon corresponding to the specified context.
  */
 export declare function getIcon(context: Context): string;
+/**
+ * Returns the CSS representation of the specified context.
+ * @param context The context.
+ * @returns The CSS representation of the specified context.
+ */
+export declare function toCss(context: Context): string;
 //# sourceMappingURL=Context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.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,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOhD"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Context.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,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOhD;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}

package/lib/UI/Context.js

@@ -5,19 +5,19 @@ export const Context = Object.freeze({
     /**
      * A danger.
      */
-    Danger: "danger",
+    Danger: "Danger",
     /**
      * A warning.
      */
-    Warning: "warning",
+    Warning: "Warning",
     /**
      * An information.
      */
-    Info: "info",
+    Info: "Info",
     /**
      * A success.
      */
-    Success: "success"
+    Success: "Success"
 });
 /**
  * Gets the icon corresponding to the specified context.
@@ -32,3 +32,11 @@ export function getIcon(context) {
         default: return "info";
     }
 }
+/**
+ * Returns the CSS representation of the specified context.
+ * @param context The context.
+ * @returns The CSS representation of the specified context.
+ */
+export function toCss(context) {
+    return context.toLowerCase();
+}

package/lib/UI/Position.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Defines the position of an element.
+ */
+export declare const Position: Readonly<{
+    /**
+     * Top left.
+     */
+    TopStart: "TopStart";
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter";
+    /**
+     * Top right.
+     */
+    TopEnd: "TopEnd";
+    /**
+     * Middle left.
+     */
+    MiddleStart: "MiddleStart";
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter";
+    /**
+     * Middle right.
+     */
+    MiddleEnd: "MiddleEnd";
+    /**
+     * Bottom left.
+     */
+    BottomStart: "BottomStart";
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter";
+    /**
+     * Bottom right.
+     */
+    BottomEnd: "BottomEnd";
+}>;
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];
+/**
+ * Returns the CSS representation of the specified position.
+ * @param position The position.
+ * @returns The CSS representation of the specified position.
+ */
+export declare function toCss(position: Position): string;
+//# 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;AAE9D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAYhD"}