@cedx/ui 0.1.0

package/lib/Components/Toast.js

@@ -0,0 +1,284 @@
+import { Toast as BootstrapToast } from "bootstrap";
+import { Context, cssClass, icon } from "../Context.js";
+/**
+ * Represents a notification.
+ */
+export class Toast extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["autohide", "caption", "context", "culture", "delay", "fade", "icon"];
+    /**
+     * The time units.
+     */
+    static #timeUnits = ["second", "minute", "hour"];
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = null;
+    /**
+     * The formatter used to format the relative time.
+     */
+    #formatter;
+    /**
+     * The time at which this component was initially shown.
+     */
+    #initialTime = Date.now();
+    /**
+     * The timer identifier.
+     */
+    #timer = 0;
+    /**
+     * The underlying Bootstrap toast.
+     */
+    #toast;
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("toaster-item", this);
+    }
+    /**
+     * Value indicating whether to automatically hide this toast.
+     */
+    get autoHide() {
+        return this.hasAttribute("autohide");
+    }
+    set autoHide(value) {
+        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.
+     */
+    get caption() {
+        return (this.getAttribute("caption") ?? "").trim();
+    }
+    set caption(value) {
+        this.setAttribute("caption", value);
+    }
+    /**
+     * A contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : Context.Info;
+    }
+    set context(value) {
+        this.setAttribute("context", value);
+    }
+    /**
+     * The culture used to format the relative time.
+     */
+    get culture() {
+        const value = this.getAttribute("culture") ?? "";
+        return new Intl.Locale(value.trim() || navigator.language);
+    }
+    set culture(value) {
+        this.setAttribute("culture", value.toString());
+    }
+    /**
+     * The delay, in milliseconds, to hide this toast.
+     */
+    get delay() {
+        const value = Number(this.getAttribute("delay"));
+        return Math.max(0, Number.isNaN(value) ? 5_000 : value);
+    }
+    set delay(value) {
+        this.setAttribute("delay", value.toString());
+    }
+    /**
+     * The time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime() {
+        return Date.now() - this.#initialTime;
+    }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
+    }
+    set icon(value) {
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "autohide":
+                    this.#updateAutoHide(newValue != null);
+                    break;
+                case "caption":
+                    this.#updateCaption(newValue ?? "");
+                    break;
+                case "context":
+                    this.#updateContext(Object.values(Context).includes(newValue) ? newValue : 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
+            }
+    }
+    /**
+     * Closes this toast.
+     */
+    close() {
+        this.#toast.hide();
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        this.#abortController = new AbortController;
+        const root = this.firstElementChild;
+        root.addEventListener("hide.bs.toast", () => this.#stopTimer(), { signal: this.#abortController.signal });
+        root.addEventListener("show.bs.toast", () => this.#startTimer(), { signal: this.#abortController.signal });
+        this.#toast = new BootstrapToast(root);
+        if (this.open)
+            this.show();
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        this.#stopTimer();
+        this.#abortController?.abort();
+        this.#toast.dispose();
+    }
+    /**
+     * Shows this toast.
+     */
+    show() {
+        if (!this.#toast.isShown()) {
+            this.#initialTime = Date.now();
+            this.#updateElapsedTime();
+        }
+        this.#toast.show();
+    }
+    /**
+     * Formats the specified elapsed time.
+     * @param elapsed The elapsed time, in seconds.
+     * @returns The formated time.
+     */
+    #formatTime(elapsed) {
+        let index = 0;
+        while (elapsed > 60 && index < Toast.#timeUnits.length) {
+            elapsed /= 60;
+            index++;
+        }
+        return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
+    }
+    /**
+     * Starts the timer.
+     */
+    #startTimer() {
+        this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000);
+    }
+    /**
+     * Stops the timer.
+     */
+    #stopTimer() {
+        clearInterval(this.#timer);
+    }
+    /**
+     * 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.
+     * @param value The new value.
+     */
+    #updateCaption(value) {
+        this.querySelector(".toast-header b").textContent = value.trim();
+    }
+    /**
+     * Updates the contextual modifier.
+     * @param value The new value.
+     */
+    #updateContext(value) {
+        const contexts = Object.values(Context);
+        let { classList } = this.querySelector(".toast-header");
+        classList.remove(...contexts.map(context => `toast-header-${cssClass(context)}`));
+        classList.add(`toast-header-${cssClass(value)}`);
+        ({ classList } = this.querySelector(".toast-header .icon"));
+        classList.remove(...contexts.map(context => `text-${cssClass(context)}`));
+        classList.add(`text-${cssClass(value)}`);
+        if (!this.icon)
+            this.#updateIcon(icon(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.
+     */
+    #updateElapsedTime() {
+        const { elapsedTime } = this;
+        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) {
+        this.firstElementChild.dataset.bsAnimation = value ? "true" : "false";
+    }
+    /**
+     * Updates the icon displayed next to the caption.
+     * @param value The new value.
+     */
+    #updateIcon(value) {
+        this.querySelector(".toast-header .icon").textContent = (value ?? "").trim() || icon(this.context);
+    }
+}

package/lib/Components/Toaster.d.ts

@@ -0,0 +1,119 @@
+import { Context } from "../Context.js";
+import { Position } from "../Position.js";
+/**
+ * Represents a notification.
+ */
+export interface IToast {
+    /**
+     * Value indicating whether to automatically hide the toast.
+     */
+    autoHide?: boolean;
+    /**
+     * The child content displayed in the body.
+     */
+    body: DocumentFragment;
+    /**
+     * 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;
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    fade?: boolean;
+    /**
+     * The icon displayed next to the caption.
+     */
+    icon?: string;
+}
+/**
+ * Manages the notifications.
+ */
+export declare class Toaster extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Creates a new toaster.
+     */
+    constructor();
+    /**
+     * Value indicating whether to automatically hide the toasts.
+     */
+    get autoHide(): boolean;
+    set autoHide(value: boolean);
+    /**
+     * The default contextual modifier.
+     */
+    get context(): Context;
+    set context(value: Context);
+    /**
+     * The default culture used to format the relative times.
+     */
+    get culture(): Intl.Locale;
+    set culture(value: Intl.Locale);
+    /**
+     * The default delay, in milliseconds, to hide the toasts.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * The default icon displayed next to the captions.
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    /**
+     * The toaster placement.
+     */
+    get position(): Position;
+    set position(value: Position);
+    /**
+     * 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;
+    /**
+     * Shows a toast.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the toast header.
+     * @param message The child content displayed in the toast body.
+     */
+    notify(context: Context, caption: string, message: DocumentFragment): void;
+    /**
+     * Shows a toast.
+     * @param toast The toast to show.
+     */
+    show(toast: IToast): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "toaster-container": Toaster;
+    }
+}
+//# sourceMappingURL=Toaster.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/Client/Components/Toaster.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAW,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,MAAM;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;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,OAAO,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;IAOlD;;OAEG;;IAaH;;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,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,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,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAI1E;;;OAGG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CA4BzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,OAAO,CAAC;KAC7B;CACD"}

package/lib/Components/Toaster.js

@@ -0,0 +1,153 @@
+import { Context } from "../Context.js";
+import { Position, cssClass } from "../Position.js";
+/**
+ * Manages the notifications.
+ */
+export class Toaster extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["position"];
+    /**
+     * 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.
+     */
+    static {
+        customElements.define("toaster-container", this);
+    }
+    /**
+     * Value indicating whether to automatically hide the toasts.
+     */
+    get autoHide() {
+        return this.hasAttribute("autohide");
+    }
+    set autoHide(value) {
+        this.toggleAttribute("autohide", value);
+    }
+    /**
+     * The default contextual modifier.
+     */
+    get context() {
+        const value = this.getAttribute("context");
+        return Object.values(Context).includes(value) ? value : Context.Info;
+    }
+    set context(value) {
+        this.setAttribute("context", value);
+    }
+    /**
+     * The default culture used to format the relative times.
+     */
+    get culture() {
+        const value = this.getAttribute("culture") ?? "";
+        return new Intl.Locale(value.trim() || navigator.language);
+    }
+    set culture(value) {
+        this.setAttribute("culture", value.toString());
+    }
+    /**
+     * The default delay, in milliseconds, to hide the toasts.
+     */
+    get delay() {
+        const value = Number(this.getAttribute("delay"));
+        return Math.max(0, Number.isNaN(value) ? 5_000 : value);
+    }
+    set delay(value) {
+        this.setAttribute("delay", value.toString());
+    }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * The default icon displayed next to the captions.
+     */
+    get icon() {
+        const value = this.getAttribute("icon") ?? "";
+        return value.trim() || null;
+    }
+    set icon(value) {
+        if (value)
+            this.setAttribute("icon", value);
+        else
+            this.removeAttribute("icon");
+    }
+    /**
+     * The toaster placement.
+     */
+    get position() {
+        const value = this.getAttribute("position");
+        return Object.values(Position).includes(value) ? value : Position.BottomEnd;
+    }
+    set position(value) {
+        this.setAttribute("position", 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, oldValue, newValue) {
+        if (newValue != oldValue)
+            switch (attribute) {
+                case "position":
+                    this.#updatePosition(Object.values(Position).includes(newValue) ? newValue : Position.BottomEnd);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Shows a toast.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the toast header.
+     * @param message The child content displayed in the toast body.
+     */
+    notify(context, caption, message) {
+        return this.show({ body: message, caption, context });
+    }
+    /**
+     * Shows a toast.
+     * @param toast The toast to show.
+     */
+    show(toast) {
+        const item = document.createElement("toaster-item");
+        const childContent = this.#toastTemplate.cloneNode(true).querySelector(".toast");
+        childContent.addEventListener("hidden.bs.toast", () => item.remove());
+        item.appendChild(childContent);
+        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);
+        item.show();
+    }
+    /**
+     * Updates the toaster placement.
+     * @param value The new value.
+     */
+    #updatePosition(value) {
+        const { classList } = this.firstElementChild;
+        classList.remove(...Object.values(Position).flatMap(position => cssClass(position).split(" ")));
+        classList.add(...cssClass(value).split(" "));
+    }
+}

package/lib/Components/TypeAhead.d.ts

@@ -0,0 +1,53 @@
+/**
+ * A dynamic list of suggested values for an associated control.
+ */
+export declare class TypeAhead extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * The delay in milliseconds to wait before triggering autocomplete suggestions.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * The function invoked when the query has been changed.
+     */
+    set handler(callback: (query: string) => Promise<string[]>);
+    /**
+     * The data list identifier.
+     */
+    get list(): string;
+    set list(value: string);
+    /**
+     * The minimum character length needed before triggering autocomplete suggestions.
+     */
+    get minLength(): number;
+    set minLength(value: number);
+    /**
+     * The query to look up.
+     */
+    get query(): string;
+    set query(value: string);
+    /**
+     * 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;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "type-ahead": TypeAhead;
+    }
+}
+//# sourceMappingURL=TypeAhead.d.ts.map

package/lib/Components/TypeAhead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeAhead.d.ts","sourceRoot":"","sources":["../../src/Client/Components/TypeAhead.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAqB;IAmBvD;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,EAAE,CAAC,EAKzD;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAGtB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAE1B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;CAsD/F;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}