@cedx/base 0.19.0 → 0.21.0

package/src/Client/{DateExtensions.ts → Date.ts}

@@ -19,11 +19,13 @@ export function daysInMonth(date: Date): number {
 }
 
 /**
- * Gets the date of Easter for a given year.
- * @param year The year.
- * @returns The date of Easter for the specified year.
+ * Gets the date of Easter for the year corresponding to the specified date.
+ * @param date The date.
+ * @returns The date of Easter for the year corresponding to the specified date.
  */
-export function getEaster(year = new Date().getFullYear()): Date {
+export function getEaster(date: Date): Date {
+	const year = date.getFullYear();
+
 	/* eslint-disable id-length */
 	const n = year % 19;
 	const c = Math.trunc(year / 100);
@@ -38,12 +40,13 @@ export function getEaster(year = new Date().getFullYear()): Date {
 }
 
 /**
- * Gets the list of holidays for a given year.
- * @param year The year.
- * @returns The list of holidays for the specified year.
+ * Gets the list of holidays for the year corresponding to the specified date.
+ * @param date The date.
+ * @returns The list of holidays for the year corresponding to the specified date.
  */
-export function getHolidays(year = new Date().getFullYear()): Date[] {
+export function getHolidays(date: Date): Date[] {
 	const holidays = [];
+	const year = date.getFullYear();
 
 	// Fixed holidays.
 	holidays.push(new Date(year, 0, 1)); // New year.
@@ -56,7 +59,7 @@ export function getHolidays(year = new Date().getFullYear()): Date[] {
 	holidays.push(new Date(year, 11, 25)); // Christmas.
 
 	// Holidays depending on Easter.
-	const easter = getEaster(year);
+	const easter = getEaster(date);
 	holidays.push(new Date(easter.getTime() + Duration.Day)); // Easter monday.
 	holidays.push(new Date(easter.getTime() + (39 * Duration.Day))); // Ascension thursday.
 	holidays.push(new Date(easter.getTime() + (50 * Duration.Day))); // Pentecost monday.
@@ -101,7 +104,7 @@ export function inLeapYear(date: Date): boolean {
  */
 export function isHoliday(date: Date): boolean {
 	const timestamp = atMidnight(date).getTime();
-	return getHolidays(date.getFullYear()).some(holiday => holiday.getTime() == timestamp);
+	return getHolidays(date).some(holiday => holiday.getTime() == timestamp);
 }
 
 /**

package/src/Client/{StringExtensions.ts → String.ts}

@@ -1,14 +1,3 @@
-/**
- * The mapping between special characters and the corresponding XML entities.
- */
-const xmlEntities = new Map([
-	["&", "&"],
-	["<", "&lt;"],
-	[">", "&gt;"],
-	['"', "&quot;"],
-	["'", "&#39;"]
-]);
-
 /**
  * Converts the first character to uppercase.
  * @param value The string to process.
@@ -56,26 +45,6 @@ export function stripTags(value: string): string {
 	return value.replace(/<[^>]+>/g, "");
 }
 
-/**
- * Removes whitespace from both ends of the items of the specified array.
- * @param array The array to process.
- * @returns The input array.
- */
-export function trimArray<T>(array: T[]): T[] {
-	for (const [index, value] of array.entries()) if (typeof value == "string") Reflect.set(array, index, value.trim());
-	return array;
-}
-
-/**
- * Removes whitespace from both ends of the properties of the specified object.
- * @param object The object to process.
- * @returns The input object.
- */
-export function trimObject<T>(object: Record<string, T>): Record<string, T> {
-	for (const [key, value] of Object.entries(object)) if (typeof value == "string") Reflect.set(object, key, value.trim());
-	return object;
-}
-
 /**
  * Truncates the specified string to the given number of characters.
  * @param value The string to be truncated.
@@ -86,12 +55,3 @@ export function trimObject<T>(object: Record<string, T>): Record<string, T> {
 export function truncate(value: string, length: number, ellipsis = "..."): string {
 	return value.length > length ? value.slice(0, length) + ellipsis : value;
 }
-
-/**
- * Replaces invalid XML characters in a string with their valid XML equivalent.
- * @param value The string to process.
- * @returns The processed string.
- */
-export function xmlEscape(value: string): string {
-	return value.replace(/[&<>"']/g, character => xmlEntities.get(character) ?? character);
-}

package/src/Client/UI/Components/{MessageBox.ts → DialogBox.ts}

@@ -1,7 +1,7 @@
 import {Modal} from "bootstrap";
-import {Context, getIcon, toCss} from "../Context.js";
+import {type Context, getIcon, toCss} from "../Context.js";
 import {DialogResult} from "../DialogResult.js";
-import {createDocumentFragment} from "../ElementExtensions.js";
+import {html} from "../Tag.js";
 import {Variant} from "../Variant.js";
 import type {DialogButton, IDialogButton} from "./DialogButton.js";
 
@@ -10,56 +10,31 @@ import type {DialogButton, IDialogButton} from "./DialogButton.js";
  */
 export interface IMessage {
 
-	/**
-	 * Value indicating whether to apply a fade transition.
-	 */
-	animation?: boolean;
-
 	/**
 	 * The child content displayed in the body.
 	 */
-	body: DocumentFragment|string;
+	body: DocumentFragment;
 
 	/**
 	 * The title displayed in the header.
 	 */
 	caption: string;
 
-	/**
-	 * Value indicating whether to vertically center this message box.
-	 */
-	centered?: boolean;
-
-	/**
-	 * A contextual modifier.
-	 */
-	context?: Context;
-
 	/**
 	 * The child content displayed in the footer.
 	 */
-	footer?: DocumentFragment|string;
-
-	/**
-	 * The icon displayed next to the body.
-	 */
-	icon?: string|null;
-
-	/**
-	 * Value indicating whether the body is scrollable.
-	 */
-	scrollable?: boolean;
+	footer?: DocumentFragment;
 }
 
 /**
- * Displays a message window, also known as dialog box, which presents a message to the user.
+ * Displays a dialog box, which presents a message to the user.
  */
-export class MessageBox extends HTMLElement {
+export class DialogBox extends HTMLElement {
 
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation", "caption", "centered", "context", "icon", "modal", "scrollable"];
+	static readonly observedAttributes = ["caption", "centered", "fade", "modal", "scrollable"];
 
 	/**
 	 * The template for a button.
@@ -82,7 +57,7 @@ export class MessageBox extends HTMLElement {
 	#result: DialogResult = DialogResult.None;
 
 	/**
-	 * Creates a new message box.
+	 * Creates a new dialog box.
 	 */
 	constructor() {
 		super();
@@ -95,17 +70,7 @@ export class MessageBox extends HTMLElement {
 	 * Registers the component.
 	 */
 	static {
-		customElements.define("message-box", this);
-	}
-
-	/**
-	 * Value indicating whether to apply a fade transition.
-	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
-	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
+		customElements.define("dialog-box", this);
 	}
 
 	/**
@@ -126,7 +91,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to vertically center this message box.
+	 * Value indicating whether to vertically center this dialog box.
 	 */
 	get centered(): boolean {
 		return this.hasAttribute("centered");
@@ -136,14 +101,13 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * A contextual modifier.
+	 * Value indicating whether to apply a transition.
 	 */
-	get context(): Context {
-		const value = this.getAttribute("context") as Context;
-		return Object.values(Context).includes(value) ? value : Context.Info;
+	get fade(): boolean {
+		return this.hasAttribute("fade");
 	}
-	set context(value: Context) {
-		this.setAttribute("context", value);
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
 	}
 
 	/**
@@ -156,18 +120,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * The icon displayed next to the body.
-	 */
-	get icon(): string|null {
-		const value = this.getAttribute("icon") ?? "";
-		return value.trim() || null;
-	}
-	set icon(value: string|null) {
-		this.toggleAttribute("icon", Boolean(value));
-	}
-
-	/**
-	 * Value indicating whether to this message box will not close when clicking outside of it.
+	 * Value indicating whether to this dialog box will not close when clicking outside of it.
 	 */
 	get modal(): boolean {
 		return this.hasAttribute("modal");
@@ -177,7 +130,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to initially show this message box.
+	 * Value indicating whether to initially show this component.
 	 */
 	get open(): boolean {
 		return this.hasAttribute("open");
@@ -204,13 +157,11 @@ export class MessageBox extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "animation": this.#updateAnimation(newValue != null); break;
 			case "caption": this.#updateCaption(newValue ?? ""); break;
 			case "centered": this.#updateCentered(newValue != null); break;
-			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
-			case "icon": this.#updateIcon(newValue); break;
 			case "modal": this.#updateModal(newValue != null); break;
-			case "scrollable": this.#updateScrolling(newValue != null); break;
+			case "fade": this.#updateFade(newValue != null); break;
+			case "scrollable": this.#updateScrollable(newValue != null); break;
 			// No default
 		}
 	}
@@ -222,14 +173,14 @@ export class MessageBox extends HTMLElement {
 	 * @param body The child content displayed in the body.
 	 * @returns The dialog box result.
 	 */
-	async alert(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
-		return await this.show(context, caption, body, [
+	alert(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
+		return this.show(context, caption, this.#getBodyTemplate(context, body), [
 			{label: "OK", value: DialogResult.OK, variant: Variant.Primary}
 		]);
 	}
 
 	/**
-	 * Closes this message box.
+	 * Closes this dialog box.
 	 * @param result The dialog box result.
 	 */
 	close(result: DialogResult = DialogResult.None): void {
@@ -244,8 +195,8 @@ export class MessageBox extends HTMLElement {
 	 * @param body The child content displayed in the body.
 	 * @returns The dialog box result.
 	 */
-	async confirm(context: Context, caption: string, body: DocumentFragment|string): Promise<DialogResult> {
-		return await this.show(context, caption, body, [
+	confirm(context: Context, caption: string, body: DocumentFragment): Promise<DialogResult> {
+		return this.show(context, caption, this.#getBodyTemplate(context, body), [
 			{label: "OK", value: DialogResult.OK, variant: Variant.Primary},
 			{label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary}
 		]);
@@ -281,7 +232,7 @@ export class MessageBox extends HTMLElement {
 	 * @param buttons The buttons displayed in the footer.
 	 * @returns The dialog box result.
 	 */
-	show(context: Context, caption: string, body: DocumentFragment|string, buttons?: IDialogButton[]): Promise<DialogResult>;
+	show(context: Context, caption: string, body: DocumentFragment, buttons?: IDialogButton[]): Promise<DialogResult>;
 
 	/**
 	 * Shows a message.
@@ -291,21 +242,18 @@ export class MessageBox extends HTMLElement {
 	 * @param buttons The buttons displayed in the footer.
 	 * @returns The dialog box result.
 	 */
-	show(message: IMessage|Context|null = null, caption = "", body: DocumentFragment|string = "", buttons: IDialogButton[] = []): Promise<DialogResult> {
+	show(message: IMessage|Context|null = null, caption = "", body = document.createDocumentFragment(), buttons: IDialogButton[] = []): Promise<DialogResult> {
 		if (typeof message == "string") {
 			const footer = document.createDocumentFragment();
 			footer.append(...buttons.map(button => this.#createButton(button)));
-			message = {context: message, caption, body, footer};
+			message = {body, caption, footer};
 		}
 
-		if (typeof message == "object" && message) {
-			this.body = typeof message.body == "string" ? createDocumentFragment(message.body) : message.body;
-			this.caption = message.caption;
-			this.context = message.context ?? Context.Info;
-			this.icon = message.icon ?? getIcon(this.context);
-
-			const footer = typeof message.footer == "string" ? createDocumentFragment(message.footer) : (message.footer ?? document.createDocumentFragment());
+		if (message) {
+			const footer = message.footer ?? document.createDocumentFragment();
 			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close);
+			this.body = message.body;
+			this.caption = message.caption;
 			this.footer = footer;
 		}
 
@@ -317,7 +265,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Closes this message box.
+	 * Closes this dialog box.
 	 * @param event The dispatched event.
 	 */
 	readonly #close: (event: Event) => void = event => {
@@ -345,11 +293,18 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the message box animation.
-	 * @param value The new value.
+	 * Gets the body template corresponding to the specified context and message.
+	 * @param context The contextual modifier.
+	 * @param message The child content displayed in the body.
+	 * @returns The body template corresponding to the specified context and message.
 	 */
-	#updateAnimation(value: boolean): void {
-		this.firstElementChild!.classList.toggle("fade", value);
+	#getBodyTemplate(context: Context, message: DocumentFragment): DocumentFragment {
+		return html`
+			<div class="d-flex gap-2">
+				<i class="icon icon-fill fs-1 text-${toCss(context)}"> ${getIcon(context)}</i>
+				<div class="flex-grow-1">${message}</div>
+			</div>
+		`;
 	}
 
 	/**
@@ -361,7 +316,7 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the value indicating whether to vertically center this message box.
+	 * Updates the value indicating whether to vertically center this dialog box.
 	 * @param value The new value.
 	 */
 	#updateCentered(value: boolean): void {
@@ -369,25 +324,15 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the contextual modifier.
+	 * Updates the value indicating whether to apply a transition.
 	 * @param value The new value.
 	 */
-	#updateContext(value: Context): void {
-		const {classList} = this.querySelector(".modal-body > .icon")!;
-		classList.remove(...Object.values(Context).map(context => `text-${toCss(context)}`));
-		classList.add(`text-${toCss(value)}`);
-	}
-
-	/**
-	 * Updates the icon displayed next to the body.
-	 * @param value The new value.
-	 */
-	#updateIcon(value: string|null): void {
-		this.querySelector(".modal-body > .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
+	#updateFade(value: boolean): void {
+		this.firstElementChild!.classList.toggle("fade", value);
 	}
 
 	/**
-	 * Updates the value indicating whether to this message box will not close when clicking outside of it.
+	 * Updates the value indicating whether to this dialog box will not close when clicking outside of it.
 	 * @param value The new value.
 	 */
 	#updateModal(value: boolean): void {
@@ -395,10 +340,10 @@ export class MessageBox extends HTMLElement {
 	}
 
 	/**
-	 * Updates the body scrolling.
+	 * Updates the value indicating whether the body is scrollable.
 	 * @param value The new value.
 	 */
-	#updateScrolling(value: boolean): void {
+	#updateScrollable(value: boolean): void {
 		this.querySelector(".modal-dialog")!.classList.toggle("modal-dialog-scrollable", value);
 	}
 }
@@ -412,6 +357,6 @@ declare global {
 	 * The map of HTML tag names.
 	 */
 	interface HTMLElementTagNameMap {
-		"message-box": MessageBox;
+		"dialog-box": DialogBox;
 	}
 }

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

@@ -3,6 +3,11 @@
  */
 export class LoadingIndicator extends HTMLElement {
 
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["fade"];
+
 	/**
 	 * The number of concurrent HTTP requests.
 	 */
@@ -16,7 +21,47 @@ export class LoadingIndicator extends HTMLElement {
 	}
 
 	/**
-	 * Hides the loading indicator.
+	 * Value indicating whether to apply a transition.
+	 */
+	get fade(): boolean {
+		return this.hasAttribute("fade");
+	}
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
+	/**
+	 * Value indicating whether to initially show this component.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", 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: string, oldValue: string|null, newValue: string|null): void {
+		if (newValue != oldValue) switch (attribute) {
+			case "fade": this.#updateFade(newValue != null); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		if (this.open) this.show();
+	}
+
+	/**
+	 * Hides this loading indicator.
 	 * @param options Value indicating whether to force the loading indicator to hide.
 	 */
 	hide(options: {force?: boolean} = {}): void {
@@ -25,16 +70,26 @@ export class LoadingIndicator extends HTMLElement {
 			this.#requestCount = 0;
 			this.classList.add("hide");
 			this.classList.remove("show");
+			document.body.classList.remove("loading");
 		}
 	}
 
 	/**
-	 * Shows the loading indicator.
+	 * Shows this loading indicator.
 	 */
 	show(): void {
 		this.#requestCount++;
 		this.classList.remove("hide");
 		this.classList.add("show");
+		document.body.classList.add("loading");
+	}
+
+	/**
+	 * Updates the value indicating whether to apply a transition.
+	 * @param value The new value.
+	 */
+	#updateFade(value: boolean): void {
+		this.classList.toggle("fade", value);
 	}
 }
 

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

@@ -3,6 +3,11 @@
  */
 export class OfflineIndicator extends HTMLElement {
 
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["fade"];
+
 	/**
 	 * Registers the component.
 	 */
@@ -10,27 +15,85 @@ export class OfflineIndicator extends HTMLElement {
 		customElements.define("offline-indicator", this);
 	}
 
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	get fade(): boolean {
+		return this.hasAttribute("fade");
+	}
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
+	/**
+	 * Value indicating whether to initially show this component.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", 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: string, oldValue: string|null, newValue: string|null): void {
+		if (newValue != oldValue) switch (attribute) {
+			case "fade": this.#updateFade(newValue != null); break;
+			// No default
+		}
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		this.#update();
-		for (const event of ["online", "offline"]) addEventListener(event, this.#update);
+		for (const event of ["online", "offline"]) addEventListener(event, this.#updateVisibility);
+		if (this.open) this.show();
+		else this.#updateVisibility();
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this.#update);
+		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateVisibility);
+	}
+
+	/**
+	 * Hides this offline indicator.
+	 */
+	hide(): void {
+		this.classList.remove("show");
+		this.classList.add("hide");
+	}
+
+	/**
+	 * Shows this offline indicator.
+	 */
+	show(): void {
+		this.classList.remove("hide");
+		this.classList.add("show");
+	}
+
+	/**
+	 * Updates the value indicating whether to apply a transition.
+	 * @param value The new value.
+	 */
+	#updateFade(value: boolean): void {
+		this.classList.toggle("fade", value);
 	}
 
 	/**
-	 * Updates this component.
+	 * Updates the visibility of this component.
 	 */
-	readonly #update: () => void = () => {
-		this.classList.toggle("hide", navigator.onLine);
-		this.classList.toggle("show", !navigator.onLine);
+	readonly #updateVisibility: () => void = () => {
+		if (navigator.onLine) this.hide();
+		else this.show();
 	}
 }