@cedx/base 0.15.3 → 0.17.0

package/ReadMe.md

@@ -1,7 +1,7 @@
-# Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.15.3/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+# Cédric Belin's Base
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.17.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
-Base library by [Cédric Belin](https://belin.io), full stack developer,
+Base library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).
 
 > This library is dedicated to personal/side projects.  
@@ -17,4 +17,4 @@ implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeSc
 - [Submit an issue](https://github.com/cedx/base/issues)
 
 ## Licence
-[Belin.io Base](https://github.com/cedx/base) is distributed under the MIT License.
+[Cédric Belin's Base](https://github.com/cedx/base) is distributed under the MIT License.

package/lib/UI/Alignment.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Defines the alignment of a component.
+ */
+export declare const Alignment: Readonly<{
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start";
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center";
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End";
+}>;
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];
+//# sourceMappingURL=Alignment.d.ts.map

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

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

package/lib/UI/Alignment.js

@@ -0,0 +1,17 @@
+/**
+ * Defines the alignment of a component.
+ */
+export const Alignment = Object.freeze({
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start",
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center",
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End"
+});

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

@@ -0,0 +1,82 @@
+import { Context } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { Variant } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export interface IDialogButton {
+    /**
+     * A contextual modifier.
+     */
+    context?: Context | null;
+    /**
+     * The button icon.
+     */
+    icon?: string | null;
+    /**
+     * The button label.
+     */
+    label?: string;
+    /**
+     * The button value.
+     */
+    value?: DialogResult;
+    /**
+     * A tone variant.
+     */
+    variant?: Variant | null;
+}
+/**
+ * Represents a dialog box button.
+ */
+export declare class DialogButton extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * A contextual modifier.
+     */
+    get context(): Context | null;
+    set context(value: Context | null);
+    /**
+     * The button icon.
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    /**
+     * The button label.
+     */
+    get label(): string;
+    set label(value: string);
+    /**
+     * The button value.
+     */
+    get value(): DialogResult;
+    set value(value: DialogResult);
+    /**
+     * A tone variant.
+     */
+    get variant(): Variant | null;
+    set variant(value: Variant | null);
+    /**
+     * 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;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "dialog-button": DialogButton;
+    }
+}
+//# sourceMappingURL=DialogButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAC,OAAO,EAAsB,MAAM,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAC,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;;IAE5C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAoD;IAStF;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAE9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,YAAY,CAGxB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,EAE5B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,GAAC,IAAI,CAG1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAC,IAAI,EAE9B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CA6D/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/lib/UI/Components/DialogButton.js

@@ -0,0 +1,142 @@
+import { Context, toCss as contextCss } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { Variant, toCss as variantCss } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export class DialogButton extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["context", "icon", "label", "value", "variant"];
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("dialog-button", this);
+    }
+    /**
+     * A contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : null;
+    }
+    set context(value) {
+        this.toggleAttribute("context", Boolean(value));
+    }
+    /**
+     * The button icon.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
+    }
+    set icon(value) {
+        this.toggleAttribute("icon", Boolean(value));
+    }
+    /**
+     * The button label.
+     */
+    get label() {
+        return (this.getAttribute("label") ?? "").trim();
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /**
+     * The button value.
+     */
+    get value() {
+        const value = this.getAttribute("value");
+        return Object.values(DialogResult).includes(value) ? value : DialogResult.None;
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    /**
+     * A tone variant.
+     */
+    get variant() {
+        const value = this.getAttribute("variant");
+        return Object.values(Variant).includes(value) ? value : null;
+    }
+    set variant(value) {
+        this.toggleAttribute("context", Boolean(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 "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : null);
+                    break;
+                case "icon":
+                    this.#updateIcon(newValue);
+                    break;
+                case "label":
+                    this.#updateLabel(newValue ?? "");
+                    break;
+                case "value":
+                    this.#updateValue(Object.values(DialogResult).includes(newValue) ? newValue : DialogResult.None);
+                    break;
+                case "variant":
+                    this.#updateVariant(Object.values(Variant).includes(newValue) ? newValue : null);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Updates the contextual modifier.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const { classList } = this.querySelector("button");
+        classList.remove(...Object.values(Context).map(context => `btn-${contextCss(context)}`));
+        if (value)
+            classList.add(`btn-${contextCss(value)}`);
+    }
+    /**
+     * Updates the button icon.
+     * @param value The new value.
+     */
+    #updateIcon(value) {
+        const element = this.querySelector(".icon");
+        const icon = (value ?? "").trim();
+        element.textContent = icon;
+        element.hidden = !icon;
+    }
+    /**
+     * Updates the button label.
+     * @param value The new value.
+     */
+    #updateLabel(value) {
+        const element = this.querySelector("span");
+        const label = value.trim();
+        element.textContent = label;
+        element.hidden = !label;
+        this.querySelector(".icon").classList.toggle("me-1", !element.hidden);
+    }
+    /**
+     * Updates the button value.
+     * @param value The new value.
+     */
+    #updateValue(value) {
+        this.querySelector("button").value = value;
+    }
+    /**
+     * Updates the tone variant.
+     * @param value The new value.
+     */
+    #updateVariant(value) {
+        const { classList } = this.querySelector("button");
+        classList.remove(...Object.values(Variant).map(variant => `btn-${variantCss(variant)}`));
+        if (value)
+            classList.add(`btn-${variantCss(value)}`);
+    }
+}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -31,7 +31,7 @@ export class KeyboardAccelerator extends HTMLElement {
             .reduce((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
     }
     set modifiers(value) {
-        this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+        this.setAttribute("modifiers", !value ? "None" : KeyboardAccelerator.#modifiers.entries()
             .filter(([, flag]) => (value & flag) != 0)
             .map(([key]) => key)
             .toArray().join(", "));

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

@@ -1,5 +1,5 @@
+import { Alignment } from "../Alignment.js";
 import { AppTheme } from "../AppTheme.js";
-import { MenuAlignment } from "../MenuAlignment.js";
 /**
  * A dropdown menu for switching the application theme.
  */
@@ -16,8 +16,8 @@ export declare class ThemeDropdown extends HTMLElement {
     /**
      * The alignment of the dropdown menu.
      */
-    get alignment(): MenuAlignment;
-    set alignment(value: MenuAlignment);
+    get alignment(): Alignment;
+    set alignment(value: Alignment);
     /**
      * The current application theme.
      */

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":"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"}
+{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AAEjD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAYxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,SAAS,CAGzB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;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;CAgDZ;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,6 +1,6 @@
 import { Dropdown } from "bootstrap";
+import { Alignment } from "../Alignment.js";
 import { AppTheme, getIcon } from "../AppTheme.js";
-import { MenuAlignment } from "../MenuAlignment.js";
 /**
  * A dropdown menu for switching the application theme.
  */
@@ -36,7 +36,7 @@ export class ThemeDropdown extends HTMLElement {
      */
     get alignment() {
         const value = this.getAttribute("alignment");
-        return Object.values(MenuAlignment).includes(value) ? value : MenuAlignment.End;
+        return Object.values(Alignment).includes(value) ? value : Alignment.End;
     }
     set alignment(value) {
         this.setAttribute("alignment", value);
@@ -81,7 +81,7 @@ export class ThemeDropdown extends HTMLElement {
         if (newValue != oldValue)
             switch (attribute) {
                 case "alignment":
-                    this.#updateAlignment(Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End);
+                    this.#updateAlignment(Object.values(Alignment).includes(newValue) ? newValue : Alignment.End);
                     break;
                 case "apptheme":
                     this.#updateAppTheme(Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System);
@@ -149,11 +149,7 @@ export class ThemeDropdown extends HTMLElement {
      * @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");
+        this.querySelector(".dropdown-menu").classList.toggle("dropdown-menu-end", value == Alignment.End);
     }
     /**
      * Updates the application theme.

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

@@ -1,4 +1,41 @@
 import { Context } from "../Context.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 child content displayed in the body.
+     */
+    body: DocumentFragment | string;
+    /**
+     * The title displayed in the header.
+     */
+    caption: string;
+    /**
+     * The default contextual modifier.
+     */
+    context?: Context;
+    /**
+     * The culture used to format the relative time.
+     */
+    culture?: Intl.Locale;
+    /**
+     * The delay, in milliseconds, to hide the toast.
+     */
+    delay?: number;
+    /**
+     * The icon displayed next to the caption.
+     */
+    icon?: string | null;
+}
 /**
  * Represents a notification.
  */
@@ -18,15 +55,15 @@ export declare class Toast extends HTMLElement {
      */
     get autoHide(): boolean;
     set autoHide(value: boolean);
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value: DocumentFragment);
     /**
      * The title displayed in the header.
      */
     get caption(): string;
     set caption(value: string);
-    /**
-     * The child content displayed in the body.
-     */
-    set childContent(value: DocumentFragment);
     /**
      * A contextual modifier.
      */
@@ -49,8 +86,8 @@ export declare class Toast extends HTMLElement {
     /**
      * The icon displayed next to the caption.
      */
-    get icon(): string;
-    set icon(value: string);
+    get icon(): string | null;
+    set icon(value: string | null);
     /**
      * Value indicating whether to initially show this toast.
      */
@@ -63,6 +100,10 @@ export declare class Toast extends HTMLElement {
      * @param newValue The new attribute value.
      */
     attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Closes this toast.
+     */
+    close(): void;
     /**
      * Method invoked when this component is connected.
      */
@@ -71,10 +112,6 @@ export declare class Toast extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
-    /**
-     * Hides this toast.
-     */
-    hide(): void;
     /**
      * Shows this toast.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAqD;IAkCvF;;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;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAoB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA2EZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAE9B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAC,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAkE;IAkCpG;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,MAAM,CAExB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAY/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CA+EZ;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

@@ -7,7 +7,7 @@ export class Toast extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["caption", "context", "culture", "icon", "open"];
+    static observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
     /**
      * The time units.
      */
@@ -41,10 +41,7 @@ export class Toast extends HTMLElement {
         return this.hasAttribute("animation");
     }
     set animation(value) {
-        if (value)
-            this.setAttribute("animation", "");
-        else
-            this.removeAttribute("animation");
+        this.toggleAttribute("animation", value);
     }
     /**
      * Value indicating whether to automatically hide this toast.
@@ -53,10 +50,13 @@ export class Toast extends HTMLElement {
         return this.hasAttribute("autohide");
     }
     set autoHide(value) {
-        if (value)
-            this.setAttribute("autohide", "");
-        else
-            this.removeAttribute("autohide");
+        this.toggleAttribute("autohide", value);
+    }
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value) {
+        this.querySelector(".toast-body").replaceChildren(...value.childNodes);
     }
     /**
      * The title displayed in the header.
@@ -67,12 +67,6 @@ 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.
      */
@@ -114,10 +108,10 @@ export class Toast extends HTMLElement {
      */
     get icon() {
         const value = this.getAttribute("icon") ?? "";
-        return value.trim() || getIcon(this.context);
+        return value.trim() || null;
     }
     set icon(value) {
-        this.setAttribute("icon", value);
+        this.toggleAttribute("icon", Boolean(value));
     }
     /**
      * Value indicating whether to initially show this toast.
@@ -126,10 +120,7 @@ export class Toast extends HTMLElement {
         return this.hasAttribute("open");
     }
     set open(value) {
-        if (value)
-            this.setAttribute("open", "");
-        else
-            this.removeAttribute("open");
+        this.toggleAttribute("open", value);
     }
     /**
      * Method invoked when an attribute has been changed.
@@ -140,6 +131,9 @@ export class Toast extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
+                case "animation":
+                    this.#updateAnimation(newValue != null);
+                    break;
                 case "caption":
                     this.#updateCaption(newValue ?? "");
                     break;
@@ -150,18 +144,25 @@ 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;
                 case "open":
-                    this.#updateVisibility();
+                    this.#updateVisibility(newValue != null);
+                    break;
                 // No default
             }
     }
+    /**
+     * Closes this toast.
+     */
+    close() {
+        this.#toast.hide();
+    }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        const toast = this.querySelector(".toast");
+        const toast = this.firstElementChild;
         toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
         toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
         const { animation, autoHide: autohide, delay } = this;
@@ -174,12 +175,6 @@ export class Toast extends HTMLElement {
         clearInterval(this.#timer);
         this.#toast.dispose();
     }
-    /**
-     * Hides this toast.
-     */
-    hide() {
-        this.#toast.hide();
-    }
     /**
      * Shows this toast.
      */
@@ -203,6 +198,13 @@ export class Toast extends HTMLElement {
         }
         return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
     }
+    /**
+     * Updates the toast animation.
+     * @param value The new value.
+     */
+    #updateAnimation(value) {
+        this.firstElementChild.classList.toggle("fade", value);
+    }
     /**
      * Updates the title displayed in the header.
      * @param value The new value.
@@ -211,7 +213,7 @@ export class Toast extends HTMLElement {
         this.querySelector(".toast-header b").textContent = value.trim();
     }
     /**
-     * Updates the title displayed in the header.
+     * Updates the contextual modifier.
      * @param value The new value.
      */
     #updateContext(value) {
@@ -235,19 +237,13 @@ export class Toast extends HTMLElement {
      * @param value The new value.
      */
     #updateIcon(value) {
-        this.querySelector(".toast-header .icon").textContent = value.trim() || getIcon(this.context);
+        this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || getIcon(this.context);
     }
     /**
      * Updates the toast visibility.
+     * @param value The new value.
      */
-    #updateVisibility() {
-        const { classList } = this.firstElementChild;
-        if (!this.open)
-            classList.remove("show");
-        else {
-            if (this.animation)
-                classList.add("fade");
-            classList.add("show");
-        }
+    #updateVisibility(value) {
+        this.firstElementChild.classList.toggle("show", value);
     }
 }