@cedx/base 0.15.3 → 0.17.0

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

@@ -1,6 +1,52 @@
 import {Toast as BootstrapToast} from "bootstrap";
 import {Context, getIcon, toCss} from "../Context.js";
 
+/**
+ * Represents a notification.
+ */
+export interface IToast {
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	animation?: boolean;
+
+	/**
+	 * Value indicating whether to automatically hide the toast.
+	 */
+	autoHide?: boolean;
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	body: DocumentFragment|string;
+
+	/**
+	 * The title displayed in the header.
+	 */
+	caption: string;
+
+	/**
+	 * The default contextual modifier.
+	 */
+	context?: Context;
+
+	/**
+	 * The culture used to format the relative time.
+	 */
+	culture?: Intl.Locale;
+
+	/**
+	 * The delay, in milliseconds, to hide the toast.
+	 */
+	delay?: number;
+
+	/**
+	 * The icon displayed next to the caption.
+	 */
+	icon?: string|null;
+}
+
 /**
  * Represents a notification.
  */
@@ -9,7 +55,7 @@ export class Toast extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["caption", "context", "culture", "icon", "open"];
+	static readonly observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
 
 	/**
 	 * The time units.
@@ -50,8 +96,7 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("animation");
 	}
 	set animation(value: boolean) {
-		if (value) this.setAttribute("animation", "");
-		else this.removeAttribute("animation");
+		this.toggleAttribute("animation", value);
 	}
 
 	/**
@@ -61,8 +106,14 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("autohide");
 	}
 	set autoHide(value: boolean) {
-		if (value) this.setAttribute("autohide", "");
-		else this.removeAttribute("autohide");
+		this.toggleAttribute("autohide", value);
+	}
+
+	/**
+	 * The child content displayed in the body.
+	 */
+	set body(value: DocumentFragment) { // eslint-disable-line accessor-pairs
+		this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
 	}
 
 	/**
@@ -75,13 +126,6 @@ export class Toast extends HTMLElement {
 		this.setAttribute("caption", value);
 	}
 
-	/**
-	 * The child content displayed in the body.
-	 */
-	set childContent(value: DocumentFragment) { // eslint-disable-line accessor-pairs
-		this.querySelector(".toast-body")!.replaceChildren(...value.childNodes);
-	}
-
 	/**
 	 * A contextual modifier.
 	 */
@@ -125,12 +169,12 @@ export class Toast extends HTMLElement {
 	/**
 	 * The icon displayed next to the caption.
 	 */
-	get icon(): string {
+	get icon(): string|null {
 		const value = this.getAttribute("icon") ?? "";
-		return value.trim() || getIcon(this.context);
+		return value.trim() || null;
 	}
-	set icon(value: string) {
-		this.setAttribute("icon", value);
+	set icon(value: string|null) {
+		this.toggleAttribute("icon", Boolean(value));
 	}
 
 	/**
@@ -140,8 +184,7 @@ export class Toast extends HTMLElement {
 		return this.hasAttribute("open");
 	}
 	set open(value: boolean) {
-		if (value) this.setAttribute("open", "");
-		else this.removeAttribute("open");
+		this.toggleAttribute("open", value);
 	}
 
 	/**
@@ -152,29 +195,28 @@ export class Toast extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "caption":
-				this.#updateCaption(newValue ?? "");
-				break;
-			case "context":
-				this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info);
-				break;
-			case "culture":
-				this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"});
-				break;
-			case "icon":
-				this.#updateIcon(newValue ?? "");
-				break;
-			case "open":
-				this.#updateVisibility();
+			case "animation": this.#updateAnimation(newValue != null); break;
+			case "caption": this.#updateCaption(newValue ?? ""); break;
+			case "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info); break;
+			case "culture": this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"}); break;
+			case "icon": this.#updateIcon(newValue); break;
+			case "open": this.#updateVisibility(newValue != null); break;
 			// No default
 		}
 	}
 
+	/**
+	 * Closes this toast.
+	 */
+	close(): void {
+		this.#toast.hide();
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		const toast = this.querySelector(".toast")!;
+		const toast = this.firstElementChild!;
 		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
 		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, 1_000));
 
@@ -190,13 +232,6 @@ export class Toast extends HTMLElement {
 		this.#toast.dispose();
 	}
 
-	/**
-	 * Hides this toast.
-	 */
-	hide(): void {
-		this.#toast.hide();
-	}
-
 	/**
 	 * Shows this toast.
 	 */
@@ -224,6 +259,14 @@ export class Toast extends HTMLElement {
 		return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
 	}
 
+	/**
+	 * Updates the toast animation.
+	 * @param value The new value.
+	 */
+	#updateAnimation(value: boolean): void {
+		this.firstElementChild!.classList.toggle("fade", value);
+	}
+
 	/**
 	 * Updates the title displayed in the header.
 	 * @param value The new value.
@@ -233,7 +276,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Updates the title displayed in the header.
+	 * Updates the contextual modifier.
 	 * @param value The new value.
 	 */
 	#updateContext(value: Context): void {
@@ -260,20 +303,16 @@ export class Toast extends HTMLElement {
 	 * Updates the icon displayed next to the caption.
 	 * @param value The new value.
 	 */
-	#updateIcon(value: string): void {
-		this.querySelector(".toast-header .icon")!.textContent = value.trim() || getIcon(this.context);
+	#updateIcon(value: string|null): void {
+		this.querySelector(".toast-header .icon")!.textContent = (value ?? "").trim() || getIcon(this.context);
 	}
 
 	/**
 	 * Updates the toast visibility.
+	 * @param value The new value.
 	 */
-	#updateVisibility(): void {
-		const {classList} = this.firstElementChild!;
-		if (!this.open) classList.remove("show");
-		else {
-			if (this.animation) classList.add("fade");
-			classList.add("show");
-		}
+	#updateVisibility(value: boolean): void {
+		this.firstElementChild!.classList.toggle("show", value);
 	}
 }
 

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

@@ -1,52 +1,7 @@
 import {Context} from "../Context.js";
 import {createDocumentFragment} from "../ElementExtensions.js";
 import {Position, toCss} from "../Position.js";
-
-/**
- * Represents a notification.
- */
-export interface IToast {
-
-	/**
-	 * Value indicating whether to apply a fade transition.
-	 */
-	animation?: boolean;
-
-	/**
-	 * Value indicating whether to automatically hide the toast.
-	 */
-	autoHide?: boolean;
-
-	/**
-	 * The title displayed in the header.
-	 */
-	caption: string;
-
-	/**
-	 * The child content displayed in the body.
-	 */
-	childContent: DocumentFragment|string;
-
-	/**
-	 * The default contextual modifier.
-	 */
-	context?: Context;
-
-	/**
-	 * The culture used to format the relative time.
-	 */
-	culture?: Intl.Locale;
-
-	/**
-	 * The delay, in milliseconds, to hide the toast.
-	 */
-	delay?: number;
-
-	/**
-	 * The icon displayed next to the caption.
-	 */
-	icon?: string;
-}
+import type {IToast} from "./Toast.js";
 
 /**
  * Manages the notifications.
@@ -77,8 +32,7 @@ export class Toaster extends HTMLElement {
 		return this.hasAttribute("animation");
 	}
 	set animation(value: boolean) {
-		if (value) this.setAttribute("animation", "");
-		else this.removeAttribute("animation");
+		this.toggleAttribute("animation", value);
 	}
 
 	/**
@@ -88,8 +42,7 @@ export class Toaster extends HTMLElement {
 		return this.hasAttribute("autohide");
 	}
 	set autoHide(value: boolean) {
-		if (value) this.setAttribute("autohide", "");
-		else this.removeAttribute("autohide");
+		this.toggleAttribute("autohide", value);
 	}
 
 	/**
@@ -128,11 +81,12 @@ export class Toaster extends HTMLElement {
 	/**
 	 * The default icon displayed next to the captions.
 	 */
-	get icon(): string {
-		return (this.getAttribute("icon") ?? "").trim();
+	get icon(): string|null {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || null;
 	}
-	set icon(value: string) {
-		this.setAttribute("icon", value);
+	set icon(value: string|null) {
+		this.toggleAttribute("icon", Boolean(value));
 	}
 
 	/**
@@ -165,10 +119,10 @@ export class Toaster extends HTMLElement {
 	 * Shows a toast.
 	 * @param context The contextual modifier.
 	 * @param caption The title displayed in the toast header.
-	 * @param childContent The child content displayed in the toast body.
+	 * @param body The child content displayed in the toast body.
 	 */
-	notify(context: Context, caption: string, childContent: DocumentFragment|string): void {
-		this.show({context, caption, childContent});
+	notify(context: Context, caption: string, body: DocumentFragment|string): void {
+		this.show({context, caption, body});
 	}
 
 	/**
@@ -182,8 +136,8 @@ export class Toaster extends HTMLElement {
 
 		item.animation = toast.animation ?? this.animation;
 		item.autoHide = toast.autoHide ?? this.autoHide;
+		item.body = typeof toast.body == "string" ? createDocumentFragment(toast.body) : toast.body;
 		item.caption = toast.caption;
-		item.childContent = typeof toast.childContent == "string" ? createDocumentFragment(toast.childContent) : toast.childContent;
 		item.context = toast.context ?? this.context;
 		item.culture = toast.culture ?? this.culture;
 		item.delay = toast.delay ?? this.delay;

package/src/Client/UI/DialogResult.ts

@@ -0,0 +1,50 @@
+/**
+ * Specifies the return value of a dialog box.
+ */
+export const DialogResult = Object.freeze({
+
+	/**
+	 * The dialog box does not return any value.
+	 */
+	None: "None",
+
+	/**
+	 * The return value of the dialog box is "OK".
+	 */
+	OK: "OK",
+
+	/**
+	 * The return value of the dialog box is "Cancel".
+	 */
+	Cancel: "Cancel",
+
+	/**
+	 * The return value of the dialog box is "Abort".
+	 */
+	Abort: "Abort",
+
+	/**
+	 * The return value of the dialog box is "Retry".
+	 */
+	Retry: "Retry",
+
+	/**
+	 * The return value of the dialog box is "Ignore".
+	 */
+	Ignore: "Ignore",
+
+	/**
+	 * The return value of the dialog box is "Yes".
+	 */
+	Yes: "Yes",
+
+	/**
+	 * The return value of the dialog box is "No".
+	 */
+	No: "No"
+});
+
+/**
+ * Specifies the return value of a dialog box.
+ */
+export type DialogResult = typeof DialogResult[keyof typeof DialogResult];

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

@@ -1,24 +0,0 @@
-import { LitElement, type CSSResultGroup } from "lit";
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export declare abstract class ComponentBase extends LitElement {
-    #private;
-    /**
-     * The component styles.
-     */
-    static styles: CSSResultGroup;
-    /**
-     * Creates a new component.
-     * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    constructor(options?: {
-        attachShadow?: boolean;
-    });
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    protected createRenderRoot(): DocumentFragment | HTMLElement;
-}
-//# sourceMappingURL=ComponentBase.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ComponentBase.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ComponentBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,KAAK,cAAc,EAAC,MAAM,KAAK,CAAC;AAEpD;;GAEG;AACH,8BAAsB,aAAc,SAAQ,UAAU;;IAErD;;OAEG;IACH,OAAgB,MAAM,EAAE,cAAc,CAAiC;IAOvE;;;OAGG;gBACS,OAAO,GAAE;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAM;IAKlD;;;OAGG;cACgB,gBAAgB,IAAI,gBAAgB,GAAC,WAAW;CAGnE"}

package/lib/UI/Components/ComponentBase.js

@@ -1,29 +0,0 @@
-import { LitElement } from "lit";
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export class ComponentBase extends LitElement {
-    /**
-     * The component styles.
-     */
-    static styles = [document.adoptedStyleSheets];
-    /**
-     * Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    #attachShadow;
-    /**
-     * Creates a new component.
-     * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-     */
-    constructor(options = {}) {
-        super();
-        this.#attachShadow = options.attachShadow ?? false;
-    }
-    /**
-     * Returns the node into which this component should render.
-     * @returns The node into which this component should render.
-     */
-    createRenderRoot() {
-        return this.#attachShadow ? super.createRenderRoot() : this;
-    }
-}

package/lib/UI/MenuAlignment.d.ts

@@ -1,18 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export declare const MenuAlignment: Readonly<{
-    /**
-     * The dropdown menu is left aligned.
-     */
-    Start: "Start";
-    /**
-     * The dropdown menu is right aligned.
-     */
-    End: "End";
-}>;
-/**
- * Defines the alignment of a dropdown menu.
- */
-export type MenuAlignment = typeof MenuAlignment[keyof typeof MenuAlignment];
-//# sourceMappingURL=MenuAlignment.d.ts.map

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

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

package/lib/UI/MenuAlignment.js

@@ -1,13 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export const MenuAlignment = Object.freeze({
-    /**
-     * The dropdown menu is left aligned.
-     */
-    Start: "Start",
-    /**
-     * The dropdown menu is right aligned.
-     */
-    End: "End"
-});

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

@@ -1,34 +0,0 @@
-import {LitElement, type CSSResultGroup} from "lit";
-
-/**
- * Optional base class for UI components. Alternatively, components may extend {@link LitElement} directly.
- */
-export abstract class ComponentBase extends LitElement {
-
-	/**
-	 * The component styles.
-	 */
-	static override styles: CSSResultGroup = [document.adoptedStyleSheets];
-
-	/**
-	 * Value indicating whether a shadow DOM tree should be attached to this component.
-	 */
-	readonly #attachShadow: boolean;
-
-	/**
-	 * Creates a new component.
-	 * @param options Value indicating whether a shadow DOM tree should be attached to this component.
-	 */
-	constructor(options: {attachShadow?: boolean} = {}) {
-		super();
-		this.#attachShadow = options.attachShadow ?? false;
-	}
-
-	/**
-	 * Returns the node into which this component should render.
-	 * @returns The node into which this component should render.
-	 */
-	protected override createRenderRoot(): DocumentFragment|HTMLElement {
-		return this.#attachShadow ? super.createRenderRoot() : this;
-	}
-}

package/src/Client/UI/MenuAlignment.ts

@@ -1,20 +0,0 @@
-/**
- * Defines the alignment of a dropdown menu.
- */
-export const MenuAlignment = Object.freeze({
-
-	/**
-	 * The dropdown menu is left aligned.
-	 */
-	Start: "Start",
-
-	/**
-	 * The dropdown menu is right aligned.
-	 */
-	End: "End"
-});
-
-/**
- * Defines the alignment of a dropdown menu.
- */
-export type MenuAlignment = typeof MenuAlignment[keyof typeof MenuAlignment];