@cedx/ui 0.1.0

package/lib/Components/TypeAhead.js

@@ -0,0 +1,138 @@
+/**
+ * A dynamic list of suggested values for an associated control.
+ */
+export class TypeAhead extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["list", "query"];
+    /**
+     * The debounced handler used to look up the query.
+     */
+    #debounced = () => { };
+    /**
+     * The previous query.
+     */
+    #previousQuery = "";
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("type-ahead", this);
+    }
+    /**
+     * The delay in milliseconds to wait before triggering autocomplete suggestions.
+     */
+    get delay() {
+        const value = Number(this.getAttribute("delay"));
+        return Math.max(0, Number.isNaN(value) ? 300 : value);
+    }
+    set delay(value) {
+        this.setAttribute("delay", value.toString());
+    }
+    /**
+     * The function invoked when the query has been changed.
+     */
+    set handler(callback) {
+        this.#debounced = this.#debounce(async (query) => {
+            try {
+                this.#updateItems(await callback(query));
+            }
+            catch {
+                this.#updateItems([]);
+            }
+        }, this.delay);
+    }
+    /**
+     * The data list identifier.
+     */
+    get list() {
+        return (this.getAttribute("list") ?? "").trim();
+    }
+    set list(value) {
+        this.setAttribute("list", value);
+    }
+    /**
+     * The minimum character length needed before triggering autocomplete suggestions.
+     */
+    get minLength() {
+        const value = Number(this.getAttribute("minlength"));
+        return Math.max(1, Number.isNaN(value) ? 1 : value);
+    }
+    set minLength(value) {
+        this.setAttribute("minlength", value.toString());
+    }
+    /**
+     * The query to look up.
+     */
+    get query() {
+        return (this.getAttribute("query") ?? "").trim();
+    }
+    set query(value) {
+        this.setAttribute("query", 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 "list":
+                    this.#updateList(newValue ?? "");
+                    break;
+                case "query":
+                    this.#updateQuery(newValue ?? "");
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Postpones the invocation of the specified callback until after a given delay has elapsed since the last time it was invoked.
+     * @param callback The function to debounce.
+     * @param delay The delay to wait, in milliseconds.
+     * @returns The debounced function.
+     */
+    #debounce(callback, delay) {
+        let timer = 0;
+        return value => {
+            if (timer)
+                clearTimeout(timer);
+            timer = window.setTimeout(callback, delay, value);
+        };
+    }
+    /**
+     * Updates the identifier of the underlying data list.
+     * @param value The new value.
+     */
+    #updateList(value) {
+        this.firstElementChild.id = value.trim();
+    }
+    /**
+     * Updates the query to look up.
+     * @param value The new value.
+     */
+    #updateQuery(value) {
+        const query = value.trim();
+        if (query != this.#previousQuery) {
+            this.#previousQuery = query;
+            if (query.length < this.minLength)
+                this.#updateItems([]);
+            else
+                this.#debounced(query);
+        }
+    }
+    /**
+     * Updates the items of the underlying data list.
+     * @param values The new values.
+     */
+    #updateItems(values) {
+        this.firstElementChild.replaceChildren(...values.map(value => {
+            const option = document.createElement("option");
+            option.value = value;
+            return option;
+        }));
+    }
+}

package/lib/Context.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Defines contextual modifiers.
+ */
+export declare const Context: Readonly<{
+    /**
+     * A danger.
+     */
+    Danger: "Danger";
+    /**
+     * A warning.
+     */
+    Warning: "Warning";
+    /**
+     * An information.
+     */
+    Info: "Info";
+    /**
+     * A success.
+     */
+    Success: "Success";
+}>;
+/**
+ * Defines contextual modifiers.
+ */
+export type Context = typeof Context[keyof typeof Context];
+/**
+ * Returns the CSS class of the specified context.
+ * @param context The context.
+ * @returns The CSS class of the specified context.
+ */
+export declare function cssClass(context: Context): string;
+/**
+ * Gets the icon corresponding to the specified context.
+ * @param context The context.
+ * @returns The icon corresponding to the specified context.
+ */
+export declare function icon(context: Context): string;
+//# sourceMappingURL=Context.d.ts.map

package/lib/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../src/Client/Context.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,OAAO;IAEnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE3D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAO7C"}

package/lib/Context.js

@@ -0,0 +1,42 @@
+/**
+ * Defines contextual modifiers.
+ */
+export const Context = Object.freeze({
+    /**
+     * A danger.
+     */
+    Danger: "Danger",
+    /**
+     * A warning.
+     */
+    Warning: "Warning",
+    /**
+     * An information.
+     */
+    Info: "Info",
+    /**
+     * A success.
+     */
+    Success: "Success"
+});
+/**
+ * Returns the CSS class of the specified context.
+ * @param context The context.
+ * @returns The CSS class of the specified context.
+ */
+export function cssClass(context) {
+    return context.toLowerCase();
+}
+/**
+ * Gets the icon corresponding to the specified context.
+ * @param context The context.
+ * @returns The icon corresponding to the specified context.
+ */
+export function icon(context) {
+    switch (context) {
+        case Context.Danger: return "error";
+        case Context.Success: return "check_circle";
+        case Context.Warning: return "warning";
+        default: return "info";
+    }
+}

package/lib/DialogResult.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Specifies common return values of a dialog box.
+ */
+export declare const DialogResult: Readonly<{
+    /**
+     * The dialog box does not return any value.
+     */
+    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";
+}>;
+//# sourceMappingURL=DialogResult.d.ts.map

package/lib/DialogResult.d.ts.map

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

package/lib/DialogResult.js

@@ -0,0 +1,29 @@
+/**
+ * Specifies common return values of a dialog box.
+ */
+export const DialogResult = Object.freeze({
+    /**
+     * The dialog box does not return any value.
+     */
+    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"
+});

package/lib/File.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Downloads the specified file.
+ * @param file The file to be downloaded.
+ */
+export declare function download(file: File): void;
+/**
+ * Opens the specified file.
+ * @param file The file to be opened.
+ * @param options Value indicating whether to open the file in a new tab.
+ */
+export declare function open(file: File, options?: {
+    newTab?: boolean;
+}): void;
+/**
+ * Prints the specified file.
+ * @param file The file to be printed.
+ */
+export declare function print(file: File): void;
+/**
+ * Converts the specified file to a data URL.
+ * @param file The file to convert.
+ * @returns The data URL corresponding to the given file.
+ */
+export declare function toDataUrl(file: File): Promise<URL>;
+//# sourceMappingURL=File.d.ts.map

package/lib/File.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../src/Client/File.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAUzC;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAM,GAAG,IAAI,CAkBvE;AAED;;;GAGG;AACH,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAatC;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,CAOlD"}

package/lib/File.js

@@ -0,0 +1,66 @@
+/**
+ * Downloads the specified file.
+ * @param file The file to be downloaded.
+ */
+export function download(file) {
+    const url = URL.createObjectURL(file);
+    const anchor = document.createElement("a");
+    anchor.download = file.name;
+    anchor.href = url;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+}
+/**
+ * Opens the specified file.
+ * @param file The file to be opened.
+ * @param options Value indicating whether to open the file in a new tab.
+ */
+export function open(file, options = {}) {
+    const url = URL.createObjectURL(file);
+    if (!options.newTab) {
+        location.assign(url);
+        return;
+    }
+    const handle = window.open(url, "_blank");
+    if (!handle) {
+        location.assign(url);
+        return;
+    }
+    const timer = window.setInterval(() => {
+        if (!handle.closed)
+            return;
+        clearInterval(timer);
+        URL.revokeObjectURL(url);
+    }, 5_000);
+}
+/**
+ * Prints the specified file.
+ * @param file The file to be printed.
+ */
+export function print(file) {
+    const url = URL.createObjectURL(file);
+    const frame = document.createElement("iframe");
+    frame.addEventListener("load", () => frame.contentWindow?.print());
+    frame.hidden = true;
+    frame.src = url;
+    window.addEventListener("focus", () => {
+        document.body.removeChild(frame);
+        URL.revokeObjectURL(url);
+    }, { once: true });
+    document.body.appendChild(frame);
+}
+/**
+ * Converts the specified file to a data URL.
+ * @param file The file to convert.
+ * @returns The data URL corresponding to the given file.
+ */
+export function toDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader;
+        reader.addEventListener("error", reject);
+        reader.addEventListener("load", () => resolve(new URL(reader.result)));
+        reader.readAsDataURL(file);
+    });
+}

package/lib/Form.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Represents a form control.
+ */
+export type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/**
+ * Gets all controls belonging to the specified form.
+ * @param form The form element.
+ * @returns The controls belonging to the specified form.
+ */
+export declare function getControls(form: HTMLFormElement): FormControl[];
+/**
+ * Returns the first invalid control from the specified form.
+ * @param form The form element.
+ * @returns The first invalid control, or `null` if all controls are valid.
+ */
+export declare function invalidControl(form: HTMLFormElement): FormControl | null;
+/**
+ * Returns a value indicating whether the specified element is a form control.
+ * @param element The element to check.
+ * @returns `true` if the specified element is a form control, otherwise `false`.
+ */
+export declare function isControl(element: Element): element is FormControl;
+/**
+ * Resets the validity of the specified element.
+ * @param element The element to process.
+ */
+export declare function resetValidity(element: Element): void;
+/**
+ * Removes whitespace from both ends of the value of the specified element.
+ * @param element The element to process.
+ */
+export declare function trimControl(element: Element): void;
+//# sourceMappingURL=Form.d.ts.map

package/lib/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Client/Form.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,gBAAgB,GAAC,iBAAiB,GAAC,mBAAmB,CAAC;AAEjF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,EAAE,CAEhE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,eAAe,GAAG,WAAW,GAAC,IAAI,CAEtE;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAElE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAGpD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAIlD"}

package/lib/Form.js

@@ -0,0 +1,50 @@
+/**
+ * The types of form controls that are not text inputs.
+ */
+const nonTextualTypes = new Set(["button", "checkbox", "file", "hidden", "image", "password", "radio", "range", "reset", "submit"]);
+/**
+ * Gets all controls belonging to the specified form.
+ * @param form The form element.
+ * @returns The controls belonging to the specified form.
+ */
+export function getControls(form) {
+    return Array.from(form.elements).filter(isControl);
+}
+/**
+ * Returns the first invalid control from the specified form.
+ * @param form The form element.
+ * @returns The first invalid control, or `null` if all controls are valid.
+ */
+export function invalidControl(form) {
+    return form.querySelector(":not(fieldset):invalid");
+}
+/**
+ * Returns a value indicating whether the specified element is a form control.
+ * @param element The element to check.
+ * @returns `true` if the specified element is a form control, otherwise `false`.
+ */
+export function isControl(element) {
+    return element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement;
+}
+/**
+ * Resets the validity of the specified element.
+ * @param element The element to process.
+ */
+export function resetValidity(element) {
+    if (element instanceof HTMLFormElement)
+        getControls(element).forEach(control => control.setCustomValidity(""));
+    else if (isControl(element))
+        element.setCustomValidity("");
+}
+/**
+ * Removes whitespace from both ends of the value of the specified element.
+ * @param element The element to process.
+ */
+export function trimControl(element) {
+    if (element instanceof HTMLFormElement)
+        getControls(element).forEach(trimControl);
+    else if (element instanceof HTMLInputElement && !nonTextualTypes.has(element.type))
+        element.value = element.value.trim();
+    else if (element instanceof HTMLTextAreaElement)
+        element.value = element.value.trim();
+}

package/lib/Htmx.d.ts

@@ -0,0 +1,12 @@
+import htmx, { type HtmxResponseInfo } from "htmx.org";
+export declare const Htmx: typeof htmx.default;
+/**
+ * Provides details about an `htmx` event.
+ */
+export type HtmxEventDetail = HtmxResponseInfo & {
+    /**
+     * The element involved in the operation that just occurred.
+     */
+    elt: Element;
+};
+//# sourceMappingURL=Htmx.d.ts.map

package/lib/Htmx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Htmx.d.ts","sourceRoot":"","sources":["../src/Client/Htmx.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAC,KAAK,gBAAgB,EAAC,MAAM,UAAU,CAAC;AACrD,eAAO,MAAM,IAAI,EAAsB,OAAO,IAAI,CAAC,OAAO,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAEhD;;OAEG;IACH,GAAG,EAAE,OAAO,CAAC;CACb,CAAC"}

package/lib/Htmx.js

@@ -0,0 +1,2 @@
+import htmx, {} from "htmx.org";
+export const Htmx = htmx;

package/lib/KeyboardModifiers.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Enumerates modifier flags for keyboard accelerators.
+ */
+export declare const KeyboardModifiers: Readonly<{
+    /**
+     * Indicates no modifier.
+     */
+    None: 0;
+    /**
+     * Indicates the `Control` modifier.
+     */
+    Ctrl: 1;
+    /**
+     * Indicates the `Shift` modifier.
+     */
+    Shift: 2;
+    /**
+     * Indicates the `Alt` modifier (`Option` key on macOS, `Menu` key on Windows).
+     */
+    Alt: 4;
+    /**
+     * Indicates the `Meta` modifier (`Command` key on macOS, `Windows` key on Windows).
+     */
+    Meta: 8;
+}>;
+//# sourceMappingURL=KeyboardModifiers.d.ts.map

package/lib/KeyboardModifiers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardModifiers.d.ts","sourceRoot":"","sources":["../src/Client/KeyboardModifiers.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,iBAAiB;IAE7B;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC"}

package/lib/KeyboardModifiers.js

@@ -0,0 +1,25 @@
+/**
+ * Enumerates modifier flags for keyboard accelerators.
+ */
+export const KeyboardModifiers = Object.freeze({
+    /**
+     * Indicates no modifier.
+     */
+    None: 0,
+    /**
+     * Indicates the `Control` modifier.
+     */
+    Ctrl: 1,
+    /**
+     * Indicates the `Shift` modifier.
+     */
+    Shift: 2,
+    /**
+     * Indicates the `Alt` modifier (`Option` key on macOS, `Menu` key on Windows).
+     */
+    Alt: 4,
+    /**
+     * Indicates the `Meta` modifier (`Command` key on macOS, `Windows` key on Windows).
+     */
+    Meta: 8
+});

package/lib/Position.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Defines the position of an element.
+ */
+export declare const Position: Readonly<{
+    /**
+     * Top left.
+     */
+    TopStart: "TopStart";
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter";
+    /**
+     * Top right.
+     */
+    TopEnd: "TopEnd";
+    /**
+     * Middle left.
+     */
+    MiddleStart: "MiddleStart";
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter";
+    /**
+     * Middle right.
+     */
+    MiddleEnd: "MiddleEnd";
+    /**
+     * Bottom left.
+     */
+    BottomStart: "BottomStart";
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter";
+    /**
+     * Bottom right.
+     */
+    BottomEnd: "BottomEnd";
+}>;
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];
+/**
+ * Returns the CSS class of the specified position.
+ * @param position The position.
+ * @returns The CSS class of the specified position.
+ */
+export declare function cssClass(position: Position): string;
+//# sourceMappingURL=Position.d.ts.map

package/lib/Position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../src/Client/Position.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAE9D;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAYnD"}

package/lib/Position.js

@@ -0,0 +1,59 @@
+/**
+ * Defines the position of an element.
+ */
+export const Position = Object.freeze({
+    /**
+     * Top left.
+     */
+    TopStart: "TopStart",
+    /**
+     * Top center.
+     */
+    TopCenter: "TopCenter",
+    /**
+     * Top right.
+     */
+    TopEnd: "TopEnd",
+    /**
+     * Middle left.
+     */
+    MiddleStart: "MiddleStart",
+    /**
+     * Middle center.
+     */
+    MiddleCenter: "MiddleCenter",
+    /**
+     * Middle right.
+     */
+    MiddleEnd: "MiddleEnd",
+    /**
+     * Bottom left.
+     */
+    BottomStart: "BottomStart",
+    /**
+     * Bottom center.
+     */
+    BottomCenter: "BottomCenter",
+    /**
+     * Bottom right.
+     */
+    BottomEnd: "BottomEnd"
+});
+/**
+ * Returns the CSS class of the specified position.
+ * @param position The position.
+ * @returns The CSS class of the specified position.
+ */
+export function cssClass(position) {
+    switch (position) {
+        case Position.TopCenter: return "top-0 start-50 translate-middle-x";
+        case Position.TopEnd: return "top-0 end-0";
+        case Position.MiddleStart: return "top-50 start-0 translate-middle-y";
+        case Position.MiddleCenter: return "top-50 start-50 translate-middle";
+        case Position.MiddleEnd: return "top-50 end-0 translate-middle-y";
+        case Position.BottomStart: return "bottom-0 start-0";
+        case Position.BottomCenter: return "bottom-0 start-50 translate-middle-x";
+        case Position.BottomEnd: return "bottom-0 end-0";
+        default: return "top-0 start-0";
+    }
+}