@cedx/base 0.20.0 → 0.21.1

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.20.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.21.1/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/{MessageBox.d.ts → DialogBox.d.ts}

@@ -1,14 +1,10 @@
-import { Context } from "../Context.js";
+import { type 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 transition.
-     */
-    animation?: boolean;
     /**
      * The child content displayed in the body.
      */
@@ -17,45 +13,24 @@ export interface IMessage {
      * 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;
-    /**
-     * 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.
+ * Displays a dialog box, which presents a message to the user.
  */
-export declare class MessageBox extends HTMLElement {
+export declare class DialogBox extends HTMLElement {
     #private;
     /**
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
     /**
-     * Creates a new message box.
+     * Creates a new dialog box.
      */
     constructor();
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation(): boolean;
-    set animation(value: boolean);
     /**
      * The child content displayed in the body.
      */
@@ -66,31 +41,26 @@ export declare class MessageBox extends HTMLElement {
     get caption(): string;
     set caption(value: string);
     /**
-     * Value indicating whether to vertically center this message box.
+     * Value indicating whether to vertically center this dialog box.
      */
     get centered(): boolean;
     set centered(value: boolean);
     /**
-     * A contextual modifier.
+     * Value indicating whether to apply a transition.
      */
-    get context(): Context;
-    set context(value: Context);
+    get fade(): boolean;
+    set fade(value: boolean);
     /**
      * 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.
+     * Value indicating whether to this dialog 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.
+     * Value indicating whether to initially show this component.
      */
     get open(): boolean;
     set open(value: boolean);
@@ -115,7 +85,7 @@ export declare class MessageBox extends HTMLElement {
      */
     alert(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult>;
     /**
-     * Closes this message box.
+     * Closes this dialog box.
      * @param result The dialog box result.
      */
     close(result?: DialogResult): void;
@@ -159,7 +129,7 @@ declare global {
      * The map of HTML tag names.
      */
     interface HTMLElementTagNameMap {
-        "message-box": MessageBox;
+        "dialog-box": DialogBox;
     }
 }
-//# sourceMappingURL=MessageBox.d.ts.map
+//# sourceMappingURL=DialogBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,EAAiB,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAGhD,OAAO,KAAK,EAAe,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,QAAQ;IAExB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0D;IAsB5F;;OAEG;;IAeH;;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,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAIjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAW/F;;;;;;OAMG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC;IAMvF;;;OAGG;IACH,KAAK,CAAC,MAAM,GAAE,YAAgC,GAAG,IAAI;IAKrD;;;;;;OAMG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC;IAOzF;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC;IAE/C;;;;;;;OAOG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,aAAa,EAAE,GAAG,OAAO,CAAC,YAAY,CAAC;CAkHjH;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/lib/UI/Components/{MessageBox.js → DialogBox.js}

@@ -1,15 +1,16 @@
 import { Modal } from "bootstrap";
-import { Context, getIcon, toCss } from "../Context.js";
+import { getIcon, toCss } from "../Context.js";
 import { DialogResult } from "../DialogResult.js";
+import { html } from "../Tag.js";
 import { Variant } from "../Variant.js";
 /**
- * Displays a message window, also known as dialog box, which presents a message to the user.
+ * Displays a dialog box, which presents a message to the user.
  */
-export class MessageBox extends HTMLElement {
+export class DialogBox extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+    static observedAttributes = ["caption", "centered", "fade", "modal", "scrollable"];
     /**
      * The template for a button.
      */
@@ -27,7 +28,7 @@ export class MessageBox extends HTMLElement {
      */
     #result = DialogResult.None;
     /**
-     * Creates a new message box.
+     * Creates a new dialog box.
      */
     constructor() {
         super();
@@ -40,22 +41,13 @@ export class MessageBox extends HTMLElement {
      * Registers the component.
      */
     static {
-        customElements.define("message-box", this);
-    }
-    /**
-     * Value indicating whether to apply a transition.
-     */
-    get animation() {
-        return this.hasAttribute("animation");
-    }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
+        customElements.define("dialog-box", this);
     }
     /**
      * The child content displayed in the body.
      */
     set body(value) {
-        this.querySelector(".modal-body > div").replaceChildren(...value.childNodes);
+        this.querySelector(".modal-body").replaceChildren(...value.childNodes);
     }
     /**
      * The title displayed in the header.
@@ -67,7 +59,7 @@ export class MessageBox extends HTMLElement {
         this.setAttribute("caption", value);
     }
     /**
-     * Value indicating whether to vertically center this message box.
+     * Value indicating whether to vertically center this dialog box.
      */
     get centered() {
         return this.hasAttribute("centered");
@@ -76,14 +68,13 @@ export class MessageBox extends HTMLElement {
         this.toggleAttribute("centered", value);
     }
     /**
-     * A contextual modifier.
+     * Value indicating whether to apply a transition.
      */
-    get context() {
-        const value = this.getAttribute("context");
-        return Object.values(Context).includes(value) ? value : Context.Info;
+    get fade() {
+        return this.hasAttribute("fade");
     }
-    set context(value) {
-        this.setAttribute("context", value);
+    set fade(value) {
+        this.toggleAttribute("fade", value);
     }
     /**
      * The child content displayed in the footer.
@@ -94,17 +85,7 @@ export class MessageBox extends HTMLElement {
         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.
+     * Value indicating whether to this dialog box will not close when clicking outside of it.
      */
     get modal() {
         return this.hasAttribute("modal");
@@ -113,7 +94,7 @@ export class MessageBox extends HTMLElement {
         this.toggleAttribute("modal", value);
     }
     /**
-     * Value indicating whether to initially show this message box.
+     * Value indicating whether to initially show this component.
      */
     get open() {
         return this.hasAttribute("open");
@@ -139,26 +120,20 @@ export class MessageBox extends HTMLElement {
     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 "fade":
+                    this.#updateFade(newValue != null);
+                    break;
                 case "scrollable":
-                    this.#updateScrolling(newValue != null);
+                    this.#updateScrollable(newValue != null);
                     break;
                 // No default
             }
@@ -170,13 +145,13 @@ export class MessageBox extends HTMLElement {
      * @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, [
+    alert(context, caption, body) {
+        return this.show(context, caption, this.#getBodyTemplate(context, body), [
             { label: "OK", value: DialogResult.OK, variant: Variant.Primary }
         ]);
     }
     /**
-     * Closes this message box.
+     * Closes this dialog box.
      * @param result The dialog box result.
      */
     close(result = DialogResult.None) {
@@ -190,8 +165,8 @@ export class MessageBox extends HTMLElement {
      * @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, [
+    confirm(context, caption, body) {
+        return this.show(context, caption, this.#getBodyTemplate(context, body), [
             { label: "OK", value: DialogResult.OK, variant: Variant.Primary },
             { label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary }
         ]);
@@ -222,16 +197,14 @@ export class MessageBox extends HTMLElement {
         if (typeof message == "string") {
             const footer = document.createDocumentFragment();
             footer.append(...buttons.map(button => this.#createButton(button)));
-            message = { context: message, caption, body, footer };
+            message = { body, caption, footer };
         }
-        if (typeof message == "object" && message) {
-            this.body = message.body;
-            this.caption = message.caption;
-            this.context = message.context ?? Context.Info;
-            this.icon = message.icon ?? getIcon(this.context);
+        if (message) {
             const footer = message.footer ?? document.createDocumentFragment();
             for (const button of footer.querySelectorAll("button"))
                 button.addEventListener("click", this.#close);
+            this.body = message.body;
+            this.caption = message.caption;
             this.footer = footer;
         }
         const { promise, resolve } = Promise.withResolvers();
@@ -241,7 +214,7 @@ export class MessageBox extends HTMLElement {
         return promise;
     }
     /**
-     * Closes this message box.
+     * Closes this dialog box.
      * @param event The dispatched event.
      */
     #close = event => {
@@ -266,11 +239,18 @@ export class MessageBox extends HTMLElement {
         return element;
     }
     /**
-     * Updates the message box animation.
-     * @param value The new value.
+     * Gets the body template corresponding to the specified context and message.
+     * @param context The contextual modifier.
+     * @param message The child content displayed in the body.
+     * @returns The body template corresponding to the specified context and message.
      */
-    #updateAnimation(value) {
-        this.firstElementChild.classList.toggle("fade", value);
+    #getBodyTemplate(context, message) {
+        return html `
+			<div class="d-flex gap-2">
+				<i class="icon icon-fill fs-1 text-${toCss(context)}"> ${getIcon(context)}</i>
+				<div class="flex-grow-1">${message}</div>
+			</div>
+		`;
     }
     /**
      * Updates the title displayed in the header.
@@ -280,40 +260,31 @@ export class MessageBox extends HTMLElement {
         this.querySelector(".modal-title").textContent = value.trim();
     }
     /**
-     * Updates the value indicating whether to vertically center this message box.
+     * Updates the value indicating whether to vertically center this dialog 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.
+     * Updates the value indicating whether to apply a transition.
      * @param value The new value.
      */
-    #updateIcon(value) {
-        this.querySelector(".modal-body > .icon").textContent = (value ?? "").trim() || getIcon(this.context);
+    #updateFade(value) {
+        this.firstElementChild.classList.toggle("fade", value);
     }
     /**
-     * Updates the value indicating whether to this message box will not close when clicking outside of it.
+     * Updates the value indicating whether to this dialog 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.
+     * Updates the value indicating whether the body is scrollable.
      * @param value The new value.
      */
-    #updateScrolling(value) {
+    #updateScrollable(value) {
         this.querySelector(".modal-dialog").classList.toggle("modal-dialog-scrollable", value);
     }
 }

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

@@ -10,8 +10,13 @@ export declare class LoadingIndicator extends HTMLElement {
     /**
      * Value indicating whether to apply a transition.
      */
-    get animation(): boolean;
-    set animation(value: boolean);
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
     /**
      * Method invoked when an attribute has been changed.
      * @param attribute The attribute name.
@@ -20,14 +25,18 @@ export declare class LoadingIndicator extends HTMLElement {
      */
     attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
     /**
-     * Hides the loading indicator.
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Hides this loading indicator.
      * @param options Value indicating whether to force the loading indicator to hide.
      */
     hide(options?: {
         force?: boolean;
     }): void;
     /**
-     * Shows the loading indicator.
+     * Shows this loading indicator.
      */
     show(): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/LoadingIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAiB;IAcnD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;IAU3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAcZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}
+{"version":3,"file":"LoadingIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/LoadingIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAY;IAc9C;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;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;IAO/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;IAU3C;;OAEG;IACH,IAAI,IAAI,IAAI;CAcZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/Components/LoadingIndicator.js

@@ -5,7 +5,7 @@ export class LoadingIndicator extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation"];
+    static observedAttributes = ["fade"];
     /**
      * The number of concurrent HTTP requests.
      */
@@ -19,11 +19,20 @@ export class LoadingIndicator extends HTMLElement {
     /**
      * Value indicating whether to apply a transition.
      */
-    get animation() {
-        return this.hasAttribute("animation");
+    get fade() {
+        return this.hasAttribute("fade");
     }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", value);
     }
     /**
      * Method invoked when an attribute has been changed.
@@ -34,14 +43,21 @@ export class LoadingIndicator extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
-                case "animation":
-                    this.#updateAnimation(newValue != null);
+                case "fade":
+                    this.#updateFade(newValue != null);
                     break;
                 // No default
             }
     }
     /**
-     * Hides the loading indicator.
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        if (this.open)
+            this.show();
+    }
+    /**
+     * Hides this loading indicator.
      * @param options Value indicating whether to force the loading indicator to hide.
      */
     hide(options = {}) {
@@ -54,7 +70,7 @@ export class LoadingIndicator extends HTMLElement {
         }
     }
     /**
-     * Shows the loading indicator.
+     * Shows this loading indicator.
      */
     show() {
         this.#requestCount++;
@@ -66,7 +82,7 @@ export class LoadingIndicator extends HTMLElement {
      * Updates the value indicating whether to apply a transition.
      * @param value The new value.
      */
-    #updateAnimation(value) {
+    #updateFade(value) {
         this.classList.toggle("fade", value);
     }
 }

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

@@ -10,8 +10,13 @@ export declare class OfflineIndicator extends HTMLElement {
     /**
      * Value indicating whether to apply a transition.
      */
-    get animation(): boolean;
-    set animation(value: boolean);
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
     /**
      * Method invoked when an attribute has been changed.
      * @param attribute The attribute name.
@@ -27,6 +32,14 @@ export declare class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
+    /**
+     * Hides this offline indicator.
+     */
+    hide(): void;
+    /**
+     * Shows this offline indicator.
+     */
+    show(): void;
 }
 /**
  * Declaration merging.

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;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAiB;IASnD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAO/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAmB5B;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;;IAEhD;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAY;IAS9C;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;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;IAO/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAoBZ;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

@@ -5,7 +5,7 @@ export class OfflineIndicator extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation"];
+    static observedAttributes = ["fade"];
     /**
      * Registers the component.
      */
@@ -15,11 +15,20 @@ export class OfflineIndicator extends HTMLElement {
     /**
      * Value indicating whether to apply a transition.
      */
-    get animation() {
-        return this.hasAttribute("animation");
+    get fade() {
+        return this.hasAttribute("fade");
     }
-    set animation(value) {
-        this.toggleAttribute("animation", value);
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", value);
     }
     /**
      * Method invoked when an attribute has been changed.
@@ -30,8 +39,8 @@ export class OfflineIndicator extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
-                case "animation":
-                    this.#updateAnimation(newValue != null);
+                case "fade":
+                    this.#updateFade(newValue != null);
                     break;
                 // No default
             }
@@ -40,29 +49,48 @@ export class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        this.#update();
         for (const event of ["online", "offline"])
-            addEventListener(event, this.#update);
+            addEventListener(event, this.#updateVisibility);
+        if (this.open)
+            this.show();
+        else
+            this.#updateVisibility();
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         for (const event of ["online", "offline"])
-            removeEventListener(event, this.#update);
+            removeEventListener(event, this.#updateVisibility);
+    }
+    /**
+     * Hides this offline indicator.
+     */
+    hide() {
+        this.classList.remove("show");
+        this.classList.add("hide");
+    }
+    /**
+     * Shows this offline indicator.
+     */
+    show() {
+        this.classList.remove("hide");
+        this.classList.add("show");
     }
     /**
      * Updates the value indicating whether to apply a transition.
      * @param value The new value.
      */
-    #updateAnimation(value) {
+    #updateFade(value) {
         this.classList.toggle("fade", value);
     }
     /**
-     * Updates this component.
+     * Updates the visibility of this component.
      */
-    #update = () => {
-        this.classList.toggle("hide", navigator.onLine);
-        this.classList.toggle("show", !navigator.onLine);
+    #updateVisibility = () => {
+        if (navigator.onLine)
+            this.hide();
+        else
+            this.show();
     };
 }