@cedx/ui 0.1.0

package/lib/Size.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Defines the size of an element.
+ */
+export declare const Size: Readonly<{
+    /**
+     * An extra small size.
+     */
+    ExtraSmall: "ExtraSmall";
+    /**
+     * A small size.
+     */
+    Small: "Small";
+    /**
+     * A medium size.
+     */
+    Medium: "Medium";
+    /**
+     * A large size.
+     */
+    Large: "Large";
+    /**
+     * An extra large size.
+     */
+    ExtraLarge: "ExtraLarge";
+    /**
+     * An extra extra large size.
+     */
+    ExtraExtraLarge: "ExtraExtraLarge";
+}>;
+/**
+ * Defines the size of an element.
+ */
+export type Size = typeof Size[keyof typeof Size];
+/**
+ * Returns the CSS class of the specified size.
+ * @param size The size.
+ * @returns The CSS class of the specified size.
+ */
+export declare function cssClass(size: Size): string;
+//# sourceMappingURL=Size.d.ts.map

package/lib/Size.d.ts.map

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

package/lib/Size.js

@@ -0,0 +1,44 @@
+/**
+ * Defines the size of an element.
+ */
+export const Size = Object.freeze({
+    /**
+     * An extra small size.
+     */
+    ExtraSmall: "ExtraSmall",
+    /**
+     * A small size.
+     */
+    Small: "Small",
+    /**
+     * A medium size.
+     */
+    Medium: "Medium",
+    /**
+     * A large size.
+     */
+    Large: "Large",
+    /**
+     * An extra large size.
+     */
+    ExtraLarge: "ExtraLarge",
+    /**
+     * An extra extra large size.
+     */
+    ExtraExtraLarge: "ExtraExtraLarge"
+});
+/**
+ * Returns the CSS class of the specified size.
+ * @param size The size.
+ * @returns The CSS class of the specified size.
+ */
+export function cssClass(size) {
+    switch (size) {
+        case Size.ExtraSmall: return "xs";
+        case Size.Small: return "sm";
+        case Size.Large: return "lg";
+        case Size.ExtraLarge: return "xl";
+        case Size.ExtraExtraLarge: return "xxl";
+        default: return "md";
+    }
+}

package/lib/StorageArea.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Identifies the web storage area.
+ */
+export declare const StorageArea: Readonly<{
+    /**
+     * Indicates the local storage.
+     */
+    Local: "Local";
+    /**
+     * Indicates the session storage.
+     */
+    Session: "Session";
+}>;
+/**
+ * Identifies the web storage area.
+ */
+export type StorageArea = typeof StorageArea[keyof typeof StorageArea];
+//# sourceMappingURL=StorageArea.d.ts.map

package/lib/StorageArea.d.ts.map

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

package/lib/StorageArea.js

@@ -0,0 +1,13 @@
+/**
+ * Identifies the web storage area.
+ */
+export const StorageArea = Object.freeze({
+    /**
+     * Indicates the local storage.
+     */
+    Local: "Local",
+    /**
+     * Indicates the session storage.
+     */
+    Session: "Session"
+});

package/lib/Tags.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Creates a CSS stylesheet from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The CSS stylesheet corresponding to the specified template literal.
+ */
+export declare function css(fragments: TemplateStringsArray, ...values: unknown[]): CSSStyleSheet;
+/**
+ * Creates a document fragment from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The document fragment corresponding to the specified template literal.
+ */
+export declare function html(fragments: TemplateStringsArray, ...values: unknown[]): DocumentFragment;
+//# sourceMappingURL=Tags.d.ts.map

package/lib/Tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.d.ts","sourceRoot":"","sources":["../src/Client/Tags.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,SAAS,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,CAQxF;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,SAAS,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAK5F"}

package/lib/Tags.js

@@ -0,0 +1,48 @@
+/**
+ * Creates a CSS stylesheet from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The CSS stylesheet corresponding to the specified template literal.
+ */
+export function css(fragments, ...values) {
+    const styleSheet = new CSSStyleSheet;
+    styleSheet.replaceSync(fragments.length == 1 ? fragments[0] : values.reduce((fragment, value, index) => fragment + stringFromCss(value) + fragments[index + 1], fragments[0]));
+    return styleSheet;
+}
+/**
+ * Creates a document fragment from the specified template literal.
+ * @param fragments The string fragments.
+ * @param values The interpolated values.
+ * @returns The document fragment corresponding to the specified template literal.
+ */
+export function html(fragments, ...values) {
+    return document.createRange().createContextualFragment(fragments.length == 1 ? fragments[0] : values.reduce((fragment, value, index) => fragment + stringFromHtml(value) + fragments[index + 1], fragments[0]));
+}
+/**
+ * Converts the specified value to a CSS string.
+ * @param value A value representing a CSS fragment.
+ * @returns The CSS string corresponding to the specified value.
+ */
+function stringFromCss(value) {
+    if (!(value instanceof CSSStyleSheet)) {
+        if (Array.isArray(value))
+            return value.map(stringFromCss).join("\n");
+        return value === null || typeof value == "undefined" ? "" : String(value); // eslint-disable-line @typescript-eslint/no-base-to-string
+    }
+    return Array.from(value.cssRules).map(cssRule => cssRule.cssText).join("\n");
+}
+/**
+ * Converts the specified value to an HTML string.
+ * @param value A value representing an HTML fragment.
+ * @returns The HTML string corresponding to the specified value.
+ */
+function stringFromHtml(value) {
+    if (!(value instanceof DocumentFragment)) {
+        if (Array.isArray(value))
+            return value.map(stringFromHtml).join("");
+        return value === null || typeof value == "undefined" ? "" : String(value); // eslint-disable-line @typescript-eslint/no-base-to-string
+    }
+    const element = document.createElement("div");
+    element.appendChild(value);
+    return element.innerHTML;
+}

package/lib/Variant.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Defines tone variants.
+ */
+export declare const Variant: Readonly<{
+    /**
+     * A primary tone.
+     */
+    Primary: "Primary";
+    /**
+     * A secondary tone.
+     */
+    Secondary: "Secondary";
+    /**
+     * A light tone.
+     */
+    Light: "Light";
+    /**
+     * A dark tone.
+     */
+    Dark: "Dark";
+    Danger: "Danger";
+    Warning: "Warning";
+    Info: "Info";
+    Success: "Success";
+}>;
+/**
+ * Defines tone variants.
+ */
+export type Variant = typeof Variant[keyof typeof Variant];
+/**
+ * Returns the CSS class of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS class of the specified variant.
+ */
+export declare function cssClass(variant: Variant): string;
+//# sourceMappingURL=Variant.d.ts.map

package/lib/Variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Variant.d.ts","sourceRoot":"","sources":["../src/Client/Variant.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,OAAO;IAGnB;;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"}

package/lib/Variant.js

@@ -0,0 +1,31 @@
+import { Context } from "./Context.js";
+/**
+ * Defines tone variants.
+ */
+export const Variant = Object.freeze({
+    ...Context,
+    /**
+     * A primary tone.
+     */
+    Primary: "Primary",
+    /**
+     * A secondary tone.
+     */
+    Secondary: "Secondary",
+    /**
+     * A light tone.
+     */
+    Light: "Light",
+    /**
+     * A dark tone.
+     */
+    Dark: "Dark"
+});
+/**
+ * Returns the CSS class of the specified variant.
+ * @param variant The variant.
+ * @returns The CSS class of the specified variant.
+ */
+export function cssClass(variant) {
+    return variant.toLowerCase();
+}

package/lib/ViewportScroller.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Defines the scrolling options.
+ */
+export type ScrollOptions = Partial<{
+    /**
+     * Value indicating whether scrolling is instant or animates smoothly.
+     */
+    behavior: ScrollBehavior;
+}>;
+/**
+ * Manages the scroll position.
+ */
+export declare class ViewportScroller {
+    #private;
+    /**
+     * Creates a new viewport scroller.
+     * @param viewport A function that returns the element used as viewport.
+     */
+    constructor(viewport?: () => Element);
+    /**
+     * The top offset used when scrolling to an element.
+     */
+    get scrollOffset(): number;
+    /**
+     * Scrolls to the specified anchor.
+     * @param anchor The identifier or name of an element.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToAnchor(anchor: string, options?: ScrollOptions): void;
+    /**
+     * Scrolls to the specified element.
+     * @param element The element to scroll to.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToElement(element: Element, options?: ScrollOptions): void;
+    /**
+     * Scrolls to the specified position.
+     * @param x The pixel along the horizontal axis.
+     * @param y The pixel along the vertical axis.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToPosition(x: number, y: number, options?: ScrollOptions): void;
+    /**
+     * Scrolls to the top.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToTop(options?: ScrollOptions): void;
+}
+//# sourceMappingURL=ViewportScroller.d.ts.map

package/lib/ViewportScroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportScroller.d.ts","sourceRoot":"","sources":["../src/Client/ViewportScroller.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC;IAEnC;;OAEG;IACH,QAAQ,EAAE,cAAc,CAAA;CACxB,CAAC,CAAC;AAEH;;GAEG;AACH,qBAAa,gBAAgB;;IAY5B;;;OAGG;gBACS,QAAQ,GAAE,MAAM,OAAqE;IAIjG;;OAEG;IACH,IAAI,YAAY,IAAI,MAAM,CAWzB;IAED;;;;OAIG;IACH,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,IAAI;IAKjE;;;;OAIG;IACH,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,GAAE,aAAkB,GAAG,IAAI;IAMpE;;;;;OAKG;IACH,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,IAAI;IAIzE;;;OAGG;IACH,WAAW,CAAC,OAAO,GAAE,aAAkB,GAAG,IAAI;CAG9C"}

package/lib/ViewportScroller.js

@@ -0,0 +1,69 @@
+/**
+ * Manages the scroll position.
+ */
+export class ViewportScroller {
+    /**
+     * The top offset used when scrolling to an element.
+     */
+    #scrollOffset = -1;
+    /**
+     * The function returning the element used as viewport.
+     */
+    #viewport;
+    /**
+     * Creates a new viewport scroller.
+     * @param viewport A function that returns the element used as viewport.
+     */
+    constructor(viewport = () => document.scrollingElement ?? document.documentElement) {
+        this.#viewport = viewport;
+    }
+    /**
+     * The top offset used when scrolling to an element.
+     */
+    get scrollOffset() {
+        if (this.#scrollOffset < 0) {
+            const fontSize = Number.parseInt(getComputedStyle(document.body).fontSize, 10);
+            this.#scrollOffset = Number.isNaN(fontSize) ? 0 : fontSize * 2;
+            const navbar = document.body.querySelector(".navbar");
+            this.#scrollOffset += (navbar?.offsetHeight ?? 0);
+        }
+        const actionBar = document.body.querySelector("action-bar");
+        return this.#scrollOffset + (actionBar?.offsetHeight ?? 0);
+    }
+    /**
+     * Scrolls to the specified anchor.
+     * @param anchor The identifier or name of an element.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToAnchor(anchor, options = {}) {
+        const element = document.getElementById(anchor) ?? this.#viewport().querySelector(`[name="${anchor}"]`);
+        if (element)
+            this.scrollToElement(element, options);
+    }
+    /**
+     * Scrolls to the specified element.
+     * @param element The element to scroll to.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToElement(element, options = {}) {
+        const { left, top } = element.getBoundingClientRect();
+        const { scrollLeft, scrollTop } = this.#viewport();
+        this.scrollToPosition(left + scrollLeft, top + scrollTop - this.scrollOffset, options);
+    }
+    /**
+     * Scrolls to the specified position.
+     * @param x The pixel along the horizontal axis.
+     * @param y The pixel along the vertical axis.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToPosition(x, y, options = {}) {
+        this.#viewport().scrollTo({ left: x, top: y, behavior: options.behavior ?? "auto" });
+    }
+    /**
+     * Scrolls to the top.
+     * @param options Value indicating whether scrolling is instant or animates smoothly.
+     */
+    scrollToTop(options = {}) {
+        this.scrollToPosition(0, 0, options);
+    }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+	"author": "Cédric Belin <cedx@outlook.com>",
+	"bugs": "https://github.com/cedx/ui/issues",
+	"description": "Component library by Cédric Belin, full stack developer.",
+	"homepage": "https://github.com/cedx/ui",
+	"license": "MIT",
+	"name": "@cedx/ui",
+	"repository": "cedx/ui",
+	"type": "module",
+	"version": "0.1.0",
+	"devDependencies": {
+		"@eslint/js": "^10.0.1",
+		"@types/bootstrap": "^5.2.10",
+		"@types/chai": "^5.2.3",
+		"@types/mocha": "^10.0.10",
+		"@types/node": "^25.6.0",
+		"@types/serve-handler": "^6.1.4",
+		"bootstrap": "^5.3.8",
+		"chai": "^6.2.2",
+		"esbuild": "^0.28.0",
+		"globals": "^17.4.0",
+		"htmx.org": "^2.0.8",
+		"mocha": "^11.7.5",
+		"playwright": "^1.59.1",
+		"playwright-chromium": "^1.59.1",
+		"serve-handler": "^6.1.7",
+		"typescript": "^6.0.2",
+		"typescript-eslint": "^8.58.1"
+	},
+	"engines": {
+		"node": ">=24.0.0"
+	},
+	"exports": {
+		"./*.js": {
+			"types": "./lib/*.d.ts",
+			"default": "./lib/*.js"
+		}
+	},
+	"files": [
+		"lib/",
+		"src/Client/"
+	],
+	"keywords": [
+		"belin",
+		"blazor",
+		"components",
+		"html",
+		"library",
+		"ui"
+	],
+	"peerDependencies": {
+		"bootstrap": ">=5.3.0",
+		"htmx.org": ">=2.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/src/Client/Alignment.ts

@@ -0,0 +1,25 @@
+/**
+ * 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"
+});
+
+/**
+ * Defines the alignment of a component.
+ */
+export type Alignment = typeof Alignment[keyof typeof Alignment];

package/src/Client/AppTheme.ts

@@ -0,0 +1,51 @@
+/**
+ * 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"
+});
+
+/**
+ * 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 function icon(theme: AppTheme): string {
+	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: AppTheme): string {
+	switch (theme) {
+		case AppTheme.Dark: return "Sombre";
+		case AppTheme.Light: return "Clair";
+		default: return "Auto";
+	}
+}

package/src/Client/Components/BackButton.ts

@@ -0,0 +1,45 @@
+/**
+ * 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(): number {
+		const value = Number(this.getAttribute("steps"));
+		return Math.max(0, Number.isNaN(value) ? 1 : value);
+	}
+	set steps(value: number) {
+		this.setAttribute("steps", value.toString());
+	}
+
+	/**
+	 * Moves back in the session history.
+	 * @param event The dispatched event.
+	 */
+	goBack(event?: Event): void {
+		event?.preventDefault();
+		history.go(-this.steps);
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"back-button": BackButton;
+	}
+}