@cedx/base 0.17.0 → 0.18.0

package/ReadMe.md

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

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

@@ -1 +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"}
+{"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,EAG9B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;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,EAG9B;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

@@ -23,7 +23,10 @@ export class DialogButton extends HTMLElement {
         return Object.values(Context).includes(value) ? value : null;
     }
     set context(value) {
-        this.toggleAttribute("context", Boolean(value));
+        if (value)
+            this.setAttribute("context", value);
+        else
+            this.removeAttribute("context");
     }
     /**
      * The button icon.
@@ -33,7 +36,10 @@ export class DialogButton extends HTMLElement {
         return value.trim() || null;
     }
     set icon(value) {
-        this.toggleAttribute("icon", Boolean(value));
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
     }
     /**
      * The button label.
@@ -62,7 +68,10 @@ export class DialogButton extends HTMLElement {
         return Object.values(Variant).includes(value) ? value : null;
     }
     set variant(value) {
-        this.toggleAttribute("context", Boolean(value));
+        if (value)
+            this.setAttribute("variant", value);
+        else
+            this.removeAttribute("variant");
     }
     /**
      * Method invoked when an attribute has been changed.

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

@@ -0,0 +1,165 @@
+import { Context } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import type { IDialogButton } from "./DialogButton.js";
+/**
+ * Represents a message to display in a dialog box.
+ */
+export interface IMessage {
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    animation?: boolean;
+    /**
+     * The child content displayed in the body.
+     */
+    body: DocumentFragment | string;
+    /**
+     * The title displayed in the header.
+     */
+    caption: string;
+    /**
+     * Value indicating whether to vertically center this message box.
+     */
+    centered?: boolean;
+    /**
+     * A contextual modifier.
+     */
+    context?: Context;
+    /**
+     * The child content displayed in the footer.
+     */
+    footer?: DocumentFragment | string;
+    /**
+     * The icon displayed next to the body.
+     */
+    icon?: string | null;
+    /**
+     * Value indicating whether the body is scrollable.
+     */
+    scrollable?: boolean;
+}
+/**
+ * Displays a message window, also known as dialog box, which presents a message to the user.
+ */
+export declare class MessageBox extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Creates a new message box.
+     */
+    constructor();
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation(): boolean;
+    set animation(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);
+    /**
+     * Value indicating whether to vertically center this message box.
+     */
+    get centered(): boolean;
+    set centered(value: boolean);
+    /**
+     * A contextual modifier.
+     */
+    get context(): Context;
+    set context(value: Context);
+    /**
+     * The child content displayed in the footer.
+     */
+    set footer(value: DocumentFragment);
+    /**
+     * The icon displayed next to the body.
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    /**
+     * Value indicating whether to this message box will not close when clicking outside of it.
+     */
+    get modal(): boolean;
+    set modal(value: boolean);
+    /**
+     * Value indicating whether to initially show this message box.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * Value indicating whether the body is scrollable.
+     */
+    get scrollable(): boolean;
+    set scrollable(value: boolean);
+    /**
+     * Method invoked when an attribute has been changed.
+     * @param attribute The attribute name.
+     * @param oldValue The previous attribute value.
+     * @param newValue The new attribute value.
+     */
+    attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Shows an alert message with an "OK" button.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @returns The dialog box result.
+     */
+    alert(context: Context, caption: string, body: DocumentFragment | string): Promise<DialogResult>;
+    /**
+     * Closes this message box.
+     * @param result The dialog box result.
+     */
+    close(result?: DialogResult): void;
+    /**
+     * Shows a confirmation message with two buttons, "OK" and "Cancel".
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @returns The dialog box result.
+     */
+    confirm(context: Context, caption: string, body: DocumentFragment | string): Promise<DialogResult>;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Shows a message.
+     * @param message The message to show.
+     * @returns The dialog box result.
+     */
+    show(message?: IMessage): Promise<DialogResult>;
+    /**
+     * Shows a message.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog box result.
+     */
+    show(context: Context, caption: string, body: DocumentFragment | string, buttons?: IDialogButton[]): Promise<DialogResult>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "message-box": MessageBox;
+    }
+}
+//# sourceMappingURL=MessageBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MessageBox.ts"],"names":[],"mappings":"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"}

package/lib/UI/Components/MessageBox.js

@@ -0,0 +1,320 @@
+import { Modal } from "bootstrap";
+import { Context, getIcon, toCss } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { createDocumentFragment } from "../ElementExtensions.js";
+import { Variant } from "../Variant.js";
+/**
+ * Displays a message window, also known as dialog box, which presents a message to the user.
+ */
+export class MessageBox extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+    /**
+     * The template for a button.
+     */
+    #buttonTemplate = this.querySelector("template").content;
+    /**
+     * The underlying Bootstrap modal.
+     */
+    #modal;
+    /**
+     * The function invoked to return the dialog box result.
+     */
+    #resolve = () => { };
+    /**
+     * The dialog result.
+     */
+    #result = DialogResult.None;
+    /**
+     * Creates a new message box.
+     */
+    constructor() {
+        super();
+        this.firstElementChild.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
+        this.querySelector(".btn-close").addEventListener("click", this.#close);
+        for (const button of this.querySelectorAll(".modal-footer button"))
+            button.addEventListener("click", this.#close);
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("message-box", this);
+    }
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation() {
+        return this.hasAttribute("animation");
+    }
+    set animation(value) {
+        this.toggleAttribute("animation", value);
+    }
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value) {
+        this.querySelector(".modal-body > div").replaceChildren(...value.childNodes);
+    }
+    /**
+     * The title displayed in the header.
+     */
+    get caption() {
+        return (this.getAttribute("caption") ?? "").trim();
+    }
+    set caption(value) {
+        this.setAttribute("caption", value);
+    }
+    /**
+     * Value indicating whether to vertically center this message box.
+     */
+    get centered() {
+        return this.hasAttribute("centered");
+    }
+    set centered(value) {
+        this.toggleAttribute("centered", 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 child content displayed in the footer.
+     */
+    set footer(value) {
+        const footer = this.querySelector(".modal-footer");
+        footer.hidden = !value.hasChildNodes();
+        footer.replaceChildren(...value.childNodes);
+    }
+    /**
+     * The icon displayed next to the body.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
+    }
+    set icon(value) {
+        this.toggleAttribute("icon", Boolean(value));
+    }
+    /**
+     * Value indicating whether to this message box will not close when clicking outside of it.
+     */
+    get modal() {
+        return this.hasAttribute("modal");
+    }
+    set modal(value) {
+        this.toggleAttribute("modal", value);
+    }
+    /**
+     * Value indicating whether to initially show this message box.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", value);
+    }
+    /**
+     * Value indicating whether the body is scrollable.
+     */
+    get scrollable() {
+        return this.hasAttribute("scrollable");
+    }
+    set scrollable(value) {
+        this.toggleAttribute("scrollable", 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 "animation":
+                    this.#updateAnimation(newValue != null);
+                    break;
+                case "caption":
+                    this.#updateCaption(newValue ?? "");
+                    break;
+                case "centered":
+                    this.#updateCentered(newValue != null);
+                    break;
+                case "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : Context.Info);
+                    break;
+                case "icon":
+                    this.#updateIcon(newValue);
+                    break;
+                case "modal":
+                    this.#updateModal(newValue != null);
+                    break;
+                case "scrollable":
+                    this.#updateScrolling(newValue != null);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Shows an alert message with an "OK" button.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @returns The dialog box result.
+     */
+    async alert(context, caption, body) {
+        return await this.show(context, caption, body, [
+            { label: "OK", value: DialogResult.OK, variant: Variant.Primary }
+        ]);
+    }
+    /**
+     * Closes this message box.
+     * @param result The dialog box result.
+     */
+    close(result = DialogResult.None) {
+        this.#result = result;
+        this.#modal.hide();
+    }
+    /**
+     * Shows a confirmation message with two buttons, "OK" and "Cancel".
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @returns The dialog box result.
+     */
+    async confirm(context, caption, body) {
+        return await this.show(context, caption, body, [
+            { label: "OK", value: DialogResult.OK, variant: Variant.Primary },
+            { label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary }
+        ]);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        this.#modal = new Modal(this.firstElementChild);
+        if (this.open)
+            void this.show();
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        this.#modal.dispose();
+    }
+    /**
+     * Shows a message.
+     * @param message The message to show, or the contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param body The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog box result.
+     */
+    show(message = null, caption = "", body = "", buttons = []) {
+        if (typeof message == "string") {
+            const footer = document.createDocumentFragment();
+            footer.append(...buttons.map(button => this.#createButton(button)));
+            message = { context: message, caption, body, footer };
+        }
+        if (typeof message == "object" && message) {
+            this.body = typeof message.body == "string" ? createDocumentFragment(message.body) : message.body;
+            this.caption = message.caption;
+            this.context = message.context ?? Context.Info;
+            this.icon = message.icon ?? getIcon(this.context);
+            const footer = typeof message.footer == "string" ? createDocumentFragment(message.footer) : (message.footer ?? document.createDocumentFragment());
+            for (const button of footer.querySelectorAll("button"))
+                button.addEventListener("click", this.#close);
+            this.footer = footer;
+        }
+        const { promise, resolve } = Promise.withResolvers();
+        this.#resolve = resolve;
+        this.#result = DialogResult.None;
+        this.#modal.show();
+        return promise;
+    }
+    /**
+     * Closes this message box.
+     * @param event The dispatched event.
+     */
+    #close = event => {
+        const button = event.target.closest("button");
+        this.close(Object.values(DialogResult).includes(button.value) ? button.value : DialogResult.None);
+    };
+    /**
+     * Creates the component instance corresponding to the specified button.
+     * @param button An object describing the appearance of the button.
+     * @returns The component instance corresponding to the specified button.
+     */
+    #createButton(button) {
+        const element = document.createElement("dialog-button");
+        const childContent = this.#buttonTemplate.cloneNode(true).querySelector("button");
+        childContent.addEventListener("click", this.#close);
+        element.appendChild(childContent);
+        element.context = button.context ?? null;
+        element.icon = button.icon ?? null;
+        element.label = button.label ?? "";
+        element.value = button.value ?? DialogResult.None;
+        element.variant = button.variant ?? null;
+        return element;
+    }
+    /**
+     * Updates the message box 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.
+     */
+    #updateCaption(value) {
+        this.querySelector(".modal-title").textContent = value.trim();
+    }
+    /**
+     * Updates the value indicating whether to vertically center this message box.
+     * @param value The new value.
+     */
+    #updateCentered(value) {
+        this.querySelector(".modal-dialog").classList.toggle("modal-dialog-centered", value);
+    }
+    /**
+     * Updates the contextual modifier.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const { classList } = this.querySelector(".modal-body > .icon");
+        classList.remove(...Object.values(Context).map(context => `text-${toCss(context)}`));
+        classList.add(`text-${toCss(value)}`);
+    }
+    /**
+     * Updates the icon displayed next to the body.
+     * @param value The new value.
+     */
+    #updateIcon(value) {
+        this.querySelector(".modal-body > .icon").textContent = (value ?? "").trim() || getIcon(this.context);
+    }
+    /**
+     * Updates the value indicating whether to this message box will not close when clicking outside of it.
+     * @param value The new value.
+     */
+    #updateModal(value) {
+        this.firstElementChild.dataset.bsBackdrop = value ? "static" : "true";
+    }
+    /**
+     * Updates the body scrolling.
+     * @param value The new value.
+     */
+    #updateScrolling(value) {
+        this.querySelector(".modal-dialog").classList.toggle("modal-dialog-scrollable", value);
+    }
+}

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,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"}
+{"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;IAS/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/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,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"}
+{"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,WAA+E;IAkCjH;;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,EAG1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwFZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}

package/lib/UI/Components/Toast.js

@@ -7,7 +7,7 @@ export class Toast extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
+    static observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
     /**
      * The time units.
      */
@@ -111,7 +111,10 @@ export class Toast extends HTMLElement {
         return value.trim() || null;
     }
     set icon(value) {
-        this.toggleAttribute("icon", Boolean(value));
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
     }
     /**
      * Value indicating whether to initially show this toast.
@@ -134,6 +137,9 @@ export class Toast extends HTMLElement {
                 case "animation":
                     this.#updateAnimation(newValue != null);
                     break;
+                case "autohide":
+                    this.#updateAutoHide(newValue != null);
+                    break;
                 case "caption":
                     this.#updateCaption(newValue ?? "");
                     break;
@@ -143,12 +149,12 @@ export class Toast extends HTMLElement {
                 case "culture":
                     this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, { style: "long" });
                     break;
+                case "delay":
+                    this.#updateDelay(Number(newValue));
+                    break;
                 case "icon":
                     this.#updateIcon(newValue);
                     break;
-                case "open":
-                    this.#updateVisibility(newValue != null);
-                    break;
                 // No default
             }
     }
@@ -165,8 +171,9 @@ export class Toast extends HTMLElement {
         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;
-        this.#toast = new BootstrapToast(toast, { animation, autohide, delay });
+        this.#toast = new BootstrapToast(toast);
+        if (this.open)
+            this.show();
     }
     /**
      * Method invoked when this component is disconnected.
@@ -199,11 +206,18 @@ export class Toast extends HTMLElement {
         return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
     }
     /**
-     * Updates the toast animation.
+     * Updates the value indicating whether to apply a fade transition.
      * @param value The new value.
      */
     #updateAnimation(value) {
-        this.firstElementChild.classList.toggle("fade", value);
+        this.firstElementChild.dataset.bsAnimation = value ? "true" : "false";
+    }
+    /**
+     * Updates the value indicating whether to automatically hide this toast.
+     * @param value The new value.
+     */
+    #updateAutoHide(value) {
+        this.firstElementChild.dataset.bsAutohide = value ? "true" : "false";
     }
     /**
      * Updates the title displayed in the header.
@@ -225,6 +239,14 @@ export class Toast extends HTMLElement {
         classList.remove(...contexts.map(context => `text-${toCss(context)}`));
         classList.add(`text-${toCss(value)}`);
     }
+    /**
+     * Updates the delay to hide the toast.
+     * @param value The new value.
+     */
+    #updateDelay(value) {
+        const delay = Math.max(0, Number.isNaN(value) ? 5_000 : value);
+        this.firstElementChild.dataset.bsDelay = delay.toString();
+    }
     /**
      * Updates the label corresponding to the elapsed time.
      */
@@ -239,11 +261,4 @@ export class Toast extends HTMLElement {
     #updateIcon(value) {
         this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || getIcon(this.context);
     }
-    /**
-     * Updates the toast visibility.
-     * @param value The new value.
-     */
-    #updateVisibility(value) {
-        this.firstElementChild.classList.toggle("show", value);
-    }
 }