@cedx/base 0.22.0 → 0.24.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.22.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.24.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/BackButton.d.ts

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export declare class BackButton extends HTMLElement {
     /**
@@ -11,6 +11,11 @@ export declare class BackButton extends HTMLElement {
      */
     get steps(): number;
     set steps(value: number);
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    goBack(event?: Event): void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;CACD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;CAI3B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/lib/UI/Components/BackButton.js

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export class BackButton extends HTMLElement {
     /**
@@ -7,7 +7,7 @@ export class BackButton extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", () => history.go(-this.steps));
+        this.addEventListener("click", this.goBack.bind(this), { capture: true });
     }
     /**
      * Registers the component.
@@ -25,4 +25,12 @@ export class BackButton extends HTMLElement {
     set steps(value) {
         this.setAttribute("steps", value.toString());
     }
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    goBack(event) {
+        event?.stopPropagation();
+        history.go(-this.steps);
+    }
 }

package/lib/UI/Components/DialogBox.js

@@ -28,10 +28,10 @@ export class DialogBox extends HTMLElement {
      */
     constructor() {
         super();
-        this.firstElementChild.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
-        this.querySelector(".btn-close").addEventListener("click", event => this.#close(event));
+        this.firstElementChild.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+        this.querySelector(".btn-close").addEventListener("click", this.#close.bind(this));
         for (const button of this.querySelectorAll(".modal-footer button"))
-            button.addEventListener("click", event => this.#close(event));
+            button.addEventListener("click", this.#close.bind(this));
     }
     /**
      * Registers the component.
@@ -211,7 +211,7 @@ export class DialogBox extends HTMLElement {
         if (message) {
             const footer = message.footer ?? document.createDocumentFragment();
             for (const button of footer.querySelectorAll("button"))
-                button.addEventListener("click", event => this.#close(event));
+                button.addEventListener("click", this.#close.bind(this));
             this.body = message.body;
             this.caption = message.caption;
             this.footer = footer;
@@ -228,7 +228,7 @@ export class DialogBox extends HTMLElement {
      */
     #close(event) {
         event.preventDefault();
-        this.close(event.target.closest("button").value);
+        this.close(event.currentTarget.value);
     }
     /**
      * Updates the title displayed in the header.

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

@@ -0,0 +1,46 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export declare class FullScreenToggler extends HTMLElement {
+    #private;
+    /**
+     * Creates a new full-screen toggler.
+     */
+    constructor();
+    /**
+     * The CSS selector specifying the target element.
+     */
+    get target(): string;
+    set target(value: string);
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock(): boolean;
+    set wakeLock(value: boolean);
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Resolves when the full-screen mode has been toggled.
+     */
+    toggleFullScreen(event?: Event): Promise<void>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "fullscreen-toggler": FullScreenToggler;
+    }
+}
+//# sourceMappingURL=FullScreenToggler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenToggler.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/FullScreenToggler.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAYjD;;OAEG;;IAaH;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;;;OAIG;IACG,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;CAwCpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}

package/lib/UI/Components/FullScreenToggler.js

@@ -0,0 +1,109 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+    /**
+     * The target element.
+     */
+    #element = document.body;
+    /**
+     * The handle to the underlying platform wake lock.
+     */
+    #sentinel = null;
+    /**
+     * Creates a new full-screen toggler.
+     */
+    constructor() {
+        super();
+        this.addEventListener("click", this.toggleFullScreen.bind(this), { capture: true }); // eslint-disable-line @typescript-eslint/no-misused-promises
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("fullscreen-toggler", this);
+    }
+    /**
+     * The CSS selector specifying the target element.
+     */
+    get target() {
+        const value = this.getAttribute("target") ?? "";
+        return value.trim() || "body";
+    }
+    set target(value) {
+        this.setAttribute("target", value);
+    }
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock() {
+        return this.hasAttribute("wakeLock");
+    }
+    set wakeLock(value) {
+        this.toggleAttribute("target", value);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+        this.#element = document.querySelector(this.target) ?? document.body;
+        this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
+        this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+    }
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Resolves when the full-screen mode has been toggled.
+     */
+    async toggleFullScreen(event) {
+        event?.stopPropagation();
+        if (document.fullscreenElement)
+            await document.exitFullscreen();
+        else
+            await this.#element.requestFullscreen();
+    }
+    /**
+     * Acquires a new wake lock.
+     * @returns Resolves when the wake lock has been acquired.
+     */
+    async #acquireWakeLock() {
+        if (this.#sentinel && !this.#sentinel.released)
+            return;
+        if (this.wakeLock)
+            this.#sentinel = await navigator.wakeLock.request();
+    }
+    /**
+     * Acquires or releases the wake lock when the document enters or exits the full-screen mode.
+     * @param event The dispatched event.
+     */
+    #onFullScreenChanged = () => {
+        if (document.fullscreenElement)
+            void this.#acquireWakeLock();
+        else
+            void this.#releaseWakeLock();
+    };
+    /**
+     * Eventually acquires a new wake lock when the document visibility has changed.
+     * @param event The dispatched event.
+     */
+    #onVisibilityChanged = () => {
+        if (document.fullscreenElement && !document.hidden)
+            void this.#acquireWakeLock();
+    };
+    /**
+     * Releases the acquired wake lock.
+     * @returns Resolves when the wake lock has been released.
+     */
+    async #releaseWakeLock() {
+        if (!this.#sentinel || this.#sentinel.released)
+            return;
+        await this.#sentinel.release();
+    }
+}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -67,7 +67,7 @@ export class KeyboardAccelerator extends HTMLElement {
             return;
         if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey)
             return;
-        event.preventDefault();
+        event.stopPropagation();
         this.firstElementChild?.click();
     };
 }

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

@@ -2,10 +2,15 @@
  * A component that activates the items of a menu, based on the current document URL.
  */
 export declare class MenuActivator extends HTMLElement {
+    #private;
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAS7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAS7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAgB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/MenuActivator.js

@@ -12,12 +12,28 @@ export class MenuActivator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        for (const anchor of this.querySelectorAll("a"))
-            if (anchor.href != location.href)
-                anchor.classList.remove("active");
-            else {
-                anchor.classList.add("active");
-                anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
-            }
+        this.#update();
+        addEventListener("popstate", this.#update);
+        document.body.addEventListener("htmx:afterRequest", this.#update);
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        removeEventListener("popstate", this.#update);
+        document.body.removeEventListener("htmx:afterRequest", this.#update);
     }
+    /**
+     * Updates this component.
+     * @param event The dispatched event.
+     */
+    #update = () => {
+        for (const element of this.querySelectorAll(".active"))
+            element.classList.remove("active");
+        for (const element of this.querySelectorAll("a"))
+            if (element.href == location.href) {
+                element.classList.add("active");
+                element.closest(".dropdown")?.querySelector(".dropdown-toggle")?.classList.add("active");
+            }
+    };
 }

package/lib/UI/Components/ThemeDropdown.js

@@ -23,7 +23,7 @@ export class ThemeDropdown extends HTMLElement {
     constructor() {
         super();
         for (const button of this.querySelectorAll(".dropdown-menu button"))
-            button.addEventListener("click", event => this.#setAppTheme(event));
+            button.addEventListener("click", this.#setAppTheme.bind(this));
     }
     /**
      * Registers the component.
@@ -141,7 +141,7 @@ export class ThemeDropdown extends HTMLElement {
      */
     #setAppTheme(event) {
         event.preventDefault();
-        this.appTheme = event.target.closest("button").dataset.theme;
+        this.appTheme = event.currentTarget.dataset.theme;
         this.save();
     }
     /**

package/lib/UI/Components/Toast.js

@@ -169,7 +169,7 @@ export class Toast extends HTMLElement {
      */
     connectedCallback() {
         const toast = this.firstElementChild;
-        toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+        toast.addEventListener("hide.bs.toast", () => clearInterval(this.#timer));
         toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000));
         this.#toast = new BootstrapToast(toast);
         if (this.open)

package/package.json

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

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

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export class BackButton extends HTMLElement {
 
@@ -8,7 +8,7 @@ export class BackButton extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", () => history.go(-this.steps));
+		this.addEventListener("click", this.goBack.bind(this), {capture: true});
 	}
 
 	/**
@@ -28,6 +28,15 @@ export class BackButton extends HTMLElement {
 	set steps(value: number) {
 		this.setAttribute("steps", value.toString());
 	}
+
+	/**
+	 * Moves back in the session history.
+	 * @param event The dispatched event.
+	 */
+	goBack(event?: Event): void {
+		event?.stopPropagation();
+		history.go(-this.steps);
+	}
 }
 
 /**

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

@@ -81,9 +81,9 @@ export class DialogBox extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.firstElementChild!.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
-		this.querySelector(".btn-close")!.addEventListener("click", event => this.#close(event));
-		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", event => this.#close(event));
+		this.firstElementChild!.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+		this.querySelector(".btn-close")!.addEventListener("click", this.#close.bind(this));
+		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close.bind(this));
 	}
 
 	/**
@@ -267,7 +267,7 @@ export class DialogBox extends HTMLElement {
 	show(message: IDialogMessage|null = null): Promise<string> {
 		if (message) {
 			const footer = message.footer ?? document.createDocumentFragment();
-			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", event => this.#close(event));
+			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close.bind(this));
 			this.body = message.body;
 			this.caption = message.caption;
 			this.footer = footer;
@@ -286,7 +286,7 @@ export class DialogBox extends HTMLElement {
 	 */
 	#close(event: Event): void {
 		event.preventDefault();
-		this.close((event.target as Element).closest("button")!.value);
+		this.close((event.currentTarget as HTMLButtonElement).value);
 	}
 
 	/**

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

@@ -0,0 +1,127 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+
+	/**
+	 * The target element.
+	 */
+	#element: Element = document.body;
+
+	/**
+	 * The handle to the underlying platform wake lock.
+	 */
+	#sentinel: WakeLockSentinel|null = null;
+
+	/**
+	 * Creates a new full-screen toggler.
+	 */
+	constructor() {
+		super();
+		this.addEventListener("click", this.toggleFullScreen.bind(this), {capture: true}); // eslint-disable-line @typescript-eslint/no-misused-promises
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("fullscreen-toggler", this);
+	}
+
+	/**
+	 * The CSS selector specifying the target element.
+	 */
+	get target(): string {
+		const value = this.getAttribute("target") ?? "";
+		return value.trim() || "body";
+	}
+	set target(value: string) {
+		this.setAttribute("target", value);
+	}
+
+	/**
+	 * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+	 */
+	get wakeLock(): boolean {
+		return this.hasAttribute("wakeLock");
+	}
+	set wakeLock(value: boolean) {
+		this.toggleAttribute("target", value);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element = document.querySelector(this.target) ?? document.body;
+		this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Toggles the full-screen mode of the associated element.
+	 * @param event The dispatched event.
+	 * @returns Resolves when the full-screen mode has been toggled.
+	 */
+	async toggleFullScreen(event?: Event): Promise<void> {
+		event?.stopPropagation();
+		if (document.fullscreenElement) await document.exitFullscreen();
+		else await this.#element.requestFullscreen();
+	}
+
+	/**
+	 * Acquires a new wake lock.
+	 * @returns Resolves when the wake lock has been acquired.
+	 */
+	async #acquireWakeLock(): Promise<void> {
+		if (this.#sentinel && !this.#sentinel.released) return;
+		if (this.wakeLock) this.#sentinel = await navigator.wakeLock.request();
+	}
+
+	/**
+	 * Acquires or releases the wake lock when the document enters or exits the full-screen mode.
+	 * @param event The dispatched event.
+	 */
+	readonly #onFullScreenChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement) void this.#acquireWakeLock();
+		else void this.#releaseWakeLock();
+	};
+
+	/**
+	 * Eventually acquires a new wake lock when the document visibility has changed.
+	 * @param event The dispatched event.
+	 */
+	readonly #onVisibilityChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement && !document.hidden) void this.#acquireWakeLock();
+	};
+
+	/**
+	 * Releases the acquired wake lock.
+	 * @returns Resolves when the wake lock has been released.
+	 */
+	async #releaseWakeLock(): Promise<void> {
+		if (!this.#sentinel || this.#sentinel.released) return;
+		await this.#sentinel.release();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"fullscreen-toggler": FullScreenToggler;
+	}
+}

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

@@ -72,7 +72,7 @@ export class KeyboardAccelerator extends HTMLElement {
 		if (!(modifiers & KeyboardModifiers.Alt) && event.altKey) return;
 		if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey) return;
 
-		event.preventDefault();
+		event.stopPropagation();
 		(this.firstElementChild as HTMLElement|null)?.click();
 	}
 }

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

@@ -14,13 +14,30 @@ export class MenuActivator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const anchor of this.querySelectorAll("a"))
-			if (anchor.href != location.href) anchor.classList.remove("active");
-			else {
-				anchor.classList.add("active");
-				anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
-			}
+		this.#update();
+		addEventListener("popstate", this.#update);
+		document.body.addEventListener("htmx:afterRequest", this.#update);
 	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		removeEventListener("popstate", this.#update);
+		document.body.removeEventListener("htmx:afterRequest", this.#update);
+	}
+
+	/**
+	 * Updates this component.
+	 * @param event The dispatched event.
+	 */
+	readonly #update: (event?: Event) => void = () => {
+		for (const element of this.querySelectorAll(".active")) element.classList.remove("active");
+		for (const element of this.querySelectorAll("a")) if (element.href == location.href) {
+			element.classList.add("active");
+			element.closest(".dropdown")?.querySelector(".dropdown-toggle")?.classList.add("active");
+		}
+	};
 }
 
 /**

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

@@ -27,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", event => this.#setAppTheme(event));
+		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme.bind(this));
 	}
 
 	/**
@@ -151,7 +151,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	#setAppTheme(event: Event): void {
 		event.preventDefault();
-		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
+		this.appTheme = (event.currentTarget as HTMLElement).dataset.theme! as AppTheme;
 		this.save();
 	}
 

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

@@ -173,7 +173,7 @@ export class Toast extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		const toast = this.firstElementChild!;
-		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+		toast.addEventListener("hide.bs.toast", () => clearInterval(this.#timer));
 		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000));
 
 		this.#toast = new BootstrapToast(toast);