@cedx/base 0.20.0 → 0.21.1

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

@@ -6,7 +6,7 @@ export class OfflineIndicator extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation"];
+	static readonly observedAttributes = ["fade"];
 
 	/**
 	 * Registers the component.
@@ -18,11 +18,21 @@ export class OfflineIndicator extends HTMLElement {
 	/**
 	 * Value indicating whether to apply a transition.
 	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
+	get fade(): boolean {
+		return this.hasAttribute("fade");
 	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
+	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);
 	}
 
 	/**
@@ -33,7 +43,7 @@ export class OfflineIndicator 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 "fade": this.#updateFade(newValue != null); break;
 			// No default
 		}
 	}
@@ -42,31 +52,48 @@ export class OfflineIndicator extends HTMLElement {
 	 * 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.
 	 */
-	#updateAnimation(value: boolean): void {
+	#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();
 	}
 }
 

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

@@ -6,11 +6,6 @@ import {Context, getIcon, toCss} from "../Context.js";
  */
 export interface IToast {
 
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	animation?: boolean;
-
 	/**
 	 * Value indicating whether to automatically hide the toast.
 	 */
@@ -41,6 +36,11 @@ export interface IToast {
 	 */
 	delay?: number;
 
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	fade?: boolean;
+
 	/**
 	 * The icon displayed next to the caption.
 	 */
@@ -55,7 +55,7 @@ export class Toast extends HTMLElement {
 	/**
 	 * The list of observed attributes.
 	 */
-	static readonly observedAttributes = ["animation", "autohide", "caption", "context", "culture", "delay", "icon"];
+	static readonly observedAttributes = ["autohide", "caption", "context", "culture", "delay", "fade", "icon"];
 
 	/**
 	 * The time units.
@@ -89,16 +89,6 @@ export class Toast extends HTMLElement {
 		customElements.define("toaster-item", this);
 	}
 
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
-	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
-	}
-
 	/**
 	 * Value indicating whether to automatically hide this toast.
 	 */
@@ -166,6 +156,16 @@ export class Toast extends HTMLElement {
 		return Date.now() - this.#initialTime;
 	}
 
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	get fade(): boolean {
+		return this.hasAttribute("fade");
+	}
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
 	/**
 	 * The icon displayed next to the caption.
 	 */
@@ -179,7 +179,7 @@ export class Toast extends HTMLElement {
 	}
 
 	/**
-	 * Value indicating whether to initially show this toast.
+	 * Value indicating whether to initially show this component.
 	 */
 	get open(): boolean {
 		return this.hasAttribute("open");
@@ -196,12 +196,12 @@ export class Toast 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 "autohide": this.#updateAutoHide(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 "delay": this.#updateDelay(Number(newValue)); break;
+			case "fade": this.#updateFade(newValue != null); break;
 			case "icon": this.#updateIcon(newValue); break;
 			// No default
 		}
@@ -261,14 +261,6 @@ export class Toast extends HTMLElement {
 		return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
 	}
 
-	/**
-	 * Updates the value indicating whether to apply a transition.
-	 * @param value The new value.
-	 */
-	#updateAnimation(value: boolean): void {
-		(this.firstElementChild! as HTMLElement).dataset.bsAnimation = value ? "true" : "false";
-	}
-
 	/**
 	 * Updates the value indicating whether to automatically hide this toast.
 	 * @param value The new value.
@@ -318,6 +310,14 @@ export class Toast extends HTMLElement {
 		this.querySelector(".toast-header small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / 1_000) : "";
 	};
 
+	/**
+	 * Updates the value indicating whether to apply a transition.
+	 * @param value The new value.
+	 */
+	#updateFade(value: boolean): void {
+		(this.firstElementChild! as HTMLElement).dataset.bsAnimation = value ? "true" : "false";
+	}
+
 	/**
 	 * Updates the icon displayed next to the caption.
 	 * @param value The new value.

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

@@ -32,16 +32,6 @@ export class Toaster extends HTMLElement {
 		customElements.define("toaster-container", this);
 	}
 
-	/**
-	 * Value indicating whether to apply a transition.
-	 */
-	get animation(): boolean {
-		return this.hasAttribute("animation");
-	}
-	set animation(value: boolean) {
-		this.toggleAttribute("animation", value);
-	}
-
 	/**
 	 * Value indicating whether to automatically hide the toasts.
 	 */
@@ -85,6 +75,16 @@ export class Toaster extends HTMLElement {
 		this.setAttribute("delay", value.toString());
 	}
 
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	get fade(): boolean {
+		return this.hasAttribute("fade");
+	}
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
 	/**
 	 * The default icon displayed next to the captions.
 	 */
@@ -149,13 +149,13 @@ export class Toaster extends HTMLElement {
 		childContent.addEventListener("hidden.bs.toast", () => item.remove());
 		item.appendChild(childContent);
 
-		item.animation = toast.animation ?? this.animation;
 		item.autoHide = toast.autoHide ?? this.autoHide;
 		item.body = toast.body;
 		item.caption = toast.caption;
 		item.context = toast.context ?? this.context;
 		item.culture = toast.culture ?? this.culture;
 		item.delay = toast.delay ?? this.delay;
+		item.fade = toast.fade ?? this.fade;
 		item.icon = toast.icon ?? this.icon;
 
 		this.firstElementChild!.appendChild(item);

package/src/Client/UI/Tag.ts

@@ -33,7 +33,8 @@ export function html(fragments: TemplateStringsArray, ...values: unknown[]): Doc
  * @returns The CSS string corresponding to the specified value.
  */
 function stringFromCss(value: unknown): string {
-	if (!(value instanceof CSSStyleSheet)) return String(value);
+	// eslint-disable-next-line @typescript-eslint/no-base-to-string
+	if (!(value instanceof CSSStyleSheet)) return value === null || typeof value == "undefined" ? "" : String(value);
 	return Array.from(value.cssRules).map(cssRule => cssRule.cssText).join("\n");
 }
 
@@ -43,7 +44,8 @@ function stringFromCss(value: unknown): string {
  * @returns The HTML string corresponding to the specified value.
  */
 function stringFromHtml(value: unknown): string {
-	if (!(value instanceof DocumentFragment)) return String(value);
+	// eslint-disable-next-line @typescript-eslint/no-base-to-string
+	if (!(value instanceof DocumentFragment)) return value === null || typeof value == "undefined" ? "" : String(value);
 	const element = document.createElement("div");
 	element.appendChild(value);
 	return element.innerHTML;

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

@@ -1 +0,0 @@
-{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MessageBox.ts"],"names":[],"mappings":"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"}