@cedx/ui 0.1.0

package/lib/Components/TabActivator.js

@@ -0,0 +1,70 @@
+import { Tab } from "bootstrap";
+import { StorageArea } from "../StorageArea.js";
+/**
+ * A component that activates a tab, based on its index saved in the web storage.
+ */
+export class TabActivator extends HTMLElement {
+    /**
+     * Creates a new tab activator.
+     */
+    constructor() {
+        super();
+        const { tabs } = this;
+        for (let index = 0; index < tabs.length; index++)
+            tabs.item(index).addEventListener("show.bs.tab", () => this.activeTabIndex = index);
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("tab-activator", this);
+    }
+    /**
+     * The index of the active tab.
+     */
+    get activeTabIndex() {
+        const index = Number(this.storage.getItem(this.storageKey) ?? "0");
+        return Math.max(0, Math.min(this.tabs.length - 1, Number.isNaN(index) ? 0 : index));
+    }
+    set activeTabIndex(value) {
+        this.storage.setItem(this.storageKey, value.toString());
+    }
+    /**
+     * The storage object corresponding to the current {@link storageArea}.
+     */
+    get storage() {
+        return this.storageArea == StorageArea.Local ? localStorage : sessionStorage;
+    }
+    /**
+     * The storage area to use.
+     */
+    get storageArea() {
+        const value = this.getAttribute("storagearea");
+        return Object.values(StorageArea).includes(value) ? value : StorageArea.Session;
+    }
+    set storageArea(value) {
+        this.setAttribute("storagearea", value);
+    }
+    /**
+     * The key of the storage entry providing the active tab index.
+     */
+    get storageKey() {
+        const value = this.getAttribute("storagekey") ?? "";
+        return value.trim() || "ActiveTabIndex";
+    }
+    set storageKey(value) {
+        this.setAttribute("storagekey", value);
+    }
+    /**
+     * The tab list.
+     */
+    get tabs() {
+        return this.querySelectorAll('[data-bs-toggle="tab"]');
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        Tab.getOrCreateInstance(this.tabs.item(this.activeTabIndex)).show();
+    }
+}

package/lib/Components/ThemeDropdown.d.ts

@@ -0,0 +1,86 @@
+import { Alignment } from "../Alignment.js";
+import { AppTheme } from "../AppTheme.js";
+/**
+ * A dropdown menu for switching the application theme.
+ */
+export declare class ThemeDropdown extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Creates a new theme dropdown.
+     */
+    constructor();
+    /**
+     * The alignment of the dropdown menu.
+     */
+    get alignment(): Alignment;
+    set alignment(value: Alignment);
+    /**
+     * The current application theme.
+     */
+    get appTheme(): AppTheme;
+    set appTheme(value: AppTheme);
+    /**
+     * Value indicating whether to store the application theme in a cookie.
+     */
+    get cookie(): boolean;
+    set cookie(value: boolean);
+    /**
+     * The URI for which the associated cookie is valid.
+     */
+    get cookieDomain(): string;
+    set cookieDomain(value: string);
+    /**
+     * The label of the dropdown menu.
+     */
+    get label(): string;
+    set label(value: string);
+    /**
+     * The key of the storage entry providing the saved application theme.
+     */
+    get storageKey(): string;
+    set storageKey(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;
+    /**
+     * Closes the dropdown menu.
+     */
+    close(): void;
+    /**
+     * Method invoked when this component is connected.
+     * @returns Completes when this component has been connected.
+     */
+    connectedCallback(): Promise<void>;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Opens the dropdown menu.
+     */
+    open(): void;
+    /**
+     * Saves the current application theme into the local storage.
+     */
+    save(): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "theme-dropdown": ThemeDropdown;
+    }
+}
+//# sourceMappingURL=ThemeDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../src/Client/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAC,QAAQ,EAAO,MAAM,gBAAgB,CAAC;AAE9C;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAiBxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,SAAS,CAGzB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAEzB;IACD,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,EAE7B;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,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;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;;OAGG;IACG,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC;IAaxC;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAwDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/Components/ThemeDropdown.js

@@ -0,0 +1,207 @@
+import { Dropdown } from "bootstrap";
+import { Alignment } from "../Alignment.js";
+import { AppTheme, icon } from "../AppTheme.js";
+/**
+ * A dropdown menu for switching the application theme.
+ */
+export class ThemeDropdown extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["alignment", "apptheme", "label"];
+    /**
+     * The abort controller used to remove the event listeners.
+     */
+    #abortController = null;
+    /**
+     * The dropdown menu.
+     */
+    #dropdown;
+    /**
+     * The media query used to check the application theme.
+     */
+    #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+    /**
+     * Creates a new theme dropdown.
+     */
+    constructor() {
+        super();
+        for (const button of this.querySelectorAll(".dropdown-menu button"))
+            button.addEventListener("click", this.#setAppTheme);
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("theme-dropdown", this);
+    }
+    /**
+     * The alignment of the dropdown menu.
+     */
+    get alignment() {
+        const value = this.getAttribute("alignment");
+        return Object.values(Alignment).includes(value) ? value : Alignment.End;
+    }
+    set alignment(value) {
+        this.setAttribute("alignment", value);
+    }
+    /**
+     * The current application theme.
+     */
+    get appTheme() {
+        const value = this.getAttribute("apptheme");
+        return Object.values(AppTheme).includes(value) ? value : AppTheme.System;
+    }
+    set appTheme(value) {
+        this.setAttribute("apptheme", value);
+    }
+    /**
+     * Value indicating whether to store the application theme in a cookie.
+     */
+    get cookie() {
+        return this.hasAttribute("cookie");
+    }
+    set cookie(value) {
+        this.toggleAttribute("cookie", value);
+    }
+    /**
+     * The URI for which the associated cookie is valid.
+     */
+    get cookieDomain() {
+        return (this.getAttribute("cookiedomain") ?? "").trim();
+    }
+    set cookieDomain(value) {
+        this.setAttribute("cookiedomain", value);
+    }
+    /**
+     * The label of the dropdown menu.
+     */
+    get label() {
+        const value = this.getAttribute("label") ?? "";
+        return value.trim() || "Thème";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    /**
+     * The key of the storage entry providing the saved application theme.
+     */
+    get storageKey() {
+        const value = this.getAttribute("storagekey") ?? "";
+        return value.trim() || "AppTheme";
+    }
+    set storageKey(value) {
+        this.setAttribute("storagekey", 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 "alignment":
+                    this.#updateAlignment(Object.values(Alignment).includes(newValue) ? newValue : Alignment.End);
+                    break;
+                case "apptheme":
+                    this.#updateAppTheme(Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System);
+                    break;
+                case "label":
+                    this.#updateLabel(newValue ?? "");
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Closes the dropdown menu.
+     */
+    close() {
+        this.#dropdown.hide();
+    }
+    /**
+     * Method invoked when this component is connected.
+     * @returns Completes when this component has been connected.
+     */
+    async connectedCallback() {
+        this.#abortController = new AbortController;
+        this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle"));
+        this.#mediaQuery.addEventListener("change", () => this.#applyToDocument(), { signal: this.#abortController.signal });
+        const cookie = this.cookie ? await cookieStore.get(this.storageKey) : null;
+        if (cookie)
+            this.appTheme = cookie.value;
+        else {
+            const storage = localStorage.getItem(this.storageKey);
+            if (storage)
+                this.appTheme = storage;
+        }
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        this.#abortController?.abort();
+        this.#dropdown.dispose();
+    }
+    /**
+     * Opens the dropdown menu.
+     */
+    open() {
+        this.#dropdown.show();
+    }
+    /**
+     * Saves the current application theme into the local storage.
+     */
+    save() {
+        const { appTheme, cookieDomain } = this;
+        localStorage.setItem(this.storageKey, appTheme);
+        if (this.cookie)
+            void cookieStore.set({
+                domain: cookieDomain ? cookieDomain : null,
+                expires: Date.now() + (365 * 24 * 60 * 60 * 1_000),
+                name: this.storageKey,
+                value: appTheme
+            });
+    }
+    /**
+     * Applies the application theme to the document.
+     */
+    #applyToDocument() {
+        const { appTheme } = this;
+        const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
+        document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
+    }
+    /**
+     * Changes the current application theme.
+     * @param event The dispatched event.
+     */
+    #setAppTheme = event => {
+        event.preventDefault();
+        this.appTheme = event.currentTarget.value;
+        this.save();
+    };
+    /**
+     * Updates the alignment of the dropdown menu.
+     * @param value The new value.
+     */
+    #updateAlignment(value) {
+        this.querySelector(".dropdown-menu").classList.toggle("dropdown-menu-end", value == Alignment.End);
+    }
+    /**
+     * Updates the application theme.
+     * @param value The new value.
+     */
+    #updateAppTheme(value) {
+        this.querySelector(".dropdown-toggle > .icon").textContent = icon(value);
+        this.querySelector(`.dropdown-menu button[value="${value}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
+        this.#applyToDocument();
+    }
+    /**
+     * Updates the label of the dropdown menu.
+     * @param value The new value.
+     */
+    #updateLabel(value) {
+        this.querySelector(".dropdown-toggle > span").textContent = value.trim() || "Thème";
+    }
+}

package/lib/Components/Toast.d.ts

@@ -0,0 +1,94 @@
+import { Context } from "../Context.js";
+/**
+ * Represents a notification.
+ */
+export declare class Toast extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Value indicating whether to automatically hide this toast.
+     */
+    get autoHide(): boolean;
+    set autoHide(value: boolean);
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value: DocumentFragment);
+    /**
+     * The title displayed in the header.
+     */
+    get caption(): string;
+    set caption(value: string);
+    /**
+     * A contextual modifier.
+     */
+    get context(): Context;
+    set context(value: Context);
+    /**
+     * The culture used to format the relative time.
+     */
+    get culture(): Intl.Locale;
+    set culture(value: Intl.Locale);
+    /**
+     * The delay, in milliseconds, to hide this toast.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * The time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime(): number;
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon(): string | null;
+    set icon(value: string | null);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * 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;
+    /**
+     * Closes this toast.
+     */
+    close(): void;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Shows this toast.
+     */
+    show(): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "toaster-item": Toast;
+    }
+}
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Client/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAiB,MAAM,eAAe,CAAC;AAEtD;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0E;IAuC5G;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,CAAC,KAAK,EAAE,gBAAgB,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;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,WAAW,IAAI,MAAM,CAExB;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,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAa/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAWzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAM5B;;OAEG;IACH,IAAI,IAAI,IAAI;CAwGZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,cAAc,EAAE,KAAK,CAAC;KACtB;CACD"}