@cedx/base 0.10.1 → 0.12.0

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Belin.io Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.10.1/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.12.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 Base library by [Cédric Belin](https://belin.io), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).

package/lib/Data/Pagination.d.ts

@@ -9,7 +9,7 @@ export declare class Pagination {
      */
     constructor(options?: PaginationOptions);
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     get currentPageIndex(): number;
     set currentPageIndex(value: number);
@@ -27,7 +27,7 @@ export declare class Pagination {
     get itemsPerPage(): number;
     set itemsPerPage(value: number);
     /**
-     * The one-based last page number.
+     * The last page index.
      */
     get lastPageIndex(): number;
     /**
@@ -59,7 +59,7 @@ export declare class Pagination {
  */
 export type PaginationOptions = Partial<{
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     currentPageIndex: number;
     /**

package/lib/Data/Pagination.js

@@ -3,7 +3,7 @@
  */
 export class Pagination {
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     #currentPageIndex;
     /**
@@ -19,18 +19,18 @@ export class Pagination {
      * @param options An object providing values to initialize this instance.
      */
     constructor(options = {}) {
-        this.currentPageIndex = options.currentPageIndex ?? 1;
+        this.currentPageIndex = options.currentPageIndex ?? 0;
         this.itemsPerPage = options.itemsPerPage ?? 25;
         this.totalItemCount = options.totalItemCount ?? 0;
     }
     /**
-     * The one-based current page number.
+     * The current page index.
      */
     get currentPageIndex() {
         return this.#currentPageIndex;
     }
     set currentPageIndex(value) {
-        this.#currentPageIndex = Math.max(1, value);
+        this.#currentPageIndex = Math.max(0, value);
     }
     /**
      * Value indicating whether a next page exists.
@@ -42,7 +42,7 @@ export class Pagination {
      * Value indicating whether a previous page exists.
      */
     get hasPreviousPage() {
-        return this.#currentPageIndex > 1;
+        return this.#currentPageIndex > 0;
     }
     /**
      * The number of items per page.
@@ -54,10 +54,10 @@ export class Pagination {
         this.#itemsPerPage = Math.max(1, Math.min(1000, value));
     }
     /**
-     * The one-based last page number.
+     * The last page index.
      */
     get lastPageIndex() {
-        return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) : 1;
+        return this.#totalItemCount > 0 ? Math.ceil(this.#totalItemCount / this.#itemsPerPage) - 1 : 0;
     }
     /**
      * The data limit.
@@ -69,13 +69,13 @@ export class Pagination {
      * The data offset.
      */
     get offset() {
-        return (this.#currentPageIndex - 1) * this.#itemsPerPage;
+        return this.#currentPageIndex * this.#itemsPerPage;
     }
     /**
      * The search parameters corresponding to this object.
      */
     get searchParams() {
-        return new URLSearchParams({ page: this.#currentPageIndex.toString(), perPage: this.#itemsPerPage.toString() });
+        return new URLSearchParams({ page: (this.#currentPageIndex + 1).toString(), perPage: this.#itemsPerPage.toString() });
     }
     /**
      * The total number of items.
@@ -93,7 +93,7 @@ export class Pagination {
      */
     static fromResponse(response) {
         return new this({
-            currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1"),
+            currentPageIndex: Number(response.headers.get("X-Pagination-Current-Page") ?? "1") - 1,
             itemsPerPage: Number(response.headers.get("X-Pagination-Per-Page") ?? "25"),
             totalItemCount: Number(response.headers.get("X-Pagination-Total-Count") ?? "0")
         });

package/lib/UI/Components/KeyboardAccelerator.d.ts

@@ -22,4 +22,15 @@ export declare class KeyboardAccelerator extends HTMLElement {
      */
     disconnectedCallback(): void;
 }
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "keyboard-accelerator": KeyboardAccelerator;
+    }
+}
 //# sourceMappingURL=KeyboardAccelerator.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"KeyboardAccelerator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/KeyboardAccelerator.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;;IAcnD;;OAEG;IACH,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAItB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAK1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B"}
+{"version":3,"file":"KeyboardAccelerator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/KeyboardAccelerator.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,WAAW;;IAcnD;;OAEG;IACH,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,EAEpB;IAED;;OAEG;IACH,IAAI,SAAS,IAAI,MAAM,CAItB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAK1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,mBAAmB,CAAC;KAC5C;CACD"}

package/lib/UI/Components/KeyboardAccelerator.js

@@ -68,6 +68,6 @@ export class KeyboardAccelerator extends HTMLElement {
         if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey)
             return;
         event.preventDefault();
-        this.firstElementChild.click();
+        this.firstElementChild?.click();
     };
 }

package/lib/UI/Components/OfflineIndicator.d.ts

@@ -3,10 +3,6 @@
  */
 export declare class OfflineIndicator extends HTMLElement {
     #private;
-    /**
-     * Creates a new offline indicator.
-     */
-    constructor();
     /**
      * Method invoked when this component is connected.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAEhD;;OAEG;;IAaH;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAS5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}
+{"version":3,"file":"OfflineIndicator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/OfflineIndicator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;;IAShD;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAQ5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,gBAAgB,CAAC;KACtC;CACD"}

package/lib/UI/Components/OfflineIndicator.js

@@ -2,13 +2,6 @@
  * A component that shows up when the network is unavailable, and hides when connectivity is restored.
  */
 export class OfflineIndicator extends HTMLElement {
-    /**
-     * Creates a new offline indicator.
-     */
-    constructor() {
-        super();
-        this.#updateHiddenState();
-    }
     /**
      * Registers the component.
      */
@@ -19,18 +12,19 @@ export class OfflineIndicator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
+        this.#update();
         for (const event of ["online", "offline"])
-            addEventListener(event, this.#updateHiddenState);
+            addEventListener(event, this.#update);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
         for (const event of ["online", "offline"])
-            removeEventListener(event, this.#updateHiddenState);
+            removeEventListener(event, this.#update);
     }
     /**
-     * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+     * Updates this component.
      */
-    #updateHiddenState = () => this.hidden = navigator.onLine;
+    #update = () => this.hidden = navigator.onLine;
 }

package/lib/UI/Components/TabActivator.d.ts

@@ -4,7 +4,7 @@ import { StorageArea } from "../StorageArea.js";
  */
 export declare class TabActivator extends HTMLElement {
     /**
-     * The one-based index of the active tab.
+     * The index of the active tab.
      */
     get activeTabIndex(): number;
     set activeTabIndex(value: number);
@@ -25,7 +25,7 @@ export declare class TabActivator extends HTMLElement {
     /**
      * The tab list.
      */
-    get tabs(): NodeListOf<HTMLButtonElement>;
+    get tabs(): NodeListOf<HTMLElement>;
     /**
      * Method invoked when this component is connected.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAS5C;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAExC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}
+{"version":3,"file":"TabActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/TabActivator.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C;;GAEG;AACH,qBAAa,YAAa,SAAQ,WAAW;IAS5C;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAG3B;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,EAE/B;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,UAAU,CAAC,OAAO,CAEhC;IAED;;OAEG;IACH,IAAI,WAAW,IAAI,WAAW,CAG7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,CAGvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,UAAU,CAAC,WAAW,CAAC,CAElC;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD"}

package/lib/UI/Components/TabActivator.js

@@ -11,14 +11,14 @@ export class TabActivator extends HTMLElement {
         customElements.define("tab-activator", this);
     }
     /**
-     * The one-based index of the active tab.
+     * The index of the active tab.
      */
     get activeTabIndex() {
-        const index = Number.parseInt(this.storage.getItem(this.storageKey) ?? "1");
-        return Math.max(1, Math.min(this.tabs.length, Number.isNaN(index) ? 1 : index));
+        const index = Number(this.storage.getItem(this.storageKey) ?? "1");
+        return Math.max(0, Math.min(this.tabs.length, Number.isNaN(index) ? 0 : index - 1));
     }
     set activeTabIndex(value) {
-        this.storage.setItem(this.storageKey, value.toString());
+        this.storage.setItem(this.storageKey, (value + 1).toString());
     }
     /**
      * The storage object corresponding to the current {@link storageArea}.
@@ -57,8 +57,8 @@ export class TabActivator extends HTMLElement {
      */
     connectedCallback() {
         const { activeTabIndex, tabs } = this;
-        for (let index = 1; index <= tabs.length; index++) {
-            const tab = tabs.item(index - 1);
+        for (let index = 0; index < tabs.length - 1; index++) {
+            const tab = tabs.item(index);
             tab.addEventListener("click", () => this.activeTabIndex = index);
             if (index == activeTabIndex)
                 Tab.getOrCreateInstance(tab).show();

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

@@ -9,6 +9,10 @@ export declare class ThemeDropdown extends HTMLElement {
      * The list of observed attributes.
      */
     static readonly observedAttributes: string[];
+    /**
+     * Creates a new theme dropdown.
+     */
+    constructor();
     /**
      * The alignment of the dropdown menu.
      */
@@ -36,6 +40,10 @@ export declare class ThemeDropdown extends HTMLElement {
      * @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.
      */
@@ -44,6 +52,14 @@ export declare class ThemeDropdown extends HTMLElement {
      * 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.

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAcxE;;OAEG;IACH,IAAI,SAAS,IAAI,aAAa,CAG7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAEjC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAG3B;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;IAwB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAuB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"ThemeDropdown.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/ThemeDropdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAU,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAC;AAElD;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAE7C;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAAsC;IAYxE;;OAEG;;IAaH;;OAEG;IACH,IAAI,SAAS,IAAI,aAAa,CAG7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAEjC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,QAAQ,CAGvB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAE3B;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;IAe/F;;OAEG;IACH,KAAK,IAAI,IAAI;IAIb;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CAkDZ;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/ThemeDropdown.js

@@ -1,3 +1,4 @@
+import { Dropdown } from "bootstrap";
 import { AppTheme, getIcon } from "../AppTheme.js";
 import { MenuAlignment } from "../MenuAlignment.js";
 /**
@@ -8,10 +9,22 @@ export class ThemeDropdown extends HTMLElement {
      * The list of observed attributes.
      */
     static observedAttributes = ["alignment", "apptheme", "label"];
+    /**
+     * 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("button"))
+            button.addEventListener("click", this.#setAppTheme);
+    }
     /**
      * Registers the component.
      */
@@ -37,7 +50,6 @@ export class ThemeDropdown extends HTMLElement {
     }
     set appTheme(value) {
         this.setAttribute("apptheme", value);
-        localStorage.setItem(this.storageKey, this.appTheme);
     }
     /**
      * The label of the dropdown menu.
@@ -68,52 +80,57 @@ export class ThemeDropdown extends HTMLElement {
     attributeChangedCallback(attribute, oldValue, newValue) {
         if (newValue != oldValue)
             switch (attribute) {
-                case "alignment": {
-                    const alignment = Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End;
-                    const { classList } = this.querySelector(".dropdown-menu");
-                    if (alignment == MenuAlignment.End)
-                        classList.add("dropdown-menu-end");
-                    else
-                        classList.remove("dropdown-menu-end");
+                case "alignment":
+                    this.#updateAlignment(Object.values(MenuAlignment).includes(newValue) ? newValue : MenuAlignment.End);
                     break;
-                }
-                case "apptheme": {
-                    const appTheme = Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System;
-                    this.querySelector(".dropdown-toggle > .icon").textContent = getIcon(appTheme);
-                    this.querySelector(`button[data-theme="${appTheme}"]`).appendChild(this.querySelector(".dropdown-item > .icon"));
-                    this.#applyTheme();
+                case "apptheme":
+                    this.#updateAppTheme(Object.values(AppTheme).includes(newValue) ? newValue : AppTheme.System);
                     break;
-                }
-                case "label": {
-                    this.querySelector(".dropdown-toggle > span").textContent = (newValue ?? "").trim() || "Thème";
+                case "label":
+                    this.#updateLabel(newValue ?? "");
                     break;
-                }
                 // No default
             }
     }
+    /**
+     * Closes the dropdown menu.
+     */
+    close() {
+        this.#dropdown.hide();
+    }
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        for (const button of this.querySelectorAll("button"))
-            button.addEventListener("click", this.#setTheme);
-        this.#mediaQuery.addEventListener("change", this.#applyTheme);
         const appTheme = localStorage.getItem(this.storageKey);
         if (appTheme)
-            this.setAttribute("apptheme", appTheme);
+            this.appTheme = appTheme;
+        this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle"));
+        this.#mediaQuery.addEventListener("change", this.#applyToDocument);
     }
     /**
      * Method invoked when this component is disconnected.
      */
     disconnectedCallback() {
-        for (const button of this.querySelectorAll("button"))
-            button.removeEventListener("click", this.#setTheme);
-        this.#mediaQuery.removeEventListener("change", this.#applyTheme);
+        this.#dropdown.dispose();
+        this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
+    }
+    /**
+     * Opens the dropdown menu.
+     */
+    open() {
+        this.#dropdown.show();
+    }
+    /**
+     * Saves the current application theme into the local storage.
+     */
+    save() {
+        localStorage.setItem(this.storageKey, this.appTheme);
     }
     /**
      * Applies the application theme to the document.
      */
-    #applyTheme = () => {
+    #applyToDocument = () => {
         const { appTheme } = this;
         const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
         document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
@@ -122,9 +139,36 @@ export class ThemeDropdown extends HTMLElement {
      * Changes the current application theme.
      * @param event The dispatched event.
      */
-    #setTheme = event => {
+    #setAppTheme = event => {
         event.preventDefault();
-        const button = event.target.closest("button");
-        this.appTheme = button.dataset.theme;
+        this.appTheme = event.target.closest("button").dataset.theme;
+        this.save();
     };
+    /**
+     * Updates the alignment of the dropdown menu.
+     * @param value The new value.
+     */
+    #updateAlignment(value) {
+        const { classList } = this.querySelector(".dropdown-menu");
+        if (value == MenuAlignment.End)
+            classList.add("dropdown-menu-end");
+        else
+            classList.remove("dropdown-menu-end");
+    }
+    /**
+     * Updates the application theme.
+     * @param value The new value.
+     */
+    #updateAppTheme(value) {
+        this.querySelector(".dropdown-toggle > .icon").textContent = getIcon(value);
+        this.querySelector(`button[data-theme="${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/UI/Components/Toast.d.ts

@@ -0,0 +1,74 @@
+import { Context } from "@cedx/base/UI/Context.js";
+/**
+ * Manages the notification messages.
+ */
+export declare class Toast extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Value indicating whether to apply a fade transition.
+     */
+    get animation(): boolean;
+    set animation(value: boolean);
+    /**
+     * Value indicating whether to automatically hide the notification.
+     */
+    get autoHide(): boolean;
+    set autoHide(value: boolean);
+    /**
+     * 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 the notification.
+     */
+    get delay(): number;
+    set delay(value: number);
+    /**
+     * The time elapsed since this component was initially shown, in milliseconds.
+     */
+    get elapsedTime(): number;
+    /**
+     * The icon displayed next to the caption.
+     */
+    get icon(): string;
+    set icon(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;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Hides this toast.
+     */
+    hide(): void;
+    /**
+     * Shows this toast.
+     */
+    show(): void;
+}
+//# sourceMappingURL=Toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/Toast.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAU,MAAM,0BAA0B,CAAC;AAG1D;;GAEG;AACH,qBAAa,KAAM,SAAQ,WAAW;;IAErC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA6C;IAuC/E;;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,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,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAkB/F;;OAEG;IACH,iBAAiB,IAAI,IAAI;IASzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,IAAI,IAAI,IAAI;CA+DZ"}