@cedx/base 0.8.0 → 0.9.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.8.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.9.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/LoadingIndicator.d.ts

@@ -3,6 +3,14 @@
  */
 export declare class LoadingIndicator extends HTMLElement {
     #private;
+    /**
+     * Hides this component.
+     */
+    hide(): void;
+    /**
+     * Shows this component.
+     */
+    show(): void;
     /**
      * Starts the loading indicator.
      */

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;;IAchD;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;CAQ3C;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;;IAchD;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,KAAK,IAAI,IAAI;IAKb;;;OAGG;IACH,IAAI,CAAC,OAAO,GAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAM,GAAG,IAAI;CAO3C;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

@@ -12,13 +12,26 @@ export class LoadingIndicator extends HTMLElement {
     static {
         customElements.define("loading-indicator", this);
     }
+    /**
+     * Hides this component.
+     */
+    hide() {
+        this.hidden = true;
+        document.body.classList.remove("loading");
+    }
+    /**
+     * Shows this component.
+     */
+    show() {
+        this.hidden = false;
+        document.body.classList.add("loading");
+    }
     /**
      * Starts the loading indicator.
      */
     start() {
         this.#requestCount++;
-        this.hidden = false;
-        document.body.classList.add("loading");
+        this.show();
     }
     /**
      * Stops the loading indicator.
@@ -28,8 +41,7 @@ export class LoadingIndicator extends HTMLElement {
         this.#requestCount--;
         if (options.force || this.#requestCount <= 0) {
             this.#requestCount = 0;
-            this.hidden = true;
-            document.body.classList.remove("loading");
+            this.hide();
         }
     }
 }

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

@@ -2,6 +2,7 @@
  * A component that shows up when the network is unavailable, and hides when connectivity is restored.
  */
 export declare class OfflineIndicator extends HTMLElement {
+    #private;
     /**
      * Creates a new offline indicator.
      */
@@ -15,9 +16,13 @@ export declare class OfflineIndicator extends HTMLElement {
      */
     disconnectedCallback(): void;
     /**
-     * Handles the events.
+     * Hides this component.
      */
-    handleEvent(): void;
+    hide(): void;
+    /**
+     * Shows this component.
+     */
+    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;;IAaH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CAGnB;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;;IAaH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CASZ;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

@@ -7,7 +7,7 @@ export class OfflineIndicator extends HTMLElement {
      */
     constructor() {
         super();
-        this.hidden = navigator.onLine;
+        this.#updateHiddenState();
     }
     /**
      * Registers the component.
@@ -20,19 +20,29 @@ export class OfflineIndicator extends HTMLElement {
      */
     connectedCallback() {
         for (const event of ["online", "offline"])
-            addEventListener(event, this);
+            addEventListener(event, this.#updateHiddenState);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         for (const event of ["online", "offline"])
-            removeEventListener(event, this);
+            removeEventListener(event, this.#updateHiddenState);
     }
     /**
-     * Handles the events.
+     * Hides this component.
      */
-    handleEvent() {
-        this.hidden = navigator.onLine;
+    hide() {
+        this.hidden = true;
     }
+    /**
+     * Shows this component.
+     */
+    show() {
+        this.hidden = false;
+    }
+    /**
+     * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+     */
+    #updateHiddenState = () => this.hidden = navigator.onLine;
 }

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

@@ -0,0 +1,45 @@
+import { StorageArea } from "../StorageArea.js";
+/**
+ * A component that activates a tab, based on its index saved in the web storage.
+ */
+export declare class TabActivator extends HTMLElement {
+    /**
+     * The one-based index of the active tab.
+     */
+    get activeTabIndex(): number;
+    set activeTabIndex(value: number);
+    /**
+     * The storage object corresponding to the current {@link storageArea}.
+     */
+    get storage(): globalThis.Storage;
+    /**
+     * The storage area to use.
+     */
+    get storageArea(): StorageArea;
+    set storageArea(value: StorageArea);
+    /**
+     * The key of the storage entry providing the active tab index.
+     */
+    get storageKey(): string;
+    set storageKey(value: string);
+    /**
+     * The tab list.
+     */
+    get tabs(): NodeListOf<HTMLButtonElement>;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "tab-activator": TabActivator;
+    }
+}
+//# sourceMappingURL=TabActivator.d.ts.map

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

@@ -0,0 +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"}

package/lib/UI/Components/TabActivator.js

@@ -0,0 +1,67 @@
+import { Tab } from "bootstrap";
+import { StorageArea } from "../StorageArea.js";
+/**
+ * A component that activates a tab, based on its index saved in the web storage.
+ */
+export class TabActivator extends HTMLElement {
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("tab-activator", this);
+    }
+    /**
+     * The one-based index of the active tab.
+     */
+    get activeTabIndex() {
+        const index = Number.parseInt(this.storage.getItem(this.storageKey) ?? "1");
+        return Math.max(1, Math.min(this.tabs.length, Number.isNaN(index) ? 1 : index));
+    }
+    set activeTabIndex(value) {
+        this.storage.setItem(this.storageKey, value.toString());
+    }
+    /**
+     * The storage object corresponding to the current {@link storageArea}.
+     */
+    get storage() {
+        return this.storageArea == StorageArea.Local ? localStorage : sessionStorage;
+    }
+    /**
+     * The storage area to use.
+     */
+    get storageArea() {
+        const value = this.getAttribute("storagearea");
+        return Object.values(StorageArea).includes(value) ? value : StorageArea.Session;
+    }
+    set storageArea(value) {
+        this.setAttribute("storagearea", value);
+    }
+    /**
+     * The key of the storage entry providing the active tab index.
+     */
+    get storageKey() {
+        const value = this.getAttribute("storagekey") ?? "";
+        return value.trim() || "ActiveTabIndex";
+    }
+    set storageKey(value) {
+        this.setAttribute("storagekey", value);
+    }
+    /**
+     * The tab list.
+     */
+    get tabs() {
+        return this.querySelectorAll(".nav-tabs button");
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        const { activeTabIndex, tabs } = this;
+        for (let index = 1; index <= tabs.length; index++) {
+            const tab = tabs.item(index - 1);
+            tab.addEventListener("click", () => this.activeTabIndex = index);
+            if (index == activeTabIndex)
+                Tab.getOrCreateInstance(tab).show();
+        }
+    }
+}

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

@@ -9,10 +9,6 @@ export declare class ThemeDropdown extends HTMLElement {
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
-    /**
-     * Creates a new theme dropdown.
-     */
-    constructor();
     /**
      * The alignment of the dropdown menu.
      */
@@ -48,10 +44,6 @@ export declare class ThemeDropdown extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
-    /**
-     * Handles the events.
-     */
-    handleEvent(): 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;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CAsBnB;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":"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;IAcxE;;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;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B;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

@@ -12,14 +12,6 @@ export class ThemeDropdown extends HTMLElement {
      * The media query used to check the application theme.
      */
     #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
-    /**
-     * Creates a new theme dropdown.
-     */
-    constructor() {
-        super();
-        for (const button of this.querySelectorAll("button"))
-            button.addEventListener("click", this.#setTheme.bind(this));
-    }
     /**
      * Registers the component.
      */
@@ -103,7 +95,9 @@ export class ThemeDropdown extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        this.#mediaQuery.addEventListener("change", this);
+        for (const button of this.querySelectorAll("button"))
+            button.addEventListener("click", this.#setTheme);
+        this.#mediaQuery.addEventListener("change", this.#applyTheme);
         const appTheme = localStorage.getItem(this.storageKey);
         if (appTheme)
             this.setAttribute("apptheme", appTheme);
@@ -112,29 +106,25 @@ export class ThemeDropdown extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        this.#mediaQuery.removeEventListener("change", this);
-    }
-    /**
-     * Handles the events.
-     */
-    handleEvent() {
-        this.#applyTheme();
+        for (const button of this.querySelectorAll("button"))
+            button.removeEventListener("click", this.#setTheme);
+        this.#mediaQuery.removeEventListener("change", this.#applyTheme);
     }
     /**
      * Applies the application theme to the document.
      */
-    #applyTheme() {
+    #applyTheme = () => {
         const { appTheme } = this;
         const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
         document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
-    }
+    };
     /**
      * Changes the current application theme.
      * @param event The dispatched event.
      */
-    #setTheme(event) {
+    #setTheme = event => {
         event.preventDefault();
         const button = event.target.closest("button");
         this.appTheme = button.dataset.theme;
-    }
+    };
 }

package/lib/UI/StorageArea.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Identifies the web storage area.
+ */
+export declare const StorageArea: Readonly<{
+    /**
+     * Indicates the local storage.
+     */
+    Local: "Local";
+    /**
+     * Indicates the session storage.
+     */
+    Session: "Session";
+}>;
+/**
+ * Identifies the web storage area.
+ */
+export type StorageArea = typeof StorageArea[keyof typeof StorageArea];
+//# sourceMappingURL=StorageArea.d.ts.map

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

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

package/lib/UI/StorageArea.js

@@ -0,0 +1,13 @@
+/**
+ * Identifies the web storage area.
+ */
+export const StorageArea = Object.freeze({
+    /**
+     * Indicates the local storage.
+     */
+    Local: "Local",
+    /**
+     * Indicates the session storage.
+     */
+    Session: "Session"
+});

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.54.2",
 		"@types/bootstrap": "^5.2.10",

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

@@ -15,13 +15,28 @@ export class LoadingIndicator extends HTMLElement {
 		customElements.define("loading-indicator", this);
 	}
 
+	/**
+	 * Hides this component.
+	 */
+	hide(): void {
+		this.hidden = true;
+		document.body.classList.remove("loading");
+	}
+
+	/**
+	 * Shows this component.
+	 */
+	show(): void {
+		this.hidden = false;
+		document.body.classList.add("loading");
+	}
+
 	/**
 	 * Starts the loading indicator.
 	 */
 	start(): void {
 		this.#requestCount++;
-		this.hidden = false;
-		document.body.classList.add("loading");
+		this.show();
 	}
 
 	/**
@@ -32,8 +47,7 @@ export class LoadingIndicator extends HTMLElement {
 		this.#requestCount--;
 		if (options.force || this.#requestCount <= 0) {
 			this.#requestCount = 0;
-			this.hidden = true;
-			document.body.classList.remove("loading");
+			this.hide();
 		}
 	}
 }

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

@@ -8,7 +8,7 @@ export class OfflineIndicator extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.hidden = navigator.onLine;
+		this.#updateHiddenState();
 	}
 
 	/**
@@ -22,22 +22,35 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const event of ["online", "offline"]) addEventListener(event, this);
+		for (const event of ["online", "offline"]) addEventListener(event, this.#updateHiddenState);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this);
+		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateHiddenState);
 	}
 
 	/**
-	 * Handles the events.
+	 * Hides this component.
 	 */
-	handleEvent(): void {
-		this.hidden = navigator.onLine;
+	hide(): void {
+		this.hidden = true;
+	}
+
+	/**
+	 * Shows this component.
+	 */
+	show(): void {
+		this.hidden = false;
 	}
+
+	/**
+	 * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+	 */
+	readonly #updateHiddenState: () => void = () =>
+		this.hidden = navigator.onLine;
 }
 
 /**

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

@@ -0,0 +1,87 @@
+import {Tab} from "bootstrap";
+import {StorageArea} from "../StorageArea.js";
+
+/**
+ * A component that activates a tab, based on its index saved in the web storage.
+ */
+export class TabActivator extends HTMLElement {
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("tab-activator", this);
+	}
+
+	/**
+	 * The one-based index of the active tab.
+	 */
+	get activeTabIndex(): number {
+		const index = Number.parseInt(this.storage.getItem(this.storageKey) ?? "1");
+		return Math.max(1, Math.min(this.tabs.length, Number.isNaN(index) ? 1 : index));
+	}
+	set activeTabIndex(value: number) {
+		this.storage.setItem(this.storageKey, value.toString());
+	}
+
+	/**
+	 * The storage object corresponding to the current {@link storageArea}.
+	 */
+	get storage(): globalThis.Storage {
+		return this.storageArea == StorageArea.Local ? localStorage : sessionStorage;
+	}
+
+	/**
+	 * The storage area to use.
+	 */
+	get storageArea(): StorageArea {
+		const value = this.getAttribute("storagearea") as StorageArea;
+		return Object.values(StorageArea).includes(value) ? value : StorageArea.Session;
+	}
+	set storageArea(value: StorageArea) {
+		this.setAttribute("storagearea", value);
+	}
+
+	/**
+	 * The key of the storage entry providing the active tab index.
+	 */
+	get storageKey(): string {
+		const value = this.getAttribute("storagekey") ?? "";
+		return value.trim() || "ActiveTabIndex";
+	}
+	set storageKey(value: string) {
+		this.setAttribute("storagekey", value);
+	}
+
+	/**
+	 * The tab list.
+	 */
+	get tabs(): NodeListOf<HTMLButtonElement> {
+		return this.querySelectorAll(".nav-tabs button");
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		const {activeTabIndex, tabs} = this;
+		for (let index = 1; index <= tabs.length; index++) {
+			const tab = tabs.item(index - 1);
+			tab.addEventListener("click", () => this.activeTabIndex = index);
+			if (index == activeTabIndex) Tab.getOrCreateInstance(tab).show();
+		}
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"tab-activator": TabActivator;
+	}
+}

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

@@ -16,14 +16,6 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 
-	/**
-	 * Creates a new theme dropdown.
-	 */
-	constructor() {
-		super();
-		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme.bind(this));
-	}
-
 	/**
 	 * Registers the component.
 	 */
@@ -110,7 +102,9 @@ export class ThemeDropdown extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		this.#mediaQuery.addEventListener("change", this);
+		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme);
+		this.#mediaQuery.addEventListener("change", this.#applyTheme);
+
 		const appTheme = localStorage.getItem(this.storageKey) as AppTheme|null;
 		if (appTheme) this.setAttribute("apptheme", appTheme);
 	}
@@ -119,34 +113,28 @@ export class ThemeDropdown extends HTMLElement {
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		this.#mediaQuery.removeEventListener("change", this);
-	}
-
-	/**
-	 * Handles the events.
-	 */
-	handleEvent(): void {
-		this.#applyTheme();
+		for (const button of this.querySelectorAll("button")) button.removeEventListener("click", this.#setTheme);
+		this.#mediaQuery.removeEventListener("change", this.#applyTheme);
 	}
 
 	/**
 	 * Applies the application theme to the document.
 	 */
-	#applyTheme(): void {
+ 	readonly #applyTheme: () => void = () => {
 		const {appTheme} = this;
 		const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
 		document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
-	}
+	};
 
 	/**
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	#setTheme(event: Event): void {
+	readonly #setTheme: (event: Event) => void = event => {
 		event.preventDefault();
 		const button = (event.target as HTMLElement).closest("button")!;
 		this.appTheme = button.dataset.theme! as AppTheme;
-	}
+	};
 }
 
 /**

package/src/Client/UI/StorageArea.ts

@@ -0,0 +1,20 @@
+/**
+ * Identifies the web storage area.
+ */
+export const StorageArea = Object.freeze({
+
+	/**
+	 * Indicates the local storage.
+	 */
+	Local: "Local",
+
+	/**
+	 * Indicates the session storage.
+	 */
+	Session: "Session"
+});
+
+/**
+ * Identifies the web storage area.
+ */
+export type StorageArea = typeof StorageArea[keyof typeof StorageArea];