@cedx/base 0.9.0 → 0.10.1

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.9.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.10.1/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/KeyboardAccelerator.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Represents a shortcut key associated with an element.
+ */
+export declare class KeyboardAccelerator extends HTMLElement {
+    #private;
+    /**
+     * Identifies the key for the keyboard accelerator.
+     */
+    get key(): string;
+    set key(value: string);
+    /**
+     * Identifies the modifiers for the keyboard accelerator.
+     */
+    get modifiers(): number;
+    set modifiers(value: number);
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+}
+//# sourceMappingURL=KeyboardAccelerator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardAccelerator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/KeyboardAccelerator.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;;IAcnD;;OAEG;IACH,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAItB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAK1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B"}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -0,0 +1,73 @@
+import { KeyboardModifiers } from "../KeyboardModifiers.js";
+/**
+ * Represents a shortcut key associated with an element.
+ */
+export class KeyboardAccelerator extends HTMLElement {
+    /**
+     * The mapping between the modifier names and their values.
+     */
+    static #modifiers = new Map(Object.entries(KeyboardModifiers).filter(([key]) => key != "None"));
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("keyboard-accelerator", this);
+    }
+    /**
+     * Identifies the key for the keyboard accelerator.
+     */
+    get key() {
+        return (this.getAttribute("key") ?? "").trim();
+    }
+    set key(value) {
+        this.setAttribute("key", value);
+    }
+    /**
+     * Identifies the modifiers for the keyboard accelerator.
+     */
+    get modifiers() {
+        return (this.getAttribute("modifiers") ?? "").split(",")
+            .map(value => value.trim())
+            .reduce((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
+    }
+    set modifiers(value) {
+        this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+            .filter(([, flag]) => (value & flag) != 0)
+            .map(([key]) => key)
+            .toArray().join(", "));
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        addEventListener("keyup", this.#activateChildContent, { capture: true });
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        removeEventListener("keyup", this.#activateChildContent, { capture: true });
+    }
+    /**
+     * Activates the child content when the specified keyboard event designates the same key and modifiers as this keyboard accelerator.
+     * @param event The dispatched event.
+     */
+    #activateChildContent = event => {
+        if (event.key != this.key)
+            return;
+        const { activeElement } = document;
+        if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)
+            return;
+        const { modifiers } = this;
+        if (!(modifiers & KeyboardModifiers.Ctrl) && event.ctrlKey)
+            return;
+        if (!(modifiers & KeyboardModifiers.Shift) && event.shiftKey)
+            return;
+        if (!(modifiers & KeyboardModifiers.Alt) && event.altKey)
+            return;
+        if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey)
+            return;
+        event.preventDefault();
+        this.firstElementChild.click();
+    };
+}

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

@@ -3,14 +3,6 @@
  */
 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,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"}
+{"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;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,26 +12,12 @@ 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.show();
+        this.hidden = false;
     }
     /**
      * Stops the loading indicator.
@@ -41,7 +27,7 @@ export class LoadingIndicator extends HTMLElement {
         this.#requestCount--;
         if (options.force || this.#requestCount <= 0) {
             this.#requestCount = 0;
-            this.hide();
+            this.hidden = true;
         }
     }
 }

package/lib/UI/Components/MenuActivator.js

@@ -17,7 +17,7 @@ export class MenuActivator extends HTMLElement {
                 anchor.classList.remove("active");
             else {
                 anchor.classList.add("active");
-                anchor.closest(".nav-item.dropdown")?.querySelector(".nav-link")?.classList.add("active");
+                anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
             }
     }
 }

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

@@ -15,14 +15,6 @@ export declare class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback(): void;
-    /**
-     * Hides this component.
-     */
-    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,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"}
+{"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;CAS5B;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

@@ -29,18 +29,6 @@ export class OfflineIndicator extends HTMLElement {
         for (const event of ["online", "offline"])
             removeEventListener(event, this.#updateHiddenState);
     }
-    /**
-     * Hides this component.
-     */
-    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.
      */

package/lib/UI/Components/TabActivator.js

@@ -50,7 +50,7 @@ export class TabActivator extends HTMLElement {
      * The tab list.
      */
     get tabs() {
-        return this.querySelectorAll(".nav-tabs button");
+        return this.querySelectorAll('[data-bs-toggle="tab"]');
     }
     /**
      * Method invoked when this component is connected.

package/lib/UI/KeyboardModifiers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Enumerates modifier flags for keyboard accelerators.
+ */
+export declare const KeyboardModifiers: Readonly<{
+    /**
+     * Indicates no modifier.
+     */
+    None: 0;
+    /**
+     * Indicates the `Control` modifier.
+     */
+    Ctrl: 1;
+    /**
+     * Indicates the `Shift` modifier.
+     */
+    Shift: 2;
+    /**
+     * Indicates the `Alt` modifier (`Option` key on macOS, `Menu` key on Windows).
+     */
+    Alt: 4;
+    /**
+     * Indicates the `Meta` modifier (`Command` key on macOS, `Windows` key on Windows).
+     */
+    Meta: 8;
+}>;
+//# sourceMappingURL=KeyboardModifiers.d.ts.map

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

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

package/lib/UI/KeyboardModifiers.js

@@ -0,0 +1,25 @@
+/**
+ * Enumerates modifier flags for keyboard accelerators.
+ */
+export const KeyboardModifiers = Object.freeze({
+    /**
+     * Indicates no modifier.
+     */
+    None: 0,
+    /**
+     * Indicates the `Control` modifier.
+     */
+    Ctrl: 1,
+    /**
+     * Indicates the `Shift` modifier.
+     */
+    Shift: 2,
+    /**
+     * Indicates the `Alt` modifier (`Option` key on macOS, `Menu` key on Windows).
+     */
+    Alt: 4,
+    /**
+     * Indicates the `Meta` modifier (`Command` key on macOS, `Windows` key on Windows).
+     */
+    Meta: 8
+});

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.9.0",
+	"version": "0.10.1",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.54.2",
 		"@types/bootstrap": "^5.2.10",
@@ -15,7 +15,7 @@
 		"@types/mocha": "^10.0.10",
 		"@types/node": "^24.3.0",
 		"@types/serve-handler": "^6.1.4",
-		"chai": "^5.2.1",
+		"chai": "^5.3.1",
 		"esbuild": "^0.25.9",
 		"globals": "^16.3.0",
 		"mocha": "^11.7.1",

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

@@ -0,0 +1,78 @@
+import {KeyboardModifiers} from "../KeyboardModifiers.js";
+
+/**
+ * Represents a shortcut key associated with an element.
+ */
+export class KeyboardAccelerator extends HTMLElement {
+
+	/**
+	 * The mapping between the modifier names and their values.
+	 */
+	static readonly #modifiers = new Map(Object.entries(KeyboardModifiers).filter(([key]) => key != "None"));
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("keyboard-accelerator", this);
+	}
+
+	/**
+	 * Identifies the key for the keyboard accelerator.
+	 */
+	get key(): string {
+		return (this.getAttribute("key") ?? "").trim();
+	}
+	set key(value: string) {
+		this.setAttribute("key", value);
+	}
+
+	/**
+	 * Identifies the modifiers for the keyboard accelerator.
+	 */
+	get modifiers(): number {
+		return (this.getAttribute("modifiers") ?? "").split(",")
+			.map(value => value.trim())
+			.reduce<number>((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
+	}
+	set modifiers(value: number) {
+		this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+			.filter(([, flag]) => (value & flag) != 0)
+			.map(([key]) => key)
+			.toArray().join(", "));
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		addEventListener("keyup", this.#activateChildContent, {capture: true});
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		removeEventListener("keyup", this.#activateChildContent, {capture: true});
+	}
+
+	/**
+	 * Activates the child content when the specified keyboard event designates the same key and modifiers as this keyboard accelerator.
+	 * @param event The dispatched event.
+	 */
+	readonly #activateChildContent: (event: KeyboardEvent) => void = event => {
+		if (event.key != this.key) return;
+
+		const {activeElement} = document;
+		if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) return;
+
+		const {modifiers} = this;
+		if (!(modifiers & KeyboardModifiers.Ctrl) && event.ctrlKey) return;
+		if (!(modifiers & KeyboardModifiers.Shift) && event.shiftKey) return;
+		if (!(modifiers & KeyboardModifiers.Alt) && event.altKey) return;
+		if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey) return;
+
+		event.preventDefault();
+		(this.firstElementChild as HTMLElement).click();
+	}
+}

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

@@ -15,28 +15,12 @@ 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.show();
+		this.hidden = false;
 	}
 
 	/**
@@ -47,7 +31,7 @@ export class LoadingIndicator extends HTMLElement {
 		this.#requestCount--;
 		if (options.force || this.#requestCount <= 0) {
 			this.#requestCount = 0;
-			this.hide();
+			this.hidden = true;
 		}
 	}
 }

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

@@ -18,7 +18,7 @@ export class MenuActivator extends HTMLElement {
 			if (anchor.href != location.href) anchor.classList.remove("active");
 			else {
 				anchor.classList.add("active");
-				anchor.closest(".nav-item.dropdown")?.querySelector(".nav-link")?.classList.add("active");
+				anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
 			}
 	}
 }

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

@@ -32,20 +32,6 @@ export class OfflineIndicator extends HTMLElement {
 		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateHiddenState);
 	}
 
-	/**
-	 * Hides this component.
-	 */
-	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.
 	 */

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

@@ -57,7 +57,7 @@ export class TabActivator extends HTMLElement {
 	 * The tab list.
 	 */
 	get tabs(): NodeListOf<HTMLButtonElement> {
-		return this.querySelectorAll(".nav-tabs button");
+		return this.querySelectorAll('[data-bs-toggle="tab"]');
 	}
 
 	/**

package/src/Client/UI/KeyboardModifiers.ts

@@ -0,0 +1,30 @@
+/**
+ * Enumerates modifier flags for keyboard accelerators.
+ */
+export const KeyboardModifiers = Object.freeze({
+
+	/**
+	 * Indicates no modifier.
+	 */
+	None: 0,
+
+	/**
+	 * Indicates the `Control` modifier.
+	 */
+	Ctrl: 1,
+
+	/**
+	 * Indicates the `Shift` modifier.
+	 */
+	Shift: 2,
+
+	/**
+	 * Indicates the `Alt` modifier (`Option` key on macOS, `Menu` key on Windows).
+	 */
+	Alt: 4,
+
+	/**
+	 * Indicates the `Meta` modifier (`Command` key on macOS, `Windows` key on Windows).
+	 */
+	Meta: 8
+});