@cedx/base 0.10.1 → 0.12.0

package/lib/UI/Components/Toast.js

@@ -0,0 +1,225 @@
+import { Duration } from "@cedx/base/Duration.js";
+import { Context, getIcon } from "@cedx/base/UI/Context.js";
+import { Toast as BootstrapToast } from "bootstrap";
+/**
+ * Manages the notification messages.
+ */
+export class Toast extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["caption", "context", "culture", "icon"];
+    /**
+     * The time units.
+     */
+    static #timeUnits = ["second", "minute", "hour"];
+    /**
+     * The formatter used to format the relative time.
+     */
+    #formatter;
+    /**
+     * The toast header.
+     */
+    #header = this.querySelector(".toast-header");
+    /**
+     * The time at which this component was initially shown.
+     */
+    #initialTime = Date.now();
+    /**
+     * The timer identifier.
+     */
+    #timer = 0;
+    /**
+     * The underlying Bootstrap toast.
+     */
+    #toast;
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("toaster-item", this);
+    }
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation() {
+        return this.hasAttribute("animation");
+    }
+    set animation(value) {
+        if (value)
+            this.setAttribute("animation", "");
+        else
+            this.removeAttribute("animation");
+    }
+    /**
+     * Value indicating whether to automatically hide the notification.
+     */
+    get autoHide() {
+        return this.hasAttribute("autohide");
+    }
+    set autoHide(value) {
+        if (value)
+            this.setAttribute("autohide", "");
+        else
+            this.removeAttribute("autohide");
+    }
+    /**
+     * The title displayed in the header.
+     */
+    get caption() {
+        return (this.getAttribute("caption") ?? "").trim();
+    }
+    set caption(value) {
+        this.setAttribute("caption", value);
+    }
+    /**
+     * A contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : Context.Info;
+    }
+    set context(value) {
+        this.setAttribute("context", value);
+    }
+    /**
+     * The culture used to format the relative time.
+     */
+    get culture() {
+        const value = this.getAttribute("culture") ?? "";
+        return new Intl.Locale(value.trim() || navigator.language);
+    }
+    set culture(value) {
+        this.setAttribute("culture", value.toString());
+    }
+    /**
+     * The delay, in milliseconds, to hide the notification.
+     */
+    get delay() {
+        const value = Number(this.getAttribute("delay"));
+        return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+    }
+    set delay(value) {
+        this.setAttribute("delay", value.toString());
+    }
+    /**
+     * The time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime() {
+        return Date.now() - this.#initialTime;
+    }
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || getIcon(Context.Info);
+    }
+    set icon(value) {
+        this.setAttribute("icon", value);
+    }
+    /**
+     * Method invoked when an attribute has been changed.
+     * @param attribute The attribute name.
+     * @param oldValue The previous attribute value.
+     * @param newValue The new attribute value.
+     */
+    attributeChangedCallback(attribute, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "caption":
+                    this.#updateCaption(newValue ?? "");
+                    break;
+                case "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : Context.Info);
+                    break;
+                case "culture":
+                    this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, { style: "long" });
+                    break;
+                case "icon":
+                    this.#updateIcon(newValue ?? "");
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        const toast = this.querySelector(".toast");
+        toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+        toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, Duration.Second));
+        const { animation, autoHide: autohide, delay } = this;
+        this.#toast = new BootstrapToast(toast, { animation, autohide, delay });
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        clearInterval(this.#timer);
+        this.#toast.dispose();
+    }
+    /**
+     * Hides this toast.
+     */
+    hide() {
+        this.#toast.hide();
+    }
+    /**
+     * Shows this toast.
+     */
+    show() {
+        if (!this.#toast.isShown()) {
+            this.#initialTime = Date.now();
+            this.#updateElapsedTime();
+        }
+        this.#toast.show();
+    }
+    /**
+     * Formats the specified elapsed time.
+     * @param elapsed The elapsed time, in seconds.
+     * @returns The formated time.
+     */
+    #formatTime(elapsed) {
+        let index = 0;
+        while (elapsed > 60 && index < Toast.#timeUnits.length) {
+            elapsed /= 60;
+            index++;
+        }
+        return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
+    }
+    /**
+     * Updates the title displayed in the header.
+     * @param value The new value.
+     */
+    #updateCaption(value) {
+        this.#header.querySelector("b").textContent = value.trim();
+    }
+    /**
+     * Updates the title displayed in the header.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const contexts = Object.values(Context);
+        let { classList } = this.#header;
+        classList.remove(...contexts.map(context => `toast-header-${context}`));
+        classList.add(`toast-header-${value}`);
+        ({ classList } = this.#header.querySelector(".icon"));
+        classList.remove(...contexts.map(context => `text-${context}`));
+        classList.add(`text-${value}`);
+    }
+    /**
+     * Updates the label corresponding to the elapsed time.
+     */
+    #updateElapsedTime = () => {
+        const { elapsedTime } = this;
+        this.#header.querySelector("small").textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / Duration.Second) : "";
+    };
+    /**
+     * Updates the icon displayed next to the caption.
+     * @param value The new value.
+     */
+    #updateIcon(value) {
+        this.#header.querySelector(".icon").textContent = value.trim() || getIcon(Context.Info);
+    }
+}

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/Position.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Defines the placement of an element.
+ */
+export declare const Position: Readonly<{
+    /**
+     * Top left.
+     */
+    TopLeft: "TopLeft";
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter";
+    /**
+     * Top right.
+     */
+    TopRight: "TopRight";
+    /**
+     * Middle left.
+     */
+    MiddleLeft: "MiddleLeft";
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter";
+    /**
+     * Middle right.
+     */
+    MiddleRight: "MiddleRight";
+    /**
+     * Bottom left.
+     */
+    BottomLeft: "BottomLeft";
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter";
+    /**
+     * Bottom right.
+     */
+    BottomRight: "BottomRight";
+}>;
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];
+//# sourceMappingURL=Position.d.ts.map

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

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

package/lib/UI/Position.js

@@ -0,0 +1,41 @@
+/**
+ * Defines the placement of an element.
+ */
+export const Position = Object.freeze({
+    /**
+     * Top left.
+     */
+    TopLeft: "TopLeft",
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter",
+    /**
+     * Top right.
+     */
+    TopRight: "TopRight",
+    /**
+     * Middle left.
+     */
+    MiddleLeft: "MiddleLeft",
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter",
+    /**
+     * Middle right.
+     */
+    MiddleRight: "MiddleRight",
+    /**
+     * Bottom left.
+     */
+    BottomLeft: "BottomLeft",
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter",
+    /**
+     * Bottom right.
+     */
+    BottomRight: "BottomRight"
+});

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.1",
+	"version": "0.12.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.3.1",
+		"chai": "^6.0.1",
 		"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

@@ -73,6 +73,19 @@ export class KeyboardAccelerator extends HTMLElement {
 		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;
 	}
 }