@cedx/ui 0.1.0

package/License.md

@@ -0,0 +1,20 @@
+# MIT License
+Copyright © Cédric Belin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/ReadMe.md

@@ -0,0 +1,17 @@
+# Belin UI
+Component library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
+implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).
+
+> This library is dedicated to personal/side projects.  
+> **Use at your own risk!** No support will be provided.
+
+## Documentation
+- [User guide](https://github.com/cedx/ui/tree/main/docs)
+- [Examples](https://github.com/cedx/ui/tree/main/example)
+
+## Development
+- [Git repository](https://github.com/cedx/ui)
+- [Submit an issue](https://github.com/cedx/ui/issues)
+
+## Licence
+[Belin UI](https://github.com/cedx/ui) is distributed under the MIT License.

package/lib/Alignment.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Defines the alignment of a component.
+ */
+export declare const Alignment: Readonly<{
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start";
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center";
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End";
+}>;
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];
+//# sourceMappingURL=Alignment.d.ts.map

package/lib/Alignment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alignment.d.ts","sourceRoot":"","sources":["../src/Client/Alignment.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,SAAS;IAErB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;EAEF,CAAC;AAEH;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC"}

package/lib/Alignment.js

@@ -0,0 +1,17 @@
+/**
+ * Defines the alignment of a component.
+ */
+export const Alignment = Object.freeze({
+    /**
+     * The element is aligned at the start.
+     */
+    Start: "Start",
+    /**
+     * The element is aligned in the center.
+     */
+    Center: "Center",
+    /**
+     * The element is aligned at the end.
+     */
+    End: "End"
+});

package/lib/AppTheme.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Enumerates different themes an operating system or application can show.
+ */
+export declare const AppTheme: Readonly<{
+    /**
+     * The system theme.
+     */
+    System: "System";
+    /**
+     * The light theme.
+     */
+    Light: "Light";
+    /**
+     * The dark theme.
+     */
+    Dark: "Dark";
+}>;
+/**
+ * Enumerates different themes an operating system or application can show.
+ */
+export type AppTheme = typeof AppTheme[keyof typeof AppTheme];
+/**
+ * Gets the icon corresponding to the specified theme.
+ * @param theme The application theme.
+ * @returns The icon corresponding to the specified theme.
+ */
+export declare function icon(theme: AppTheme): string;
+/**
+ * Gets the label corresponding to the specified theme.
+ * @param theme The application theme.
+ * @returns The label corresponding to the specified theme.
+ */
+export declare function label(theme: AppTheme): string;
+//# sourceMappingURL=AppTheme.d.ts.map

package/lib/AppTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTheme.d.ts","sourceRoot":"","sources":["../src/Client/AppTheme.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,eAAO,MAAM,QAAQ;IAEpB;;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,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM5C;AAED;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM7C"}

package/lib/AppTheme.js

@@ -0,0 +1,41 @@
+/**
+ * Enumerates different themes an operating system or application can show.
+ */
+export const AppTheme = Object.freeze({
+    /**
+     * The system theme.
+     */
+    System: "System",
+    /**
+     * The light theme.
+     */
+    Light: "Light",
+    /**
+     * The dark theme.
+     */
+    Dark: "Dark"
+});
+/**
+ * Gets the icon corresponding to the specified theme.
+ * @param theme The application theme.
+ * @returns The icon corresponding to the specified theme.
+ */
+export function icon(theme) {
+    switch (theme) {
+        case AppTheme.Dark: return "dark_mode";
+        case AppTheme.Light: return "light_mode";
+        default: return "contrast";
+    }
+}
+/**
+ * Gets the label corresponding to the specified theme.
+ * @param theme The application theme.
+ * @returns The label corresponding to the specified theme.
+ */
+export function label(theme) {
+    switch (theme) {
+        case AppTheme.Dark: return "Sombre";
+        case AppTheme.Light: return "Clair";
+        default: return "Auto";
+    }
+}

package/lib/Components/BackButton.d.ts

@@ -0,0 +1,27 @@
+/**
+ * A component that moves back in the session history when clicked.
+ */
+export declare class BackButton extends HTMLElement {
+    /**
+     * The number of pages to go back.
+     */
+    get steps(): number;
+    set steps(value: number);
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    goBack(event?: Event): void;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "back-button": BackButton;
+    }
+}
+//# sourceMappingURL=BackButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../src/Client/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAS1C;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;CAI3B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/lib/Components/BackButton.js

@@ -0,0 +1,29 @@
+/**
+ * A component that moves back in the session history when clicked.
+ */
+export class BackButton extends HTMLElement {
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("back-button", this);
+    }
+    /**
+     * The number of pages to go back.
+     */
+    get steps() {
+        const value = Number(this.getAttribute("steps"));
+        return Math.max(0, Number.isNaN(value) ? 1 : value);
+    }
+    set steps(value) {
+        this.setAttribute("steps", value.toString());
+    }
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    goBack(event) {
+        event?.preventDefault();
+        history.go(-this.steps);
+    }
+}

package/lib/Components/DialogBox.d.ts

@@ -0,0 +1,151 @@
+import { type Context } from "../Context.js";
+import { Variant } from "../Variant.js";
+/**
+ * Represents a dialog box button.
+ */
+export interface IDialogButton {
+    /**
+     * The button icon.
+     */
+    icon?: string;
+    /**
+     * The button label.
+     */
+    label?: string;
+    /**
+     * The button value.
+     */
+    value?: string;
+    /**
+     * A tone variant.
+     */
+    variant?: Variant;
+}
+/**
+ * Represents a message to display in a dialog box.
+ */
+export interface IDialogMessage {
+    /**
+     * The child content displayed in the body.
+     */
+    body: DocumentFragment;
+    /**
+     * The title displayed in the header.
+     */
+    caption: string;
+    /**
+     * The child content displayed in the footer.
+     */
+    footer?: DocumentFragment;
+}
+/**
+ * Displays a dialog box, which presents a message to the user.
+ */
+export declare class DialogBox extends HTMLElement {
+    #private;
+    /**
+     * The list of observed attributes.
+     */
+    static readonly observedAttributes: string[];
+    /**
+     * Creates a new dialog box.
+     */
+    constructor();
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value: DocumentFragment);
+    /**
+     * The title displayed in the header.
+     */
+    get caption(): string;
+    set caption(value: string);
+    /**
+     * Value indicating whether to vertically center this dialog box.
+     */
+    get centered(): boolean;
+    set centered(value: boolean);
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade(): boolean;
+    set fade(value: boolean);
+    /**
+     * The child content displayed in the footer.
+     */
+    set footer(value: DocumentFragment);
+    /**
+     * Value indicating whether to this dialog box will not close when clicking outside of it.
+     */
+    get modal(): boolean;
+    set modal(value: boolean);
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open(): boolean;
+    set open(value: boolean);
+    /**
+     * The dialog result.
+     */
+    get result(): string;
+    /**
+     * Value indicating whether the body is scrollable.
+     */
+    get scrollable(): boolean;
+    set scrollable(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;
+    /**
+     * Shows an alert message with an "OK" button by default.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param message The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog result.
+     */
+    alert(context: Context, caption: string, message: DocumentFragment, buttons?: IDialogButton[]): Promise<string>;
+    /**
+     * Closes this dialog box.
+     * @param result The dialog result.
+     */
+    close(result?: string): void;
+    /**
+     * Shows a confirmation message with two buttons, "OK" and "Cancel".
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param message The child content displayed in the body.
+     * @returns The dialog result.
+     */
+    confirm(context: Context, caption: string, message: DocumentFragment): Promise<string>;
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Shows a message.
+     * @param message The message to show.
+     * @returns The dialog result.
+     */
+    show(message?: IDialogMessage | null): Promise<string>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "dialog-box": DialogBox;
+    }
+}
+//# sourceMappingURL=DialogBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../src/Client/Components/DialogBox.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,OAAO,EAAmD,MAAM,eAAe,CAAC;AAG7F,OAAO,EAAC,OAAO,EAA8B,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,aAAa;IAE7B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAE9B;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW;;IAEzC;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,kBAAkB,WAA0D;IAiB5F;;OAEG;;IAeH;;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,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,CAAC,KAAK,EAAE,gBAAgB,EAIjC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED;;OAEG;IACH,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED;;;;;OAKG;IACH,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAC,IAAI,GAAG,IAAI;IAW/F;;;;;;;OAOG;IACH,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,GAAE,aAAa,EAAO,GAAG,OAAO,CAAC,MAAM,CAAC;IAoBnH;;;OAGG;IACH,KAAK,CAAC,MAAM,GAAE,MAA0B,GAAG,IAAI;IAK/C;;;;;;OAMG;IACH,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC;IAOtF;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;;OAIG;IACH,IAAI,CAAC,OAAO,GAAE,cAAc,GAAC,IAAW,GAAG,OAAO,CAAC,MAAM,CAAC;CAgE1D;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/lib/Components/DialogBox.js

@@ -0,0 +1,268 @@
+import { Modal } from "bootstrap";
+import { cssClass as contextCssClass, icon as contextIcon } from "../Context.js";
+import { DialogResult } from "../DialogResult.js";
+import { html } from "../Tags.js";
+import { Variant, cssClass as variantCssClass } from "../Variant.js";
+/**
+ * Displays a dialog box, which presents a message to the user.
+ */
+export class DialogBox extends HTMLElement {
+    /**
+     * The list of observed attributes.
+     */
+    static observedAttributes = ["caption", "centered", "fade", "modal", "scrollable"];
+    /**
+     * The underlying Bootstrap modal.
+     */
+    #modal;
+    /**
+     * The function invoked to resolve the dialog result.
+     */
+    #resolve;
+    /**
+     * The promise providing the dialog result.
+     */
+    #result = DialogResult.None;
+    /**
+     * Creates a new dialog box.
+     */
+    constructor() {
+        super();
+        this.firstElementChild.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+        this.querySelector(".btn-close").addEventListener("click", this.#close);
+        for (const button of this.querySelectorAll(".modal-footer button"))
+            button.addEventListener("click", this.#close);
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("dialog-box", this);
+    }
+    /**
+     * The child content displayed in the body.
+     */
+    set body(value) {
+        this.querySelector(".modal-body").replaceChildren(...value.childNodes);
+    }
+    /**
+     * The title displayed in the header.
+     */
+    get caption() {
+        return (this.getAttribute("caption") ?? "").trim();
+    }
+    set caption(value) {
+        this.setAttribute("caption", value);
+    }
+    /**
+     * Value indicating whether to vertically center this dialog box.
+     */
+    get centered() {
+        return this.hasAttribute("centered");
+    }
+    set centered(value) {
+        this.toggleAttribute("centered", value);
+    }
+    /**
+     * Value indicating whether to apply a transition.
+     */
+    get fade() {
+        return this.hasAttribute("fade");
+    }
+    set fade(value) {
+        this.toggleAttribute("fade", value);
+    }
+    /**
+     * The child content displayed in the footer.
+     */
+    set footer(value) {
+        const footer = this.querySelector(".modal-footer");
+        footer.hidden = !value.hasChildNodes();
+        footer.replaceChildren(...value.childNodes);
+    }
+    /**
+     * Value indicating whether to this dialog box will not close when clicking outside of it.
+     */
+    get modal() {
+        return this.hasAttribute("modal");
+    }
+    set modal(value) {
+        this.toggleAttribute("modal", value);
+    }
+    /**
+     * Value indicating whether to initially show this component.
+     */
+    get open() {
+        return this.hasAttribute("open");
+    }
+    set open(value) {
+        this.toggleAttribute("open", value);
+    }
+    /**
+     * The dialog result.
+     */
+    get result() {
+        return this.#result;
+    }
+    /**
+     * Value indicating whether the body is scrollable.
+     */
+    get scrollable() {
+        return this.hasAttribute("scrollable");
+    }
+    set scrollable(value) {
+        this.toggleAttribute("scrollable", 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 "caption":
+                    this.#updateCaption(newValue ?? "");
+                    break;
+                case "centered":
+                    this.#updateCentered(newValue != null);
+                    break;
+                case "fade":
+                    this.#updateFade(newValue != null);
+                    break;
+                case "modal":
+                    this.#updateModal(newValue != null);
+                    break;
+                case "scrollable":
+                    this.#updateScrollable(newValue != null);
+                    break;
+                // No default
+            }
+    }
+    /**
+     * Shows an alert message with an "OK" button by default.
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param message The child content displayed in the body.
+     * @param buttons The buttons displayed in the footer.
+     * @returns The dialog result.
+     */
+    alert(context, caption, message, buttons = []) {
+        return this.show({
+            caption,
+            body: html `
+				<div class="d-flex gap-2">
+					<i class="icon icon-fill fs-1 text-${contextCssClass(context)}"> ${contextIcon(context)}</i>
+					<div class="flex-grow-1">${message}</div>
+				</div>
+			`,
+            footer: html `
+				${(buttons.length ? buttons : [{ label: "OK", value: DialogResult.OK, variant: Variant.Primary }]).map(button => html `
+					<button class="btn btn-${variantCssClass(button.variant ?? Variant.Primary)}" type="button" value="${button.value ?? DialogResult.None}">
+						${button.icon ? html `<i class="icon ${button.label ? "me-1" : ""}">${button.icon}</i>` : ""}
+						${button.label}
+					</button>
+				`)}
+			`
+        });
+    }
+    /**
+     * Closes this dialog box.
+     * @param result The dialog result.
+     */
+    close(result = DialogResult.None) {
+        this.#result = result;
+        this.#modal.hide();
+    }
+    /**
+     * Shows a confirmation message with two buttons, "OK" and "Cancel".
+     * @param context The contextual modifier.
+     * @param caption The title displayed in the header.
+     * @param message The child content displayed in the body.
+     * @returns The dialog result.
+     */
+    confirm(context, caption, message) {
+        return this.alert(context, caption, message, [
+            { label: "OK", value: DialogResult.OK, variant: Variant.Primary },
+            { label: "Annuler", value: DialogResult.Cancel, variant: Variant.Secondary }
+        ]);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        this.#modal = new Modal(this.firstElementChild);
+        if (this.open)
+            void this.show();
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        this.#modal.dispose();
+    }
+    /**
+     * Shows a message.
+     * @param message The message to show.
+     * @returns The dialog result.
+     */
+    show(message = null) {
+        if (message) {
+            const footer = message.footer ?? document.createDocumentFragment();
+            for (const button of footer.querySelectorAll("button"))
+                button.addEventListener("click", this.#close);
+            this.body = message.body;
+            this.caption = message.caption;
+            this.footer = footer;
+        }
+        const { promise, resolve } = Promise.withResolvers();
+        this.#resolve = resolve;
+        this.#result = DialogResult.None;
+        this.#modal.show();
+        return promise;
+    }
+    /**
+     * Closes this dialog box.
+     * @param event The dispatched event.
+     */
+    #close = event => {
+        event.preventDefault();
+        this.close(event.currentTarget.value);
+    };
+    /**
+     * Updates the title displayed in the header.
+     * @param value The new value.
+     */
+    #updateCaption(value) {
+        this.querySelector(".modal-title").textContent = value.trim();
+    }
+    /**
+     * Updates the value indicating whether to vertically center this dialog box.
+     * @param value The new value.
+     */
+    #updateCentered(value) {
+        this.querySelector(".modal-dialog").classList.toggle("modal-dialog-centered", value);
+    }
+    /**
+     * Updates the value indicating whether to apply a transition.
+     * @param value The new value.
+     */
+    #updateFade(value) {
+        this.firstElementChild.classList.toggle("fade", value);
+    }
+    /**
+     * Updates the value indicating whether to this dialog box will not close when clicking outside of it.
+     * @param value The new value.
+     */
+    #updateModal(value) {
+        this.firstElementChild.dataset.bsBackdrop = value ? "static" : "true";
+    }
+    /**
+     * Updates the value indicating whether the body is scrollable.
+     * @param value The new value.
+     */
+    #updateScrollable(value) {
+        this.querySelector(".modal-dialog").classList.toggle("modal-dialog-scrollable", value);
+    }
+}

package/lib/Components/FullScreenToggler.d.ts

@@ -0,0 +1,42 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export declare class FullScreenToggler extends HTMLElement {
+    #private;
+    /**
+     * The CSS selector specifying the target element.
+     */
+    get target(): string;
+    set target(value: string);
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock(): boolean;
+    set wakeLock(value: boolean);
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Completes when the full-screen mode has been toggled.
+     */
+    toggleFullScreen(event?: Event): Promise<void>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "fullscreen-toggler": FullScreenToggler;
+    }
+}
+//# sourceMappingURL=FullScreenToggler.d.ts.map