@cedx/base 0.15.3 → 0.17.0

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

@@ -1,42 +1,6 @@
 import { Context } from "../Context.js";
 import { Position } 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.
  */
@@ -74,8 +38,8 @@ export declare class Toaster extends HTMLElement {
     /**
      * The default icon displayed next to the captions.
      */
-    get icon(): string;
-    set icon(value: string);
+    get icon(): string | null;
+    set icon(value: string | null);
     /**
      * The toaster placement.
      */
@@ -92,9 +56,9 @@ export declare 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;
+    notify(context: Context, caption: string, body: DocumentFragment | string): void;
     /**
      * Shows the specified toast.
      * @param toast The toast to show.

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

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,gBAAgB,GAAC,MAAM,CAAC;IAEtC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAclD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAItF;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAC,QAAQ,EAAQ,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,YAAY,CAAC;AAEvC;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;;IAEvC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAgB;IAclD;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAGrB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,IAAI,CAAC,MAAM,CAGzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAE1B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAS/F;;;;;OAKG;IACH,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAI9E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA2BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}

package/lib/UI/Components/Toaster.js

@@ -26,10 +26,7 @@ export class Toaster extends HTMLElement {
         return this.hasAttribute("animation");
     }
     set animation(value) {
-        if (value)
-            this.setAttribute("animation", "");
-        else
-            this.removeAttribute("animation");
+        this.toggleAttribute("animation", value);
     }
     /**
      * Value indicating whether to automatically hide the toasts.
@@ -38,10 +35,7 @@ export class Toaster extends HTMLElement {
         return this.hasAttribute("autohide");
     }
     set autoHide(value) {
-        if (value)
-            this.setAttribute("autohide", "");
-        else
-            this.removeAttribute("autohide");
+        this.toggleAttribute("autohide", value);
     }
     /**
      * The default contextual modifier.
@@ -77,10 +71,11 @@ export class Toaster extends HTMLElement {
      * The default icon displayed next to the captions.
      */
     get icon() {
-        return (this.getAttribute("icon") ?? "").trim();
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
     }
     set icon(value) {
-        this.setAttribute("icon", value);
+        this.toggleAttribute("icon", Boolean(value));
     }
     /**
      * The toaster placement.
@@ -111,10 +106,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, caption, childContent) {
-        this.show({ context, caption, childContent });
+    notify(context, caption, body) {
+        this.show({ context, caption, body });
     }
     /**
      * Shows the specified toast.
@@ -126,8 +121,8 @@ export class Toaster extends HTMLElement {
         item.appendChild(this.#toastTemplate.cloneNode(true).querySelector(".toast"));
         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/lib/UI/DialogResult.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Specifies the return value of a dialog box.
+ */
+export declare const DialogResult: Readonly<{
+    /**
+     * 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];
+//# sourceMappingURL=DialogResult.d.ts.map

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

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

package/lib/UI/DialogResult.js

@@ -0,0 +1,37 @@
+/**
+ * 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"
+});

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.15.3",
+	"version": "0.17.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
@@ -45,8 +45,7 @@
 		"library"
 	],
 	"peerDependencies": {
-		"bootstrap": ">=5.3.0",
-		"lit": ">=3.3.0"
+		"bootstrap": ">=5.3.0"
 	},
 	"publishConfig": {
 		"access": "public"

package/src/Client/UI/Alignment.ts

@@ -0,0 +1,25 @@
+/**
+ * Defines the alignment of a component.
+ */
+export const Alignment = Object.freeze({
+
+	/**
+	 * The element is aligned at the start.
+	 */
+	Start: "Start",
+
+	/**
+	 * The element is aligned in the center.
+	 */
+	Center: "Center",
+
+	/**
+	 * The element is aligned at the end.
+	 */
+	End: "End"
+});
+
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];

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

@@ -0,0 +1,187 @@
+import {Context, toCss as contextCss} from "../Context.js";
+import {DialogResult} from "../DialogResult.js";
+import {Variant, toCss as variantCss} from "../Variant.js";
+
+/**
+ * Represents a dialog box button.
+ */
+export interface IDialogButton {
+
+	/**
+	 * A contextual modifier.
+	 */
+	context?: Context|null;
+
+	/**
+	 * The button icon.
+	 */
+	icon?: string|null;
+
+	/**
+	 * The button label.
+	 */
+	label?: string;
+
+	/**
+	 * The button value.
+	 */
+	value?: DialogResult;
+
+	/**
+	 * A tone variant.
+	 */
+	variant?: Variant|null;
+}
+
+/**
+ * Represents a dialog box button.
+ */
+export class DialogButton extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["context", "icon", "label", "value", "variant"];
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("dialog-button", this);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context|null {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : null;
+	}
+	set context(value: Context|null) {
+		this.toggleAttribute("context", Boolean(value));
+	}
+
+	/**
+	 * The button icon.
+	 */
+	get icon(): string|null {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || null;
+	}
+	set icon(value: string|null) {
+		this.toggleAttribute("icon", Boolean(value));
+	}
+
+	/**
+	 * The button label.
+	 */
+	get label(): string {
+		return (this.getAttribute("label") ?? "").trim();
+	}
+	set label(value: string) {
+		this.setAttribute("label", value);
+	}
+
+	/**
+	 * The button value.
+	 */
+	get value(): DialogResult {
+		const value = this.getAttribute("value") as DialogResult;
+		return Object.values(DialogResult).includes(value) ? value : DialogResult.None;
+	}
+	set value(value: DialogResult) {
+		this.setAttribute("value", value);
+	}
+
+	/**
+	 * A tone variant.
+	 */
+	get variant(): Variant|null {
+		const value = this.getAttribute("variant") as Variant;
+		return Object.values(Variant).includes(value) ? value : null;
+	}
+	set variant(value: Variant|null) {
+		this.toggleAttribute("context", Boolean(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 "context": this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : null); break;
+			case "icon": this.#updateIcon(newValue); break;
+			case "label": this.#updateLabel(newValue ?? ""); break;
+			case "value": this.#updateValue(Object.values(DialogResult).includes(newValue as DialogResult) ? newValue as DialogResult : DialogResult.None); break;
+			case "variant": this.#updateVariant(Object.values(Variant).includes(newValue as Variant) ? newValue as Variant : null); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Updates the contextual modifier.
+	 * @param value The new value.
+	 */
+	#updateContext(value: Context|null): void {
+		const {classList} = this.querySelector("button")!;
+		classList.remove(...Object.values(Context).map(context => `btn-${contextCss(context)}`));
+		if (value) classList.add(`btn-${contextCss(value)}`);
+	}
+
+	/**
+	 * Updates the button icon.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string|null): void {
+		const element = this.querySelector<HTMLElement>(".icon")!;
+		const icon = (value ?? "").trim();
+		element.textContent = icon;
+		element.hidden = !icon;
+	}
+
+	/**
+	 * Updates the button label.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		const element = this.querySelector("span")!;
+		const label = value.trim();
+		element.textContent = label;
+		element.hidden = !label;
+		this.querySelector(".icon")!.classList.toggle("me-1", !element.hidden);
+	}
+
+	/**
+	 * Updates the button value.
+	 * @param value The new value.
+	 */
+	#updateValue(value: DialogResult): void {
+		this.querySelector("button")!.value = value;
+	}
+
+	/**
+	 * Updates the tone variant.
+	 * @param value The new value.
+	 */
+	#updateVariant(value: Variant|null): void {
+		const {classList} = this.querySelector("button")!;
+		classList.remove(...Object.values(Variant).map(variant => `btn-${variantCss(variant)}`));
+		if (value) classList.add(`btn-${variantCss(value)}`);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"dialog-button": DialogButton;
+	}
+}

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

@@ -36,7 +36,7 @@ export class KeyboardAccelerator extends HTMLElement {
 			.reduce<number>((modifiers, value) => modifiers | (KeyboardAccelerator.#modifiers.get(value) ?? 0), KeyboardModifiers.None);
 	}
 	set modifiers(value: number) {
-		this.setAttribute("modifiers", KeyboardAccelerator.#modifiers.entries()
+		this.setAttribute("modifiers", !value ? "None" : KeyboardAccelerator.#modifiers.entries()
 			.filter(([, flag]) => (value & flag) != 0)
 			.map(([key]) => key)
 			.toArray().join(", "));

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

@@ -1,6 +1,6 @@
 import {Dropdown} from "bootstrap";
+import {Alignment} from "../Alignment.js";
 import {AppTheme, getIcon} from "../AppTheme.js";
-import {MenuAlignment} from "../MenuAlignment.js";
 
 /**
  * A dropdown menu for switching the application theme.
@@ -40,11 +40,11 @@ export class ThemeDropdown extends HTMLElement {
 	/**
 	 * The alignment of the dropdown menu.
 	 */
-	get alignment(): MenuAlignment {
-		const value = this.getAttribute("alignment") as MenuAlignment;
-		return Object.values(MenuAlignment).includes(value) ? value : MenuAlignment.End;
+	get alignment(): Alignment {
+		const value = this.getAttribute("alignment") as Alignment;
+		return Object.values(Alignment).includes(value) ? value : Alignment.End;
 	}
-	set alignment(value: MenuAlignment) {
+	set alignment(value: Alignment) {
 		this.setAttribute("alignment", value);
 	}
 
@@ -90,7 +90,7 @@ export class ThemeDropdown extends HTMLElement {
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
 			case "alignment":
-				this.#updateAlignment(Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End);
+				this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End);
 				break;
 			case "apptheme":
 				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
@@ -165,10 +165,8 @@ export class ThemeDropdown extends HTMLElement {
 	 * Updates the alignment of the dropdown menu.
 	 * @param value The new value.
 	 */
-	#updateAlignment(value: MenuAlignment): void {
-		const {classList} = this.querySelector(".dropdown-menu")!;
-		if (value == MenuAlignment.End) classList.add("dropdown-menu-end");
-		else classList.remove("dropdown-menu-end");
+	#updateAlignment(value: Alignment): void {
+		this.querySelector(".dropdown-menu")!.classList.toggle("dropdown-menu-end", value == Alignment.End);
 	}
 
 	/**