@cedx/base 0.16.0 → 0.18.0

package/lib/UI/Components/Toast.js

@@ -7,7 +7,7 @@ export class Toast extends HTMLElement {
     /**
      * The list of observed attributes.
      */
-    static observedAttributes = ["animation", "caption", "context", "culture", "icon", "open"];
+    static observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
     /**
      * The time units.
      */
@@ -41,10 +41,7 @@ export class Toast 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 this toast.
@@ -53,10 +50,13 @@ export class Toast extends HTMLElement {
         return this.hasAttribute("autohide");
     }
     set autoHide(value) {
-        if (value)
-            this.setAttribute("autohide", "");
-        else
-            this.removeAttribute("autohide");
+        this.toggleAttribute("autohide", value);
+    }
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value) {
+        this.querySelector(".toast-body").replaceChildren(...value.childNodes);
     }
     /**
      * The title displayed in the header.
@@ -67,12 +67,6 @@ export class Toast extends HTMLElement {
     set caption(value) {
         this.setAttribute("caption", value);
     }
-    /**
-     * The child content displayed in the body.
-     */
-    set childContent(value) {
-        this.querySelector(".toast-body").replaceChildren(...value.childNodes);
-    }
     /**
      * A contextual modifier.
      */
@@ -129,10 +123,7 @@ export class Toast extends HTMLElement {
         return this.hasAttribute("open");
     }
     set open(value) {
-        if (value)
-            this.setAttribute("open", "");
-        else
-            this.removeAttribute("open");
+        this.toggleAttribute("open", value);
     }
     /**
      * Method invoked when an attribute has been changed.
@@ -146,6 +137,9 @@ export class Toast extends HTMLElement {
                 case "animation":
                     this.#updateAnimation(newValue != null);
                     break;
+                case "autohide":
+                    this.#updateAutoHide(newValue != null);
+                    break;
                 case "caption":
                     this.#updateCaption(newValue ?? "");
                     break;
@@ -155,24 +149,31 @@ export class Toast extends HTMLElement {
                 case "culture":
                     this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, { style: "long" });
                     break;
+                case "delay":
+                    this.#updateDelay(Number(newValue));
+                    break;
                 case "icon":
                     this.#updateIcon(newValue);
                     break;
-                case "open":
-                    this.#updateVisibility(newValue != null);
-                    break;
                 // No default
             }
     }
+    /**
+     * Closes this toast.
+     */
+    close() {
+        this.#toast.hide();
+    }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        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));
-        const { animation, autoHide: autohide, delay } = this;
-        this.#toast = new BootstrapToast(toast, { animation, autohide, delay });
+        this.#toast = new BootstrapToast(toast);
+        if (this.open)
+            this.show();
     }
     /**
      * Method invoked when this component is disconnected.
@@ -181,12 +182,6 @@ export class Toast extends HTMLElement {
         clearInterval(this.#timer);
         this.#toast.dispose();
     }
-    /**
-     * Hides this toast.
-     */
-    hide() {
-        this.#toast.hide();
-    }
     /**
      * Shows this toast.
      */
@@ -211,11 +206,18 @@ export class Toast extends HTMLElement {
         return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
     }
     /**
-     * Updates the toast animation.
+     * Updates the value indicating whether to apply a fade transition.
      * @param value The new value.
      */
     #updateAnimation(value) {
-        this.firstElementChild.classList.toggle("fade", value);
+        this.firstElementChild.dataset.bsAnimation = value ? "true" : "false";
+    }
+    /**
+     * Updates the value indicating whether to automatically hide this toast.
+     * @param value The new value.
+     */
+    #updateAutoHide(value) {
+        this.firstElementChild.dataset.bsAutohide = value ? "true" : "false";
     }
     /**
      * Updates the title displayed in the header.
@@ -237,6 +239,14 @@ export class Toast extends HTMLElement {
         classList.remove(...contexts.map(context => `text-${toCss(context)}`));
         classList.add(`text-${toCss(value)}`);
     }
+    /**
+     * Updates the delay to hide the toast.
+     * @param value The new value.
+     */
+    #updateDelay(value) {
+        const delay = Math.max(0, Number.isNaN(value) ? 5_000 : value);
+        this.firstElementChild.dataset.bsDelay = delay.toString();
+    }
     /**
      * Updates the label corresponding to the elapsed time.
      */
@@ -251,11 +261,4 @@ export class Toast extends HTMLElement {
     #updateIcon(value) {
         this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || getIcon(this.context);
     }
-    /**
-     * Updates the toast visibility.
-     * @param value The new value.
-     */
-    #updateVisibility(value) {
-        this.firstElementChild.classList.toggle("show", value);
-    }
 }

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.
  */
@@ -46,6 +10,10 @@ export declare class Toaster extends HTMLElement {
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
+    /**
+     * Creates a new toaster.
+     */
+    constructor();
     /**
      * Value indicating whether to apply a fade transition.
      */
@@ -92,11 +60,11 @@ 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;
+    show(context: Context, caption: string, body: DocumentFragment | string): void;
     /**
-     * Shows the specified toast.
+     * Shows a toast.
      * @param toast The toast to show.
      */
     show(toast: IToast): void;

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,GAAC,IAAI,CAGtB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAC,IAAI,EAG1B;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;IAOlD;;OAEG;;IAaH;;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,EAG1B;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;IAO/F;;;;;OAKG;IACH,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAC,MAAM,GAAG,IAAI;IAE5E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAsCzB;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

@@ -13,6 +13,14 @@ export class Toaster extends HTMLElement {
      * The template for a toast.
      */
     #toastTemplate = this.querySelector("template").content;
+    /**
+     * Creates a new toaster.
+     */
+    constructor() {
+        super();
+        for (const toast of this.querySelectorAll("toaster-item"))
+            toast.addEventListener("hidden.bs.toast", () => toast.remove());
+    }
     /**
      * Registers the component.
      */
@@ -26,10 +34,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 +43,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.
@@ -113,25 +115,21 @@ export class Toaster extends HTMLElement {
     }
     /**
      * Shows a toast.
-     * @param context The contextual modifier.
+     * @param toast The toast to show, or the contextual modifier.
      * @param caption The title displayed in the toast header.
-     * @param childContent The child content displayed in the toast body.
-     */
-    notify(context, caption, childContent) {
-        this.show({ context, caption, childContent });
-    }
-    /**
-     * Shows the specified toast.
-     * @param toast The toast to show.
+     * @param body The child content displayed in the toast body.
      */
-    show(toast) {
+    show(toast, caption = "", body = "") {
+        if (typeof toast == "string")
+            toast = { context: toast, caption, body };
         const item = document.createElement("toaster-item");
-        item.addEventListener("hidden.bs.toast", () => item.remove());
-        item.appendChild(this.#toastTemplate.cloneNode(true).querySelector(".toast"));
+        const childContent = this.#toastTemplate.cloneNode(true).querySelector(".toast");
+        childContent.addEventListener("hidden.bs.toast", () => item.remove());
+        item.appendChild(childContent);
         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/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.16.0",
+	"version": "0.18.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",
@@ -21,7 +21,7 @@
 		"mocha": "^11.7.1",
 		"playwright": "^1.55.0",
 		"serve-handler": "^6.1.6",
-		"typedoc": "^0.28.10",
+		"typedoc": "^0.28.11",
 		"typescript": "^5.9.2",
 		"typescript-eslint": "^8.40.0"
 	},

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

@@ -2,6 +2,37 @@ 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.
  */