@cedx/base 0.4.1 → 0.5.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.4.1/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.5.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/Sort.d.ts

@@ -0,0 +1,144 @@
+/**
+ * Specifies the order of a sorted property.
+ */
+export declare const SortOrder: Readonly<{
+    /**
+     * The sort is ascending.
+     */
+    Ascending: "ASC";
+    /**
+     * The sort is descending.
+     */
+    Descending: "DESC";
+}>;
+/**
+ * Specifies the order of a sorted property.
+ */
+export type SortOrder = typeof SortOrder[keyof typeof SortOrder];
+/**
+ * Holds the name of a property and the order to sort by.
+ */
+export type SortProperty = [string, SortOrder];
+/**
+ * Represents information relevant to the sorting of data items.
+ */
+export declare class Sort implements Iterable<SortProperty> {
+    #private;
+    /**
+     * Creates new sort.
+     * @param properties The list of properties to be sorted.
+     */
+    constructor(properties?: SortProperty[]);
+    /**
+     * The number of properties.
+     */
+    get length(): number;
+    /**
+     * Creates a new sort from the specified property and order.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns The sort corresponding to the property and order.
+     */
+    static of(property: string, order?: SortOrder): Sort;
+    /**
+     * Creates a new sort from the specified string.
+     * @param value A string representing a sort.
+     * @returns The sort corresponding to the specified string.
+     */
+    static parse(value: string): Sort;
+    /**
+     * Returns a new iterator that allows iterating the entries of this sort.
+     * @returns An iterator over the sorted properties.
+     */
+    [Symbol.iterator](): Generator<SortProperty, void, void>;
+    /**
+     * Appends the specified property to this sort.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    append(property: string, order: SortOrder): this;
+    /**
+     * Gets the sorted property at the specified index.
+     * @param index The position in this sort.
+     * @returns The sorted property at the specified index, or `null` if it doesn't exist.
+     */
+    at(index: number): SortProperty | null;
+    /**
+     * Compares the specified objects, according to the current sort properties.
+     * @param x The first object to compare.
+     * @param y The second object to compare.
+     * @returns A value indicating the relationship between the two objects.
+     */
+    compare(x: object, y: object): number;
+    /**
+     * Removes the specified property from this sort.
+     * @param property The property name.
+     */
+    delete(property: string): void;
+    /**
+     * Gets the order associated with the specified property.
+     * @param property The property name.
+     * @returns The order associated with the specified property, or `null` if the property doesn't exist.
+     */
+    get(property: string): SortOrder | null;
+    /**
+     * Gets the icon corresponding to the specified property.
+     * @param property The property name.
+     * @returns The icon corresponding to the specified property.
+     */
+    getIcon(property: string): string;
+    /**
+     * Returns a value indicating whether the specified property exists in this sort.
+     * @param property The property name.
+     * @returns `true` if the specified property exists in this sort, otherwise `false`.
+     */
+    has(property: string): boolean;
+    /**
+     * Gets the index of the specified property in the underlying list.
+     * @param property The property name.
+     * @returns The index of the specified property, or `-1` if the property is not found.
+     */
+    indexOf(property: string): number;
+    /**
+     * Prepends the specified property to this sort.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    prepend(property: string, order: SortOrder): this;
+    /**
+     * Returns a value indicating whether the current sort satisfies the specified conditions.
+     * @param conditions The conditions to satisfy.
+     * @returns `true` if the current sort satisfies the specified conditions, otherwise `false`.
+     */
+    satisfies(conditions?: Partial<{
+        min: number;
+        max: number;
+        properties: string[];
+    }>): boolean;
+    /**
+     * Sets the order of the specified property.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    set(property: string, order: SortOrder): this;
+    /**
+     * Returns a JSON representation of this object.
+     * @returns The JSON representation of this object.
+     */
+    toJSON(): string;
+    /**
+     * Converts this sort to an SQL clause.
+     * @param escape A function used to escape the SQL identifiers.
+     * @returns The SQL clause corresponding to this object.
+     */
+    toSql(escape?: (identifier: string) => string): string;
+    /**
+     * Returns a string representation of this object.
+     * @returns The string representation of this object.
+     */
+    toString(): string;
+}
+//# sourceMappingURL=Sort.d.ts.map

package/lib/Data/Sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sort.d.ts","sourceRoot":"","sources":["../../src/Client/Data/Sort.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,SAAS;IAErB;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AAEjE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE/C;;GAEG;AACH,qBAAa,IAAK,YAAW,QAAQ,CAAC,YAAY,CAAC;;IAOlD;;;OAGG;gBACS,UAAU,GAAE,YAAY,EAAO;IAI3C;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,GAAE,SAA+B,GAAG,IAAI;IAIzE;;;;OAIG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOjC;;;OAGG;IACF,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,SAAS,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC;IAIzD;;;;;OAKG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;IAMhD;;;;OAIG;IACH,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,YAAY,GAAC,IAAI;IAIpC;;;;;OAKG;IACH,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM;IAWrC;;;OAGG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAI9B;;;;OAIG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,GAAC,IAAI;IAKrC;;;;OAIG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAQjC;;;;OAIG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAI9B;;;;OAIG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAKjC;;;;;OAKG;IACH,OAAO,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;IAMjD;;;;OAIG;IACH,SAAS,CAAC,UAAU,GAAE,OAAO,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,EAAE,CAAA;KAAC,CAAM,GAAG,OAAO;IAW9F;;;;;OAKG;IACH,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,IAAI;IAS7C;;;OAGG;IACH,MAAM,IAAI,MAAM;IAIhB;;;;OAIG;IACH,KAAK,CAAC,MAAM,GAAE,CAAC,UAAU,EAAE,MAAM,KAAK,MAAiB,GAAG,MAAM;IAIhE;;;OAGG;IACH,QAAQ,IAAI,MAAM;CAGlB"}

package/lib/Data/Sort.js

@@ -0,0 +1,209 @@
+/**
+ * Specifies the order of a sorted property.
+ */
+export const SortOrder = Object.freeze({
+    /**
+     * The sort is ascending.
+     */
+    Ascending: "ASC",
+    /**
+     * The sort is descending.
+     */
+    Descending: "DESC"
+});
+/**
+ * Represents information relevant to the sorting of data items.
+ */
+export class Sort {
+    /**
+     * The list of sorted properties.
+     */
+    #properties;
+    /**
+     * Creates new sort.
+     * @param properties The list of properties to be sorted.
+     */
+    constructor(properties = []) {
+        this.#properties = properties;
+    }
+    /**
+     * The number of properties.
+     */
+    get length() {
+        return this.#properties.length;
+    }
+    /**
+     * Creates a new sort from the specified property and order.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns The sort corresponding to the property and order.
+     */
+    static of(property, order = SortOrder.Ascending) {
+        return new this([[property, order]]);
+    }
+    /**
+     * Creates a new sort from the specified string.
+     * @param value A string representing a sort.
+     * @returns The sort corresponding to the specified string.
+     */
+    static parse(value) {
+        return new this((value ? value.split(",") : []).map(item => {
+            const order = item.startsWith("-") ? SortOrder.Descending : SortOrder.Ascending;
+            return [order == SortOrder.Ascending ? item : item.slice(1), order];
+        }));
+    }
+    /**
+     * Returns a new iterator that allows iterating the entries of this sort.
+     * @returns An iterator over the sorted properties.
+     */
+    *[Symbol.iterator]() {
+        for (const entry of this.#properties)
+            yield entry;
+    }
+    /**
+     * Appends the specified property to this sort.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    append(property, order) {
+        this.delete(property);
+        this.#properties.push([property, order]);
+        return this;
+    }
+    /**
+     * Gets the sorted property at the specified index.
+     * @param index The position in this sort.
+     * @returns The sorted property at the specified index, or `null` if it doesn't exist.
+     */
+    at(index) {
+        return this.#properties.at(index) ?? null;
+    }
+    /**
+     * Compares the specified objects, according to the current sort properties.
+     * @param x The first object to compare.
+     * @param y The second object to compare.
+     * @returns A value indicating the relationship between the two objects.
+     */
+    compare(x, y) {
+        for (const [property, order] of this.#properties) {
+            const xAttr = Reflect.get(x, property); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+            const yAttr = Reflect.get(y, property); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+            const value = xAttr > yAttr ? 1 : (xAttr < yAttr ? -1 : 0);
+            if (value)
+                return order == SortOrder.Ascending ? value : -value;
+        }
+        return 0;
+    }
+    /**
+     * Removes the specified property from this sort.
+     * @param property The property name.
+     */
+    delete(property) {
+        this.#properties = this.#properties.filter(([key]) => key != property);
+    }
+    /**
+     * Gets the order associated with the specified property.
+     * @param property The property name.
+     * @returns The order associated with the specified property, or `null` if the property doesn't exist.
+     */
+    get(property) {
+        for (const [key, order] of this.#properties)
+            if (key == property)
+                return order;
+        return null;
+    }
+    /**
+     * Gets the icon corresponding to the specified property.
+     * @param property The property name.
+     * @returns The icon corresponding to the specified property.
+     */
+    getIcon(property) {
+        switch (this.get(property)) {
+            case SortOrder.Ascending: return "arrow_upward";
+            case SortOrder.Descending: return "arrow_downward";
+            default: return "swap_vert";
+        }
+    }
+    /**
+     * Returns a value indicating whether the specified property exists in this sort.
+     * @param property The property name.
+     * @returns `true` if the specified property exists in this sort, otherwise `false`.
+     */
+    has(property) {
+        return this.#properties.some(([key]) => key == property);
+    }
+    /**
+     * Gets the index of the specified property in the underlying list.
+     * @param property The property name.
+     * @returns The index of the specified property, or `-1` if the property is not found.
+     */
+    indexOf(property) {
+        for (const [index, [key]] of this.#properties.entries())
+            if (key == property)
+                return index;
+        return -1;
+    }
+    /**
+     * Prepends the specified property to this sort.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    prepend(property, order) {
+        this.delete(property);
+        this.#properties.unshift([property, order]);
+        return this;
+    }
+    /**
+     * Returns a value indicating whether the current sort satisfies the specified conditions.
+     * @param conditions The conditions to satisfy.
+     * @returns `true` if the current sort satisfies the specified conditions, otherwise `false`.
+     */
+    satisfies(conditions = {}) {
+        const min = conditions.min ?? -1;
+        if (min >= 0)
+            return this.length >= min;
+        const max = conditions.max ?? -1;
+        if (max >= 0)
+            return this.length <= max;
+        const properties = conditions.properties ?? [];
+        return properties.length ? this.#properties.every(([key]) => properties.includes(key)) : true;
+    }
+    /**
+     * Sets the order of the specified property.
+     * @param property The property name.
+     * @param order The sort order.
+     * @returns This instance.
+     */
+    set(property, order) {
+        for (const [index, [key]] of this.#properties.entries())
+            if (key == property) {
+                this.#properties[index] = [key, order];
+                return this;
+            }
+        return this.append(property, order);
+    }
+    /**
+     * Returns a JSON representation of this object.
+     * @returns The JSON representation of this object.
+     */
+    toJSON() {
+        return this.toString();
+    }
+    /**
+     * Converts this sort to an SQL clause.
+     * @param escape A function used to escape the SQL identifiers.
+     * @returns The SQL clause corresponding to this object.
+     */
+    toSql(escape = id => id) {
+        return this.#properties.map(([property, order]) => `${escape(property)} ${order}`).join(", ");
+    }
+    /**
+     * Returns a string representation of this object.
+     * @returns The string representation of this object.
+     */
+    toString() {
+        return this.#properties.map(([property, order]) => `${order == SortOrder.Descending ? "-" : ""}${property}`).join();
+    }
+}

package/lib/DependencyInjection/Container.js

@@ -27,7 +27,7 @@ export class Container {
     get(id) {
         if (!this.#services.has(id))
             if (this.#factories.has(id))
-                this.set(id, this.#factories.get(id)());
+                this.set(id, this.#factories.get(id).call(this));
             else if (typeof id == "function")
                 this.set(id, Reflect.construct(id, []));
             else

package/lib/Html/Context.d.ts

@@ -28,5 +28,5 @@ export type Context = typeof Context[keyof typeof Context];
  * @param context The context.
  * @returns The icon corresponding to the specified context.
  */
-export declare function contextIcon(context: Context): string;
+export declare function getIcon(context: Context): string;
 //# sourceMappingURL=Context.d.ts.map

package/lib/Html/Context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/Html/Context.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,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOpD"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Client/Html/Context.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,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAOhD"}

package/lib/Html/Context.js

@@ -24,7 +24,7 @@ export const Context = Object.freeze({
  * @param context The context.
  * @returns The icon corresponding to the specified context.
  */
-export function contextIcon(context) {
+export function getIcon(context) {
     switch (context) {
         case Context.Danger: return "error";
         case Context.Success: return "check_circle";

package/lib/UI/ActionBar.d.ts

@@ -0,0 +1,25 @@
+/**
+ * An action bar located under the navigation bar.
+ */
+export declare class ActionBar extends HTMLElement {
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "action-bar": ActionBar;
+    }
+}
+//# sourceMappingURL=ActionBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/Client/UI/ActionBar.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;IASzC;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAG5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/lib/UI/ActionBar.js

@@ -0,0 +1,25 @@
+/**
+ * An action bar located under the navigation bar.
+ */
+export class ActionBar extends HTMLElement {
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("action-bar", this);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        const navbarHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--navbar-height"));
+        const mainOffset = this.offsetHeight + (Number.isNaN(navbarHeight) ? 0 : navbarHeight);
+        document.documentElement.style.setProperty("--main-offset", `${mainOffset}px`);
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        document.documentElement.style.removeProperty("--main-offset");
+    }
+}

package/lib/UI/MenuActivator.js

@@ -12,7 +12,7 @@ export class MenuActivator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        for (const anchor of this.firstElementChild.getElementsByTagName("a"))
+        for (const anchor of this.querySelectorAll("a"))
             if (anchor.href != location.href)
                 anchor.classList.remove("active");
             else {

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../src/Client/UI/ThemeDropdown.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAsB7C;;OAEG;;IAeH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CA2BnB;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/ThemeDropdown.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAiB7C;;OAEG;;IAeH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;OAEG;IACH,WAAW,IAAI,IAAI;CAuBnB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/ThemeDropdown.js

@@ -7,10 +7,6 @@ export class ThemeDropdown extends HTMLElement {
      * The media query used to check the application theme.
      */
     #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
-    /**
-     * The root element.
-     */
-    #root = this.firstElementChild;
     /**
      * The key of the storage entry providing the saved theme mode.
      */
@@ -26,7 +22,7 @@ export class ThemeDropdown extends HTMLElement {
         super();
         const theme = localStorage.getItem(this.#storageKey);
         this.#theme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
-        for (const button of this.#root.querySelectorAll("button"))
+        for (const button of this.querySelectorAll("button"))
             button.addEventListener("click", this.#setTheme.bind(this));
     }
     /**
@@ -60,11 +56,8 @@ export class ThemeDropdown extends HTMLElement {
     #applyTheme() {
         const theme = this.#theme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.#theme;
         document.documentElement.dataset.bsTheme = theme.toLowerCase();
-        this.#root.querySelector(".dropdown-toggle > .icon").textContent = getIcon(this.#theme);
-        const checkIcon = this.#root.querySelector(".dropdown-item > .icon");
-        checkIcon.remove();
-        const activeButton = this.#root.querySelector(`button[data-theme="${this.#theme}"]`);
-        activeButton.appendChild(checkIcon);
+        this.querySelector(".dropdown-toggle > .icon").textContent = getIcon(this.#theme);
+        this.querySelector(`button[data-theme="${this.#theme}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
     }
     /**
      * Changes the current theme.

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.4.1",
+	"version": "0.5.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.54.2",
 		"@types/bootstrap": "^5.2.10",
@@ -50,8 +50,7 @@
 		"library"
 	],
 	"peerDependencies": {
-		"bootstrap": ">=5.3.0",
-		"tslib": ">=2.8.0"
+		"bootstrap": ">=5.3.0"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/Client/Data/Pagination.new

@@ -0,0 +1,130 @@
+/**
+ * Represents information relevant to the pagination of data items.
+ */
+export class Pagination {
+
+	/**
+	 * The current page number.
+	 */
+	currentPage: number;
+
+	/**
+	 * The number of items per page.
+	 */
+	itemsPerPage: number;
+
+	/**
+	 * The total number of items.
+	 */
+	totalItemCount: number;
+
+	/**
+	 * Creates a new pagination.
+	 * @param options An object providing values to initialize this instance.
+	 */
+	constructor(options: PaginationOptions = {}) {
+		this.currentPage = Math.max(1, options.currentPage ?? 1);
+		this.itemsPerPage = Math.max(1, Math.min(1000, options.itemsPerPage ?? 25));
+		this.totalItemCount = Math.max(0, options.totalItemCount ?? 0);
+	}
+
+	/**
+	 * The last page number.
+	 */
+	get lastPage(): number {
+		return Math.ceil(this.totalItemCount / this.itemsPerPage);
+	}
+
+	/**
+	 * The data limit.
+	 */
+	get limit(): number {
+		return this.itemsPerPage;
+	}
+
+	/**
+	 * The data offset.
+	 */
+	get offset(): number {
+		return (this.currentPage - 1) * this.itemsPerPage;
+	}
+
+	/**
+	 * The search parameters corresponding to this object.
+	 */
+	get searchParams(): URLSearchParams {
+		return new URLSearchParams({page: this.currentPage.toString(), perPage: this.itemsPerPage.toString()});
+	}
+
+	/**
+	 * Creates a new pagination from the HTTP headers of the specified response.
+	 * @param response A server response.
+	 * @returns The pagination corresponding to the HTTP headers of the specified response.
+	 */
+	static fromResponse(response: Response): Pagination {
+		return new this({
+			currentPage: Number(response.headers.get("X-Pagination-Current-Page") ?? "1"),
+			itemsPerPage: Number(response.headers.get("X-Pagination-Per-Page") ?? "25"),
+			totalItemCount: Number(response.headers.get("X-Pagination-Total-Count") ?? "0")
+		});
+	}
+}
+
+/**
+ * Defines the options of a {@link Pagination} instance.
+ */
+export type PaginationOptions = Partial<Pick<Pagination, "currentPage"|"itemsPerPage"|"totalItemCount">>;
+
+/**
+ * A list with information relevant to the pagination of its items.
+ */
+export class PaginatedList<T> implements Iterable<T, void, void> {
+
+	/**
+	 * The list items.
+	 */
+	items: T[];
+
+	/**
+	 * The information relevant to the pagination of the list items.
+	 */
+	pagination: Pagination;
+
+	/**
+	 * Creates a new paginated list.
+	 * @param options An object providing values to initialize this instance.
+	 */
+	constructor(options: PaginatedListOptions<T> = {}) {
+		this.items = options.items ?? [];
+		this.pagination = options.pagination ?? new Pagination;
+	}
+
+	/**
+	 * The number of items in this list.
+	 */
+	get length(): number {
+		return this.items.length;
+	}
+
+	/**
+	 * Creates an empty paginated list.
+	 * @param itemsPerPage The number of items per page.
+	 * @returns An empty paginated list with the specified number of items per page.
+	 */
+	static empty<T>(itemsPerPage: number): PaginatedList<T> {
+		return new this({pagination: new Pagination({itemsPerPage})});
+	}
+
+	/**
+	 * Returns a new iterator that allows iterating the items of this list.
+	 * @returns An iterator over the items of this list.
+	 */
+	*[Symbol.iterator](): Generator<T, void, void> {
+		for (const item of this.items) yield item;
+	}
+}
+
+/**
+ * Defines the options of a {@link PaginatedList} instance.
+ */
+export type PaginatedListOptions<T> = Partial<Pick<PaginatedList<T>, "items"|"pagination">>;

package/src/Client/Data/Sort.ts

@@ -0,0 +1,237 @@
+/**
+ * Specifies the order of a sorted property.
+ */
+export const SortOrder = Object.freeze({
+
+	/**
+	 * The sort is ascending.
+	 */
+	Ascending: "ASC",
+
+	/**
+	 * The sort is descending.
+	 */
+	Descending: "DESC"
+});
+
+/**
+ * Specifies the order of a sorted property.
+ */
+export type SortOrder = typeof SortOrder[keyof typeof SortOrder];
+
+/**
+ * Holds the name of a property and the order to sort by.
+ */
+export type SortProperty = [string, SortOrder];
+
+/**
+ * Represents information relevant to the sorting of data items.
+ */
+export class Sort implements Iterable<SortProperty> {
+
+	/**
+	 * The list of sorted properties.
+	 */
+	#properties: SortProperty[];
+
+	/**
+	 * Creates new sort.
+	 * @param properties The list of properties to be sorted.
+	 */
+	constructor(properties: SortProperty[] = []) {
+		this.#properties = properties;
+	}
+
+	/**
+	 * The number of properties.
+	 */
+	get length(): number {
+		return this.#properties.length;
+	}
+
+	/**
+	 * Creates a new sort from the specified property and order.
+	 * @param property The property name.
+	 * @param order The sort order.
+	 * @returns The sort corresponding to the property and order.
+	 */
+	static of(property: string, order: SortOrder = SortOrder.Ascending): Sort {
+		return new this([[property, order]]);
+	}
+
+	/**
+	 * Creates a new sort from the specified string.
+	 * @param value A string representing a sort.
+	 * @returns The sort corresponding to the specified string.
+	 */
+	static parse(value: string): Sort {
+		return new this((value ? value.split(",") : []).map(item => {
+			const order = item.startsWith("-") ? SortOrder.Descending : SortOrder.Ascending;
+			return [order == SortOrder.Ascending ? item : item.slice(1), order];
+		}));
+	}
+
+	/**
+	 * Returns a new iterator that allows iterating the entries of this sort.
+	 * @returns An iterator over the sorted properties.
+	 */
+	*[Symbol.iterator](): Generator<SortProperty, void, void> {
+		for (const entry of this.#properties) yield entry;
+	}
+
+	/**
+	 * Appends the specified property to this sort.
+	 * @param property The property name.
+	 * @param order The sort order.
+	 * @returns This instance.
+	 */
+	append(property: string, order: SortOrder): this {
+		this.delete(property);
+		this.#properties.push([property, order]);
+		return this;
+	}
+
+	/**
+	 * Gets the sorted property at the specified index.
+	 * @param index The position in this sort.
+	 * @returns The sorted property at the specified index, or `null` if it doesn't exist.
+	 */
+	at(index: number): SortProperty|null {
+		return this.#properties.at(index) ?? null;
+	}
+
+	/**
+	 * Compares the specified objects, according to the current sort properties.
+	 * @param x The first object to compare.
+	 * @param y The second object to compare.
+	 * @returns A value indicating the relationship between the two objects.
+	 */
+	compare(x: object, y: object): number {
+		for (const [property, order] of this.#properties) {
+			const xAttr = Reflect.get(x, property); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+			const yAttr = Reflect.get(y, property); // eslint-disable-line @typescript-eslint/no-unsafe-assignment
+			const value = xAttr > yAttr ? 1 : (xAttr < yAttr ? -1 : 0);
+			if (value) return order == SortOrder.Ascending ? value : -value;
+		}
+
+		return 0;
+	}
+
+	/**
+	 * Removes the specified property from this sort.
+	 * @param property The property name.
+	 */
+	delete(property: string): void {
+		this.#properties = this.#properties.filter(([key]) => key != property);
+	}
+
+	/**
+	 * Gets the order associated with the specified property.
+	 * @param property The property name.
+	 * @returns The order associated with the specified property, or `null` if the property doesn't exist.
+	 */
+	get(property: string): SortOrder|null {
+		for (const [key, order] of this.#properties) if (key == property) return order;
+		return null;
+	}
+
+	/**
+	 * Gets the icon corresponding to the specified property.
+	 * @param property The property name.
+	 * @returns The icon corresponding to the specified property.
+	 */
+	getIcon(property: string): string {
+		switch (this.get(property)) {
+			case SortOrder.Ascending: return "arrow_upward";
+			case SortOrder.Descending: return "arrow_downward";
+			default: return "swap_vert";
+		}
+	}
+
+	/**
+	 * Returns a value indicating whether the specified property exists in this sort.
+	 * @param property The property name.
+	 * @returns `true` if the specified property exists in this sort, otherwise `false`.
+	 */
+	has(property: string): boolean {
+		return this.#properties.some(([key]) => key == property);
+	}
+
+	/**
+	 * Gets the index of the specified property in the underlying list.
+	 * @param property The property name.
+	 * @returns The index of the specified property, or `-1` if the property is not found.
+	 */
+	indexOf(property: string): number {
+		for (const [index, [key]] of this.#properties.entries()) if (key == property) return index;
+		return -1;
+	}
+
+	/**
+	 * Prepends the specified property to this sort.
+	 * @param property The property name.
+	 * @param order The sort order.
+	 * @returns This instance.
+	 */
+	prepend(property: string, order: SortOrder): this {
+		this.delete(property);
+		this.#properties.unshift([property, order]);
+		return this;
+	}
+
+	/**
+	 * Returns a value indicating whether the current sort satisfies the specified conditions.
+	 * @param conditions The conditions to satisfy.
+	 * @returns `true` if the current sort satisfies the specified conditions, otherwise `false`.
+	 */
+	satisfies(conditions: Partial<{min: number, max: number, properties: string[]}> = {}): boolean {
+		const min = conditions.min ?? -1;
+		if (min >= 0) return this.length >= min;
+
+		const max = conditions.max ?? -1;
+		if (max >= 0) return this.length <= max;
+
+		const properties = conditions.properties ?? [];
+		return properties.length ? this.#properties.every(([key]) => properties.includes(key)) : true;
+	}
+
+	/**
+	 * Sets the order of the specified property.
+	 * @param property The property name.
+	 * @param order The sort order.
+	 * @returns This instance.
+	 */
+	set(property: string, order: SortOrder): this {
+		for (const [index, [key]] of this.#properties.entries()) if (key == property) {
+			this.#properties[index] = [key, order];
+			return this;
+		}
+
+		return this.append(property, order);
+	}
+
+	/**
+	 * Returns a JSON representation of this object.
+	 * @returns The JSON representation of this object.
+	 */
+	toJSON(): string {
+		return this.toString();
+	}
+
+	/**
+	 * Converts this sort to an SQL clause.
+	 * @param escape A function used to escape the SQL identifiers.
+	 * @returns The SQL clause corresponding to this object.
+	 */
+	toSql(escape: (identifier: string) => string = id => id): string {
+		return this.#properties.map(([property, order]) => `${escape(property)} ${order}`).join(", ");
+	}
+
+	/**
+	 * Returns a string representation of this object.
+	 * @returns The string representation of this object.
+	 */
+	toString(): string {
+		return this.#properties.map(([property, order]) => `${order == SortOrder.Descending ? "-" : ""}${property}`).join();
+	}
+}

package/src/Client/Data/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	"extends": "../../../tsconfig.json",
+	"include": ["*.ts"],
+	"compilerOptions": {
+		"composite": true,
+		"declaration": true,
+		"declarationMap": true,
+		"noEmit": false,
+		"outDir": "../../../lib/Data",
+		"rootDir": ".",
+		"tsBuildInfoFile": "../../../var/Data.tsbuildinfo"
+	}
+}

package/src/Client/DependencyInjection/Container.ts

@@ -30,7 +30,7 @@ export class Container {
 	 */
 	get<T>(id: ContainerToken): T { // eslint-disable-line @typescript-eslint/no-unnecessary-type-parameters
 		if (!this.#services.has(id))
-			if (this.#factories.has(id)) this.set(id, this.#factories.get(id)!());
+			if (this.#factories.has(id)) this.set(id, this.#factories.get(id)!.call(this));
 			else if (typeof id == "function") this.set(id, Reflect.construct(id, []));
 			else throw Error("There is no factory registered with the specified identifier.");
 

package/src/Client/Html/Context.ts

@@ -34,7 +34,7 @@ export type Context = typeof Context[keyof typeof Context];
  * @param context The context.
  * @returns The icon corresponding to the specified context.
  */
-export function contextIcon(context: Context): string {
+export function getIcon(context: Context): string {
 	switch (context) {
 		case Context.Danger: return "error";
 		case Context.Success: return "check_circle";

package/src/Client/UI/ActionBar.ts

@@ -0,0 +1,41 @@
+/**
+ * An action bar located under the navigation bar.
+ */
+export class ActionBar extends HTMLElement {
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("action-bar", this);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		const navbarHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--navbar-height"));
+		const mainOffset = this.offsetHeight + (Number.isNaN(navbarHeight) ? 0 : navbarHeight);
+		document.documentElement.style.setProperty("--main-offset", `${mainOffset}px`);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		document.documentElement.style.removeProperty("--main-offset");
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"action-bar": ActionBar;
+	}
+}

package/src/Client/UI/MenuActivator.ts

@@ -14,7 +14,7 @@ export class MenuActivator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const anchor of this.firstElementChild!.getElementsByTagName("a"))
+		for (const anchor of this.querySelectorAll("a"))
 			if (anchor.href != location.href) anchor.classList.remove("active");
 			else {
 				anchor.classList.add("active");

package/src/Client/UI/ThemeDropdown.ts

@@ -10,11 +10,6 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 
-	/**
-	 * The root element.
-	 */
-	readonly #root = this.firstElementChild!;
-
 	/**
 	 * The key of the storage entry providing the saved theme mode.
 	 */
@@ -32,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 		super();
 		const theme = localStorage.getItem(this.#storageKey) as AppTheme;
 		this.#theme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
-		for (const button of this.#root.querySelectorAll("button")) button.addEventListener("click", this.#setTheme.bind(this));
+		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme.bind(this));
 	}
 
 	/**
@@ -70,12 +65,8 @@ export class ThemeDropdown extends HTMLElement {
 	#applyTheme(): void {
 		const theme = this.#theme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.#theme;
 		document.documentElement.dataset.bsTheme = theme.toLowerCase();
-		this.#root.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(this.#theme);
-
-		const checkIcon = this.#root.querySelector(".dropdown-item > .icon")!;
-		checkIcon.remove();
-		const activeButton = this.#root.querySelector(`button[data-theme="${this.#theme}"]`)!
-		activeButton.appendChild(checkIcon);
+		this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(this.#theme);
+		this.querySelector(`button[data-theme="${this.#theme}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
 	}
 
 	/**

package/src/Client/UI/tsconfig.json

@@ -5,12 +5,10 @@
 		"composite": true,
 		"declaration": true,
 		"declarationMap": true,
-		"importHelpers": true,
 		"noEmit": false,
 		"outDir": "../../../lib/UI",
 		"rootDir": ".",
-		"tsBuildInfoFile": "../../../var/UI.tsbuildinfo",
-		"useDefineForClassFields": false
+		"tsBuildInfoFile": "../../../var/UI.tsbuildinfo"
 	},
 	"references": [
 		{"path": "../Abstractions/tsconfig.json"},

package/src/Client/tsconfig.json

@@ -3,6 +3,7 @@
 	"references": [
 		{"path": "Abstractions/tsconfig.json"},
 		{"path": "Base/tsconfig.json"},
+		{"path": "Data/tsconfig.json"},
 		{"path": "DependencyInjection/tsconfig.json"},
 		{"path": "Html/tsconfig.json"},
 		{"path": "Http/tsconfig.json"},