@cedx/base 0.10.0 → 0.11.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.10.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.11.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/Data/Pagination.d.ts

@@ -9,7 +9,7 @@ export declare class Pagination {
      */
     constructor(options?: PaginationOptions);
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     get currentPageIndex(): number;
     set currentPageIndex(value: number);
@@ -27,7 +27,7 @@ export declare class Pagination {
     get itemsPerPage(): number;
     set itemsPerPage(value: number);
     /**
-     * The one-based last page number.
+     * The last page index.
      */
     get lastPageIndex(): number;
     /**
@@ -59,7 +59,7 @@ export declare class Pagination {
  */
 export type PaginationOptions = Partial<{
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     currentPageIndex: number;
     /**

package/lib/Data/Pagination.js

@@ -3,7 +3,7 @@
  */
 export class Pagination {
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     #currentPageIndex;
     /**
@@ -19,18 +19,18 @@ export class Pagination {
      * @param options An object providing values to initialize this instance.
      */
     constructor(options = {}) {
-        this.currentPageIndex = options.currentPageIndex ?? 1;
+        this.currentPageIndex = options.currentPageIndex ?? 0;
         this.itemsPerPage = options.itemsPerPage ?? 25;
         this.totalItemCount = options.totalItemCount ?? 0;
     }
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     get currentPageIndex() {
         return this.#currentPageIndex;
     }
     set currentPageIndex(value) {
-        this.#currentPageIndex = Math.max(1, value);
+        this.#currentPageIndex = Math.max(0, value);
     }
     /**
      * Value indicating whether a next page exists.
@@ -42,7 +42,7 @@ export class Pagination {
      * Value indicating whether a previous page exists.
      */
     get hasPreviousPage() {
-        return this.#currentPageIndex > 1;
+        return this.#currentPageIndex > 0;
     }
     /**
      * The number of items per page.
@@ -54,10 +54,10 @@ export class Pagination {
         this.#itemsPerPage = Math.max(1, Math.min(1000, value));
     }
     /**
-     * The one-based last page number.
+     * The last page index.
      */
     get lastPageIndex() {
-        return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) : 1;
+        return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) - 1 : 0;
     }
     /**
      * The data limit.
@@ -69,13 +69,13 @@ export class Pagination {
      * The data offset.
      */
     get offset() {
-        return (this.#currentPageIndex - 1) * this.#itemsPerPage;
+        return this.#currentPageIndex * this.#itemsPerPage;
     }
     /**
      * The search parameters corresponding to this object.
      */
     get searchParams() {
-        return new URLSearchParams({ page: this.#currentPageIndex.toString(), perPage: this.#itemsPerPage.toString() });
+        return new URLSearchParams({ page: (this.#currentPageIndex + 1).toString(), perPage: this.#itemsPerPage.toString() });
     }
     /**
      * The total number of items.
@@ -93,7 +93,7 @@ export class Pagination {
      */
     static fromResponse(response) {
         return new this({
-            currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1"),
+            currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1") - 1,
             itemsPerPage: Number(response.headers.get("X-Pagination-Per-Page") ?? "25"),
             totalItemCount: Number(response.headers.get("X-Pagination-Total-Count") ?? "0")
         });

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

@@ -22,4 +22,15 @@ export declare class KeyboardAccelerator extends HTMLElement {
      */
     disconnectedCallback(): void;
 }
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "keyboard-accelerator": KeyboardAccelerator;
+    }
+}
 //# sourceMappingURL=KeyboardAccelerator.d.ts.map

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

@@ -1 +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"}
+{"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;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,mBAAmB,CAAC;KAC5C;CACD"}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -59,15 +59,15 @@ export class KeyboardAccelerator extends HTMLElement {
         if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)
             return;
         const { modifiers } = this;
-        if ((modifiers & KeyboardModifiers.Ctrl) != 0 && !event.ctrlKey)
+        if (!(modifiers & KeyboardModifiers.Ctrl) && event.ctrlKey)
             return;
-        if ((modifiers & KeyboardModifiers.Shift) != 0 && !event.shiftKey)
+        if (!(modifiers & KeyboardModifiers.Shift) && event.shiftKey)
             return;
-        if ((modifiers & KeyboardModifiers.Alt) != 0 && !event.altKey)
+        if (!(modifiers & KeyboardModifiers.Alt) && event.altKey)
             return;
-        if ((modifiers & KeyboardModifiers.Meta) != 0 && !event.metaKey)
+        if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey)
             return;
         event.preventDefault();
-        this.firstElementChild.click();
+        this.firstElementChild?.click();
     };
 }

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

@@ -3,10 +3,6 @@
  */
 export declare class OfflineIndicator extends HTMLElement {
     #private;
-    /**
-     * Creates a new offline indicator.
-     */
-    constructor();
     /**
      * Method invoked when this component is connected.
      */

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;CAS5B;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;;IAShD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;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

@@ -2,13 +2,6 @@
  * A component that shows up when the network is unavailable, and hides when connectivity is restored.
  */
 export class OfflineIndicator extends HTMLElement {
-    /**
-     * Creates a new offline indicator.
-     */
-    constructor() {
-        super();
-        this.#updateHiddenState();
-    }
     /**
      * Registers the component.
      */
@@ -19,6 +12,7 @@ export class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
+        this.#updateHiddenState();
         for (const event of ["online", "offline"])
             addEventListener(event, this.#updateHiddenState);
     }

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

@@ -4,7 +4,7 @@ import { StorageArea } from "../StorageArea.js";
  */
 export declare class TabActivator extends HTMLElement {
     /**
-     * The one-based index of the active tab.
+     * The index of the active tab.
      */
     get activeTabIndex(): number;
     set activeTabIndex(value: number);

package/lib/UI/Components/TabActivator.js

@@ -11,14 +11,14 @@ export class TabActivator extends HTMLElement {
         customElements.define("tab-activator", this);
     }
     /**
-     * The one-based index of the active tab.
+     * The 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));
+        const index = Number(this.storage.getItem(this.storageKey) ?? "1");
+        return Math.max(0, Math.min(this.tabs.length, Number.isNaN(index) ? 0 : index - 1));
     }
     set activeTabIndex(value) {
-        this.storage.setItem(this.storageKey, value.toString());
+        this.storage.setItem(this.storageKey, (value + 1).toString());
     }
     /**
      * The storage object corresponding to the current {@link storageArea}.
@@ -50,15 +50,15 @@ 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.
      */
     connectedCallback() {
         const { activeTabIndex, tabs } = this;
-        for (let index = 1; index <= tabs.length; index++) {
-            const tab = tabs.item(index - 1);
+        for (let index = 0; index < tabs.length - 1; index++) {
+            const tab = tabs.item(index);
             tab.addEventListener("click", () => this.activeTabIndex = index);
             if (index == activeTabIndex)
                 Tab.getOrCreateInstance(tab).show();

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

@@ -9,6 +9,10 @@ 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.
      */

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;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"}
+{"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;CAsB5B;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,6 +12,14 @@ 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);
+    }
     /**
      * Registers the component.
      */
@@ -95,19 +103,15 @@ export class ThemeDropdown extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        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);
+        this.#mediaQuery.addEventListener("change", this.#applyTheme);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        for (const button of this.querySelectorAll("button"))
-            button.removeEventListener("click", this.#setTheme);
         this.#mediaQuery.removeEventListener("change", this.#applyTheme);
     }
     /**

package/lib/UI/ElementExtensions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Creates a document fragment from the specified HTML string.
+ * @param childContent The HTML string providing the child content.
+ * @returns The document fragment corresponding to the specified HTML string.
+ */
+export declare function createDocumentFragment(childContent: string): DocumentFragment;
+/**
+ * Returns a promise that resolves when the specified element has finished all its animations.
+ * @param element The target element.
+ * @returns The element animations.
+ */
+export declare function waitForAnimations(element: Element): Promise<Array<PromiseSettledResult<Animation>>>;
+//# sourceMappingURL=ElementExtensions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ElementExtensions.d.ts","sourceRoot":"","sources":["../../src/Client/UI/ElementExtensions.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,YAAY,EAAE,MAAM,GAAG,gBAAgB,CAI7E;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,SAAS,CAAC,CAAC,CAAC,CAEnG"}

package/lib/UI/ElementExtensions.js

@@ -0,0 +1,18 @@
+/**
+ * Creates a document fragment from the specified HTML string.
+ * @param childContent The HTML string providing the child content.
+ * @returns The document fragment corresponding to the specified HTML string.
+ */
+export function createDocumentFragment(childContent) {
+    const template = document.createElement("template");
+    template.innerHTML = childContent;
+    return template.content;
+}
+/**
+ * Returns a promise that resolves when the specified element has finished all its animations.
+ * @param element The target element.
+ * @returns The element animations.
+ */
+export function waitForAnimations(element) {
+    return Promise.allSettled(element.getAnimations().map(animation => animation.finished));
+}

package/lib/UI/Size.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Defines the size of a component.
+ */
+export declare const Size: Readonly<{
+    /**
+     * An extra small size.
+     */
+    ExtraSmall: "xs";
+    /**
+     * A small size.
+     */
+    Small: "sm";
+    /**
+     * A medium size.
+     */
+    Medium: "md";
+    /**
+     * A large size.
+     */
+    Large: "lg";
+    /**
+     * An extra large size.
+     */
+    ExtraLarge: "xl";
+    /**
+     * An extra extra large size.
+     */
+    ExtraExtraLarge: "xxl";
+}>;
+/**
+ * Defines the size of a component.
+ */
+export type Size = typeof Size[keyof typeof Size];
+//# sourceMappingURL=Size.d.ts.map

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

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

package/lib/UI/Size.js

@@ -0,0 +1,29 @@
+/**
+ * Defines the size of a component.
+ */
+export const Size = Object.freeze({
+    /**
+     * An extra small size.
+     */
+    ExtraSmall: "xs",
+    /**
+     * A small size.
+     */
+    Small: "sm",
+    /**
+     * A medium size.
+     */
+    Medium: "md",
+    /**
+     * A large size.
+     */
+    Large: "lg",
+    /**
+     * An extra large size.
+     */
+    ExtraLarge: "xl",
+    /**
+     * An extra extra large size.
+     */
+    ExtraExtraLarge: "xxl"
+});

package/lib/UI/Variant.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Defines tone variants.
+ */
+export declare const Variant: Readonly<{
+    /**
+     * A dark variant.
+     */
+    Dark: "dark";
+    /**
+     * A light variant.
+     */
+    Light: "light";
+    /**
+     * A primary variant.
+     */
+    Primary: "primary";
+    /**
+     * A secondary variant.
+     */
+    Secondary: "secondary";
+}>;
+/**
+ * Defines tone variants.
+ */
+export type Variant = typeof Variant[keyof typeof Variant];
+//# sourceMappingURL=Variant.d.ts.map

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

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

package/lib/UI/Variant.js

@@ -0,0 +1,21 @@
+/**
+ * Defines tone variants.
+ */
+export const Variant = Object.freeze({
+    /**
+     * A dark variant.
+     */
+    Dark: "dark",
+    /**
+     * A light variant.
+     */
+    Light: "light",
+    /**
+     * A primary variant.
+     */
+    Primary: "primary",
+    /**
+     * A secondary variant.
+     */
+    Secondary: "secondary"
+});

package/lib/UI/ViewportScroller.js

@@ -27,7 +27,7 @@ export class ViewportScroller {
             const navbar = document.body.querySelector(".navbar");
             this.#scrollOffset += (navbar?.offsetHeight ?? 0);
         }
-        const actionBar = document.body.querySelector("action-bar, .action-bar");
+        const actionBar = document.body.querySelector("action-bar");
         return this.#scrollOffset + (actionBar?.offsetHeight ?? 0);
     }
     /**

package/package.json

@@ -7,23 +7,23 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.10.0",
+	"version": "0.11.0",
 	"devDependencies": {
-		"@playwright/browser-chromium": "^1.54.2",
+		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
 		"@types/chai": "^5.2.2",
 		"@types/mocha": "^10.0.10",
 		"@types/node": "^24.3.0",
 		"@types/serve-handler": "^6.1.4",
-		"chai": "^5.2.1",
+		"chai": "^6.0.0",
 		"esbuild": "^0.25.9",
 		"globals": "^16.3.0",
 		"mocha": "^11.7.1",
-		"playwright": "^1.54.2",
+		"playwright": "^1.55.0",
 		"serve-handler": "^6.1.6",
 		"typedoc": "^0.28.10",
 		"typescript": "^5.9.2",
-		"typescript-eslint": "^8.39.1"
+		"typescript-eslint": "^8.40.0"
 	},
 	"engines": {
 		"node": ">=24.0.0"

package/src/Client/Data/Pagination.ts

@@ -4,7 +4,7 @@
 export class Pagination {
 
 	/**
-	 * The one-based current page number.
+	 * The current page index.
 	 */
 	#currentPageIndex!: number;
 
@@ -23,19 +23,19 @@ export class Pagination {
 	 * @param options An object providing values to initialize this instance.
 	 */
 	constructor(options: PaginationOptions = {}) {
-		this.currentPageIndex = options.currentPageIndex ?? 1;
+		this.currentPageIndex = options.currentPageIndex ?? 0;
 		this.itemsPerPage = options.itemsPerPage ?? 25;
 		this.totalItemCount = options.totalItemCount ?? 0;
 	}
 
 	/**
-	 * The one-based current page number.
+	 * The current page index.
 	 */
 	get currentPageIndex(): number {
 		return this.#currentPageIndex;
 	}
 	set currentPageIndex(value: number) {
-		this.#currentPageIndex = Math.max(1, value);
+		this.#currentPageIndex = Math.max(0, value);
 	}
 
 	/**
@@ -49,7 +49,7 @@ export class Pagination {
 	 * Value indicating whether a previous page exists.
 	 */
 	get hasPreviousPage(): boolean {
-		return this.#currentPageIndex > 1;
+		return this.#currentPageIndex > 0;
 	}
 
 	/**
@@ -63,10 +63,10 @@ export class Pagination {
 	}
 
 	/**
-	 * The one-based last page number.
+	 * The last page index.
 	 */
 	get lastPageIndex(): number {
-		return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) : 1;
+		return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) - 1 : 0;
 	}
 
 	/**
@@ -80,14 +80,14 @@ export class Pagination {
 	 * The data offset.
 	 */
 	get offset(): number {
-		return (this.#currentPageIndex - 1) * this.#itemsPerPage;
+		return this.#currentPageIndex * this.#itemsPerPage;
 	}
 
 	/**
 	 * The search parameters corresponding to this object.
 	 */
 	get searchParams(): URLSearchParams {
-		return new URLSearchParams({page: this.#currentPageIndex.toString(), perPage: this.#itemsPerPage.toString()});
+		return new URLSearchParams({page: (this.#currentPageIndex + 1).toString(), perPage: this.#itemsPerPage.toString()});
 	}
 
 	/**
@@ -107,7 +107,7 @@ export class Pagination {
 	 */
 	static fromResponse(response: Response): Pagination {
 		return new this({
-			currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1"),
+			currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1") - 1,
 			itemsPerPage: Number(response.headers.get("X-Pagination-Per-Page") ?? "25"),
 			totalItemCount: Number(response.headers.get("X-Pagination-Total-Count") ?? "0")
 		});
@@ -120,7 +120,7 @@ export class Pagination {
 export type PaginationOptions = Partial<{
 
 	/**
-	 * The one-based current page number.
+	 * The current page index.
 	 */
 	currentPageIndex: number;
 

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

@@ -67,12 +67,25 @@ export class KeyboardAccelerator extends HTMLElement {
 		if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) return;
 
 		const {modifiers} = this;
-		if ((modifiers & KeyboardModifiers.Ctrl) != 0 && !event.ctrlKey) return;
-		if ((modifiers & KeyboardModifiers.Shift) != 0 && !event.shiftKey) return;
-		if ((modifiers & KeyboardModifiers.Alt) != 0 && !event.altKey) return;
-		if ((modifiers & KeyboardModifiers.Meta) != 0 && !event.metaKey) return;
+		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();
+		(this.firstElementChild as HTMLElement|null)?.click();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"keyboard-accelerator": KeyboardAccelerator;
 	}
 }

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/MessageBox.old

@@ -0,0 +1,242 @@
+import {Context, getIcon} from "../Context.js";
+import {Variant} from "../Variant.js";
+
+/**
+ * Specifies the return value of a message box.
+ */
+export const MessageBoxResult = Object.freeze({
+
+	/**
+	 * The message box does not return any value.
+	 */
+	None: "",
+
+	/**
+	 * The return value of the message box is "OK".
+	 */
+	OK: "OK",
+
+	/**
+	 * The return value of the message box is "Cancel".
+	 */
+	Cancel: "Cancel"
+});
+
+/**
+ * Specifies the return value of a message box.
+ */
+export type MessageBoxResult = typeof MessageBoxResult[keyof typeof MessageBoxResult];
+
+/**
+ * Displays a message window, also known as dialog box, which presents a message to the user.
+ */
+export class MessageBox extends HTMLElement {
+
+	/**
+	 * Value indicating whether to vertically center this message box.
+	 */
+	@property({type: Boolean}) centered = false;
+
+	/**
+	 * The buttons displayed in the footer.
+	 */
+	@state() private buttons: MessageBoxButton[] = [];
+
+	/**
+	 * The title displayed in the header.
+	 */
+	@state() private caption = "";
+
+	/**
+	 * The message displayed in the body.
+	 */
+	@state() private content: TemplateResult = html``;
+
+	/**
+	 * A contextual modifier.
+	 */
+	@state() private context: Context|null = null;
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	@state() private icon = "";
+
+	/**
+	 * The root element.
+	 */
+	@query("dialog", true) private readonly root!: HTMLDialogElement;
+
+	/**
+	 * The function invoked to return the dialog box result.
+	 */
+	#resolve: (value: string) => void = () => { /* Noop */ };
+
+	/**
+	 * Opens an alert dialog with the specified message and an "OK" button.
+	 * @param caption The title displayed in the header.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	alert(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		const context = options.context ?? Context.Warning;
+		return this.show(message, {
+			buttons: options.buttons ?? [{label: "OK", value: MessageBoxResult.OK}],
+			caption,
+			context,
+			icon: options.icon ?? getIcon(context)
+		});
+	}
+
+	/**
+	 * Closes the message box.
+	 * @param result The message box result.
+	 */
+	close(result: MessageBoxResult = MessageBoxResult.None): void {
+		this.root.close(result);
+	}
+
+	/**
+	 * Opens a confirmation dialog with the specified message and two buttons, "OK" and "Cancel".
+	 * @param caption The title displayed in the header.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	confirm(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		const context = options.context ?? Context.Warning;
+		return this.show(message, {
+			caption,
+			context,
+			icon: options.icon ?? getIcon(context),
+			buttons: options.buttons ?? [
+				{label: "OK", value: MessageBoxResult.OK},
+				{label: "Annuler", value: MessageBoxResult.Cancel, variant: Variant.Secondary}
+			]
+		});
+	}
+
+	/**
+	 * Opens a modal dialog with the specified message and options.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	show(message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		this.buttons = options.buttons ?? [];
+		this.caption = options.caption ?? "";
+		this.content = message;
+		this.context = options.context ?? null;
+		this.icon = options.icon ?? "";
+
+		this.root.returnValue = MessageBoxResult.None;
+		this.root.showModal();
+		this.root.querySelector<HTMLButtonElement>(".btn-close")?.blur();
+
+		const {promise, resolve} = Promise.withResolvers<string>();
+		this.#resolve = resolve;
+		return promise;
+	}
+
+	/**
+	 * Renders this component.
+	 * @returns The view template.
+	 */
+	protected override render(): TemplateResult {
+		const centered = classMap({"modal-dialog-centered": this.centered});
+		return html`
+			<dialog class="modal modal-dialog modal-dialog-scrollable ${centered}" @click=${this.#onDialogClick} @close=${this.#onDialogClose}>
+				<form class="modal-content" method="dialog">
+					<div class="modal-header user-select-none">
+						${when(this.caption, () => html`<h1 class="modal-title fs-5">${this.caption}</h1>`)}
+						<button class="btn-close"></button>
+					</div>
+					<div class="modal-body d-flex">
+						${when(this.icon, () => html`
+							<i class="icon icon-fill fs-1 fw-semibold me-2 ${classMap({[`text-${this.context}`]: this.context ?? ""})}">${this.icon}</i>
+						`)}
+						<div class="flex-grow-1">${this.content}</div>
+					</div>
+					${when(this.buttons.length, () => html`
+						<div class="modal-footer user-select-none">
+							${this.buttons.map(button => html`
+								<button class="btn btn-${button.variant ?? Variant.Primary}" value=${button.value ?? MessageBoxResult.None}>
+									${when(button.icon, () => html`<i class="icon icon-fill ${classMap({"me-1": button.label ?? ""})}">${button.icon}</i>`)}
+									${button.label}
+								</button>
+							`)}
+						</div>
+					`)}
+				</form>
+			</dialog>
+		`;
+	}
+
+	/**
+	 * Handles the `click` event.
+	 * @param event The dispatched event.
+	 */
+	#onDialogClick(event: Event): void {
+		if (event.target == this.root) this.close();
+	}
+
+	/**
+	 * Handles the `close` event.
+	 */
+	#onDialogClose(): void {
+		this.#resolve(this.root.returnValue);
+	}
+}
+
+/**
+ * A message box button.
+ */
+export type MessageBoxButton = Partial<{
+
+	/**
+	 * The button icon.
+	 */
+	icon: string;
+
+	/**
+	 * The button label.
+	 */
+	label: string;
+
+	/**
+	 * The button value.
+	 */
+	value: string;
+
+	/**
+	 * A tone variant.
+	 */
+	variant: Context|Variant;
+}>;
+
+/**
+ * Defines the options of a {@link MessageBox} instance.
+ */
+export type MessageBoxOptions = Partial<{
+
+	/**
+	 * The buttons displayed in the footer.
+	 */
+	buttons: MessageBoxButton[];
+
+	/**
+	 * The title displayed in the header.
+	 */
+	caption: string;
+
+	/**
+	 * A contextual modifier.
+	 */
+	context: Context;
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	icon: string;
+}>;

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

@@ -3,14 +3,6 @@
  */
 export class OfflineIndicator extends HTMLElement {
 
-	/**
-	 * Creates a new offline indicator.
-	 */
-	constructor() {
-		super();
-		this.#updateHiddenState();
-	}
-
 	/**
 	 * Registers the component.
 	 */
@@ -22,6 +14,7 @@ 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);
 	}
 

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

@@ -14,14 +14,14 @@ export class TabActivator extends HTMLElement {
 	}
 
 	/**
-	 * The one-based index of the active tab.
+	 * The 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));
+		const index = Number(this.storage.getItem(this.storageKey) ?? "1");
+		return Math.max(0, Math.min(this.tabs.length, Number.isNaN(index) ? 0 : index - 1));
 	}
 	set activeTabIndex(value: number) {
-		this.storage.setItem(this.storageKey, value.toString());
+		this.storage.setItem(this.storageKey, (value + 1).toString());
 	}
 
 	/**
@@ -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"]');
 	}
 
 	/**
@@ -65,8 +65,8 @@ export class TabActivator extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		const {activeTabIndex, tabs} = this;
-		for (let index = 1; index <= tabs.length; index++) {
-			const tab = tabs.item(index - 1);
+		for (let index = 0; index < tabs.length - 1; index++) {
+			const tab = tabs.item(index);
 			tab.addEventListener("click", () => this.activeTabIndex = index);
 			if (index == activeTabIndex) Tab.getOrCreateInstance(tab).show();
 		}

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

@@ -16,6 +16,14 @@ 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);
+	}
+
 	/**
 	 * Registers the component.
 	 */
@@ -102,18 +110,15 @@ export class ThemeDropdown extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		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);
+		this.#mediaQuery.addEventListener("change", this.#applyTheme);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const button of this.querySelectorAll("button")) button.removeEventListener("click", this.#setTheme);
 		this.#mediaQuery.removeEventListener("change", this.#applyTheme);
 	}
 

package/src/Client/UI/ElementExtensions.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates a document fragment from the specified HTML string.
+ * @param childContent The HTML string providing the child content.
+ * @returns The document fragment corresponding to the specified HTML string.
+ */
+export function createDocumentFragment(childContent: string): DocumentFragment {
+	const template = document.createElement("template");
+	template.innerHTML = childContent;
+	return template.content;
+}
+
+/**
+ * Returns a promise that resolves when the specified element has finished all its animations.
+ * @param element The target element.
+ * @returns The element animations.
+ */
+export function waitForAnimations(element: Element): Promise<Array<PromiseSettledResult<Animation>>> {
+	return Promise.allSettled(element.getAnimations().map(animation => animation.finished));
+}

package/src/Client/UI/Size.ts

@@ -0,0 +1,40 @@
+/**
+ * Defines the size of a component.
+ */
+export const Size = Object.freeze({
+
+	/**
+	 * An extra small size.
+	 */
+	ExtraSmall: "xs",
+
+	/**
+	 * A small size.
+	 */
+	Small: "sm",
+
+	/**
+	 * A medium size.
+	 */
+	Medium: "md",
+
+	/**
+	 * A large size.
+	 */
+	Large: "lg",
+
+	/**
+	 * An extra large size.
+	 */
+	ExtraLarge: "xl",
+
+	/**
+	 * An extra extra large size.
+	 */
+	ExtraExtraLarge: "xxl"
+});
+
+/**
+ * Defines the size of a component.
+ */
+export type Size = typeof Size[keyof typeof Size];

package/src/Client/UI/Variant.ts

@@ -0,0 +1,30 @@
+/**
+ * Defines tone variants.
+ */
+export const Variant = Object.freeze({
+
+	/**
+	 * A dark variant.
+	 */
+	Dark: "dark",
+
+	/**
+	 * A light variant.
+	 */
+	Light: "light",
+
+	/**
+	 * A primary variant.
+	 */
+	Primary: "primary",
+
+	/**
+	 * A secondary variant.
+	 */
+	Secondary: "secondary"
+});
+
+/**
+ * Defines tone variants.
+ */
+export type Variant = typeof Variant[keyof typeof Variant];

package/src/Client/UI/ViewportScroller.ts

@@ -44,7 +44,7 @@ export class ViewportScroller {
 			this.#scrollOffset += (navbar?.offsetHeight ?? 0);
 		}
 
-		const actionBar = document.body.querySelector<HTMLElement>("action-bar, .action-bar");
+		const actionBar = document.body.querySelector<HTMLElement>("action-bar");
 		return this.#scrollOffset + (actionBar?.offsetHeight ?? 0);
 	}