@cedx/base 0.11.0 → 0.13.0

package/lib/UI/Position.js

@@ -0,0 +1,59 @@
+/**
+ * Defines the position of an element.
+ */
+export const Position = Object.freeze({
+    /**
+     * Top left.
+     */
+    TopStart: "TopStart",
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter",
+    /**
+     * Top right.
+     */
+    TopEnd: "TopEnd",
+    /**
+     * Middle left.
+     */
+    MiddleStart: "MiddleStart",
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter",
+    /**
+     * Middle right.
+     */
+    MiddleEnd: "MiddleEnd",
+    /**
+     * Bottom left.
+     */
+    BottomStart: "BottomStart",
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter",
+    /**
+     * Bottom right.
+     */
+    BottomEnd: "BottomEnd"
+});
+/**
+ * Returns the CSS representation of the specified position.
+ * @param position The position.
+ * @returns The CSS representation of the specified position.
+ */
+export function toCss(position) {
+    switch (position) {
+        case Position.TopCenter: return "top-0 start-50 translate-middle-x";
+        case Position.TopEnd: return "top-0 end-0";
+        case Position.MiddleStart: return "top-50 start-0 translate-middle-y";
+        case Position.MiddleCenter: return "top-50 start-50 translate-middle";
+        case Position.MiddleEnd: return "top-50 end-0 translate-middle-y";
+        case Position.BottomStart: return "bottom-0 start-0";
+        case Position.BottomCenter: return "bottom-0 start-50 translate-middle-x";
+        case Position.BottomEnd: return "bottom-0 end-0";
+        default: return "top-0 start-0";
+    }
+}

package/lib/UI/Size.d.ts

@@ -1,34 +1,40 @@
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export declare const Size: Readonly<{
     /**
      * An extra small size.
      */
-    ExtraSmall: "xs";
+    ExtraSmall: "ExtraSmall";
     /**
      * A small size.
      */
-    Small: "sm";
+    Small: "Small";
     /**
      * A medium size.
      */
-    Medium: "md";
+    Medium: "Medium";
     /**
      * A large size.
      */
-    Large: "lg";
+    Large: "Large";
     /**
      * An extra large size.
      */
-    ExtraLarge: "xl";
+    ExtraLarge: "ExtraLarge";
     /**
      * An extra extra large size.
      */
-    ExtraExtraLarge: "xxl";
+    ExtraExtraLarge: "ExtraExtraLarge";
 }>;
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export type Size = typeof Size[keyof typeof Size];
+/**
+ * Returns the CSS representation of the specified size.
+ * @param size The size.
+ * @returns The CSS representation of the specified size.
+ */
+export declare function toCss(size: Size): string;
 //# sourceMappingURL=Size.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC"}
+{"version":3,"file":"Size.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Size.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,IAAI;IAEhB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAElD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CASxC"}

package/lib/UI/Size.js

@@ -1,29 +1,44 @@
 /**
- * Defines the size of a component.
+ * Defines the size of an element.
  */
 export const Size = Object.freeze({
     /**
      * An extra small size.
      */
-    ExtraSmall: "xs",
+    ExtraSmall: "ExtraSmall",
     /**
      * A small size.
      */
-    Small: "sm",
+    Small: "Small",
     /**
      * A medium size.
      */
-    Medium: "md",
+    Medium: "Medium",
     /**
      * A large size.
      */
-    Large: "lg",
+    Large: "Large",
     /**
      * An extra large size.
      */
-    ExtraLarge: "xl",
+    ExtraLarge: "ExtraLarge",
     /**
      * An extra extra large size.
      */
-    ExtraExtraLarge: "xxl"
+    ExtraExtraLarge: "ExtraExtraLarge"
 });
+/**
+ * Returns the CSS representation of the specified size.
+ * @param size The size.
+ * @returns The CSS representation of the specified size.
+ */
+export function toCss(size) {
+    switch (size) {
+        case Size.ExtraSmall: return "xs";
+        case Size.Small: return "sm";
+        case Size.Large: return "lg";
+        case Size.ExtraLarge: return "xl";
+        case Size.ExtraExtraLarge: return "xxl";
+        default: return "md";
+    }
+}

package/lib/UI/Variant.d.ts

@@ -5,22 +5,28 @@ export declare const Variant: Readonly<{
     /**
      * A dark variant.
      */
-    Dark: "dark";
+    Dark: "Dark";
     /**
      * A light variant.
      */
-    Light: "light";
+    Light: "Light";
     /**
      * A primary variant.
      */
-    Primary: "primary";
+    Primary: "Primary";
     /**
      * A secondary variant.
      */
-    Secondary: "secondary";
+    Secondary: "Secondary";
 }>;
 /**
  * Defines tone variants.
  */
 export type Variant = typeof Variant[keyof typeof Variant];
+/**
+ * Returns the CSS representation of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS representation of the specified variant.
+ */
+export declare function toCss(variant: Variant): string;
 //# sourceMappingURL=Variant.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC"}
+{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../../src/Client/UI/Variant.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE9C"}

package/lib/UI/Variant.js

@@ -5,17 +5,25 @@ export const Variant = Object.freeze({
     /**
      * A dark variant.
      */
-    Dark: "dark",
+    Dark: "Dark",
     /**
      * A light variant.
      */
-    Light: "light",
+    Light: "Light",
     /**
      * A primary variant.
      */
-    Primary: "primary",
+    Primary: "Primary",
     /**
      * A secondary variant.
      */
-    Secondary: "secondary"
+    Secondary: "Secondary"
 });
+/**
+ * Returns the CSS representation of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS representation of the specified variant.
+ */
+export function toCss(variant) {
+    return variant.toLowerCase();
+}

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.11.0",
+	"version": "0.13.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@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": "^6.0.0",
+		"chai": "^6.0.1",
 		"esbuild": "^0.25.9",
 		"globals": "^16.3.0",
 		"mocha": "^11.7.1",

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

@@ -14,22 +14,21 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		this.#updateHiddenState();
-		for (const event of ["online", "offline"]) addEventListener(event, this.#updateHiddenState);
+		this.#update();
+		for (const event of ["online", "offline"]) addEventListener(event, this.#update);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateHiddenState);
+		for (const event of ["online", "offline"]) removeEventListener(event, this.#update);
 	}
 
 	/**
-	 * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+	 * Updates this component.
 	 */
-	readonly #updateHiddenState: () => void = () =>
-		this.hidden = navigator.onLine;
+	readonly #update: () => void = () => this.hidden = navigator.onLine;
 }
 
 /**

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

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

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

@@ -1,3 +1,4 @@
+import {Dropdown} from "bootstrap";
 import {AppTheme, getIcon} from "../AppTheme.js";
 import {MenuAlignment} from "../MenuAlignment.js";
 
@@ -11,6 +12,11 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	static readonly observedAttributes = ["alignment", "apptheme", "label"];
 
+	/**
+	 * The dropdown menu.
+	 */
+	#dropdown!: Dropdown;
+
 	/**
 	 * The media query used to check the application theme.
 	 */
@@ -21,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme);
+		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setAppTheme);
 	}
 
 	/**
@@ -51,7 +57,6 @@ export class ThemeDropdown extends HTMLElement {
 	}
 	set appTheme(value: AppTheme) {
 		this.setAttribute("apptheme", value);
-		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
@@ -84,48 +89,63 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "alignment": {
-				const alignment = Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End;
-				const {classList} = this.querySelector(".dropdown-menu")!;
-				if (alignment == MenuAlignment.End) classList.add("dropdown-menu-end");
-				else classList.remove("dropdown-menu-end");
+			case "alignment":
+				this.#updateAlignment(Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End);
 				break;
-			}
-			case "apptheme": {
-				const appTheme = Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System;
-				this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(appTheme);
-				this.querySelector(`button[data-theme="${appTheme}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
-				this.#applyTheme();
+			case "apptheme":
+				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
 				break;
-			}
-			case "label": {
-				this.querySelector(".dropdown-toggle > span")!.textContent = (newValue ?? "").trim() || "Thème";
+			case "label":
+				this.#updateLabel(newValue ?? "");
 				break;
-			}
 			// No default
 		}
 	}
 
+	/**
+	 * Closes the dropdown menu.
+	 */
+	close(): void {
+		this.#dropdown.hide();
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
 		const appTheme = localStorage.getItem(this.storageKey) as AppTheme|null;
-		if (appTheme) this.setAttribute("apptheme", appTheme);
-		this.#mediaQuery.addEventListener("change", this.#applyTheme);
+		if (appTheme) this.appTheme = appTheme;
+
+		this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle")!);
+		this.#mediaQuery.addEventListener("change", this.#applyToDocument);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		this.#mediaQuery.removeEventListener("change", this.#applyTheme);
+		this.#dropdown.dispose();
+		this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
+	}
+
+	/**
+	 * Opens the dropdown menu.
+	 */
+	open(): void {
+		this.#dropdown.show();
+	}
+
+	/**
+	 * Saves the current application theme into the local storage.
+	 */
+	save(): void {
+		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
 	 * Applies the application theme to the document.
 	 */
- 	readonly #applyTheme: () => void = () => {
+ 	readonly #applyToDocument: () => void = () => {
 		const {appTheme} = this;
 		const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
 		document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
@@ -135,11 +155,39 @@ export class ThemeDropdown extends HTMLElement {
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	readonly #setTheme: (event: Event) => void = event => {
+	readonly #setAppTheme: (event: Event) => void = event => {
 		event.preventDefault();
-		const button = (event.target as HTMLElement).closest("button")!;
-		this.appTheme = button.dataset.theme! as AppTheme;
+		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
+		this.save();
 	};
+
+	/**
+	 * Updates the alignment of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateAlignment(value: MenuAlignment): void {
+		const {classList} = this.querySelector(".dropdown-menu")!;
+		if (value == MenuAlignment.End) classList.add("dropdown-menu-end");
+		else classList.remove("dropdown-menu-end");
+	}
+
+	/**
+	 * Updates the application theme.
+	 * @param value The new value.
+	 */
+	#updateAppTheme(value: AppTheme): void {
+		this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(value);
+		this.querySelector(`button[data-theme="${value}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
+		this.#applyToDocument();
+	}
+
+	/**
+	 * Updates the label of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		this.querySelector(".dropdown-toggle > span")!.textContent = value.trim() || "Thème";
+	}
 }
 
 /**