@cedx/base 0.1.0

package/src/Client/Http/StatusCodes.ts

@@ -0,0 +1,140 @@
+/**
+ * Provides common HTTP status codes.
+ */
+export const StatusCodes = Object.freeze({
+
+	/**
+	 * The `OK` status.
+	 */
+	OK: 200,
+
+	/**
+	 * The `Created` status.
+	 */
+	Created: 201,
+
+	/**
+	 * The `No Content` status.
+	 */
+	NoContent: 204,
+
+	/**
+	 * The `Moved Permanently` status.
+	 */
+	MovedPermanently: 301,
+
+	/**
+	 * The `Found` status.
+	 */
+	Found: 302,
+
+	/**
+	 * The `Not Modified` status.
+	 */
+	NotModified: 304,
+
+	/**
+	 * The `Bad Request` status.
+	 */
+	BadRequest: 400,
+
+	/**
+	 * The `Unauthorized` status.
+	 */
+	Unauthorized: 401,
+
+	/**
+	 * The `Payment Required` status.
+	 */
+	PaymentRequired: 402,
+
+	/**
+	 * The `Forbidden` status.
+	 */
+	Forbidden: 403,
+
+	/**
+	 * The `Not Found` status.
+	 */
+	NotFound: 404,
+
+	/**
+	 * The `Method Not Allowed` status.
+	 */
+	MethodNotAllowed: 405,
+
+	/**
+	 * The `Not Acceptable` status.
+	 */
+	NotAcceptable: 406,
+
+	/**
+	 * The `Request Timeout` status.
+	 */
+	RequestTimeout: 408,
+
+	/**
+	 * The `Conflict` status.
+	 */
+	Conflict: 409,
+
+	/**
+	 * The `Payload Too Large` status.
+	 */
+	PayloadTooLarge: 413,
+
+	/**
+	 * The `Unsupported Media Type` status.
+	 */
+	UnsupportedMediaType: 415,
+
+	/**
+	 * The `Page Expired` status.
+	 */
+	PageExpired: 419,
+
+	/**
+	 * The `Unprocessable Content` status.
+	 */
+	UnprocessableContent: 422,
+
+	/**
+	 * The `Too Many Requests` status.
+	 */
+	TooManyRequests: 429,
+
+	/**
+	 * The `Internal Server Error` status.
+	 */
+	InternalServerError: 500,
+
+	/**
+	 * The `Not Implemented` status.
+	 */
+	NotImplemented: 501,
+
+	/**
+	 * The `Bad Gateway` status.
+	 */
+	BadGateway: 502,
+
+	/**
+	 * The `Service Unavailable` status.
+	 */
+	ServiceUnavailable: 503,
+
+	/**
+	 * The `Gateway Timeout` status.
+	 */
+	GatewayTimeout: 504,
+
+	/**
+	 * The `Bandwidth Limit Exceeded` status
+	 */
+	BandwidthLimitExceeded: 509
+});
+
+/**
+ * Provides common HTTP status codes.
+ */
+export type StatusCodes = typeof StatusCodes[keyof typeof StatusCodes];

package/src/Client/Http/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"extends": "../../../tsconfig.json",
+	"include": ["*.ts"],
+	"compilerOptions": {
+		"composite": true,
+		"declaration": true,
+		"declarationMap": true,
+		"noEmit": false,
+		"outDir": "../../../lib/Http",
+		"rootDir": ".",
+		"tsBuildInfoFile": "../../../var/Http.tsbuildinfo"
+	},
+	"references": [
+		{"path": "../Abstractions/tsconfig.json"}
+	]
+}

package/src/Client/Number.ts

@@ -0,0 +1,10 @@
+/**
+ * Rounds a floating-point number.
+ * @param value The value to round.
+ * @param precision The optional number of decimal digits to round to.
+ * @returns The value rounded to the given precision.
+ */
+export function round(value: number, precision = 0): number {
+	const operand = 10 ** precision;
+	return Math.round(value * operand) / operand;
+}

package/src/Client/UI/LoadingIndicator.ts

@@ -0,0 +1,66 @@
+import type {ILoadingIndicator} from "#Abstractions/ILoadingIndicator.js";
+import {html, LitElement, type TemplateResult} from "lit";
+import {customElement} from "lit/decorators.js";
+
+/**
+ * A component that shows up when an HTTP request starts, and hides when all concurrent HTTP requests are completed.
+ */
+@customElement("loading-indicator")
+export class LoadingIndicator extends LitElement implements ILoadingIndicator {
+
+	/**
+	 * The number of concurrent HTTP requests.
+	 */
+	#requestCount = 0;
+
+	/**
+	 * Creates a new loading indicator.
+	 */
+	constructor() {
+		super();
+		this.hidden = true;
+	}
+
+	/**
+	 * Starts the loading indicator.
+	 */
+	start(): void {
+		this.#requestCount++;
+		this.hidden = false;
+		document.body.classList.add("loading");
+	}
+
+	/**
+	 * Stops the loading indicator.
+	 * @param options Value indicating whether to force the loading indicator to stop.
+	 */
+	stop(options: {force?: boolean} = {}): void {
+		this.#requestCount--;
+		if (options.force || this.#requestCount <= 0) {
+			this.#requestCount = 0;
+			this.hidden = true;
+			document.body.classList.remove("loading");
+		}
+	}
+
+	/**
+	 * Renders this component.
+	 * @returns The view template.
+	 */
+	protected override render(): TemplateResult {
+		return html`<slot></slot>`;
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"loading-indicator": LoadingIndicator;
+	}
+}

package/src/Client/UI/OfflineIndicator.ts

@@ -0,0 +1,61 @@
+import {html, LitElement, type TemplateResult} from "lit";
+import {customElement} from "lit/decorators.js";
+
+/**
+ * A component that shows up when the network is unavailable, and hides when connectivity is restored.
+ */
+@customElement("offline-indicator")
+export class OfflineIndicator extends LitElement {
+
+	/**
+	 * Creates a new offline indicator.
+	 */
+	constructor() {
+		super();
+		this.hidden = navigator.onLine;
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	override connectedCallback(): void {
+		super.connectedCallback();
+		for (const event of ["online", "offline"]) addEventListener(event, this);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	override disconnectedCallback(): void {
+		for (const event of ["online", "offline"]) removeEventListener(event, this);
+		super.disconnectedCallback();
+	}
+
+	/**
+	 * Handles the events.
+	 */
+	handleEvent(): void {
+		this.hidden = navigator.onLine;
+	}
+
+	/**
+	 * Renders this component.
+	 * @returns The view template.
+	 */
+	protected override render(): TemplateResult {
+		return html`<slot></slot>`;
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"offline-indicator": OfflineIndicator;
+	}
+}

package/src/Client/UI/ThemeDropdown.ts

@@ -0,0 +1,134 @@
+import {AppTheme, themeIcon, themeLabel} from "#Html/AppTheme.js";
+import {MenuAlignment} from "#Html/MenuAlignment.js";
+import {html, LitElement, type TemplateResult} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {when} from "lit/directives/when.js";
+
+/**
+ * A dropdown menu for switching the color mode.
+ */
+@customElement("theme-dropdown")
+export class ThemeDropdown extends LitElement {
+
+	/**
+	 * The alignment of the dropdown menu.
+	 */
+	@property() alignment: MenuAlignment = MenuAlignment.End;
+
+	/**
+	 * The label of the dropdown menu.
+	 */
+	@property() label = "";
+
+	/**
+	 * The key of the storage entry providing the saved theme.
+	 */
+	@property() storageKey = "AppTheme";
+
+	/**
+	 * The current application theme.
+	 */
+	@state() private appTheme: AppTheme;
+
+	/**
+	 * The media query used to check the system theme.
+	 */
+	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+
+	/**
+	 * Creates a new theme dropdown.
+	 */
+	constructor() {
+		super();
+		const theme = localStorage.getItem(this.storageKey) as AppTheme;
+		this.appTheme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+	}
+
+	/**
+	 * The current theme mode.
+	 */
+	get theme(): AppTheme { return this.appTheme; }
+	set theme(value: AppTheme) {
+		localStorage.setItem(this.storageKey, this.appTheme = value);
+		this.#applyTheme();
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.#applyTheme();
+		this.#mediaQuery.addEventListener("change", this);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	override disconnectedCallback(): void {
+		this.#mediaQuery.removeEventListener("change", this);
+		super.disconnectedCallback();
+	}
+
+	/**
+	 * Handles the events.
+	 */
+	handleEvent(): void {
+		this.#applyTheme();
+	}
+
+	/**
+	 * Returns the node into which this component should render.
+	 * @returns The node into which this component should render.
+	 */
+	protected override createRenderRoot(): DocumentFragment|HTMLElement {
+		return this;
+	}
+
+	/**
+	 * Renders this component.
+	 * @returns The view template.
+	 */
+	protected override render(): TemplateResult {
+		return html`
+			<li class="nav-item dropdown">
+				<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="#">
+					<i class="icon icon-fill">${themeIcon(this.appTheme)}</i>
+					${when(this.label, () => html`<span class="ms-1">${this.label}</span>`)}
+				</a>
+				<ul class="dropdown-menu ${classMap({"dropdown-menu-end": this.alignment == MenuAlignment.End})}">
+					${Object.values(AppTheme).map(value => html`
+						<li>
+							<button class="dropdown-item d-flex align-items-center justify-content-between" @click=${() => this.theme = value}>
+								<span><i class="icon icon-fill me-1">${themeIcon(value)}</i> ${themeLabel(value)}</span>
+								${when(value == this.appTheme, () => html`<i class="icon ms-2">check</i>`)}
+							</button>
+						</li>
+					`)}
+				</ul>
+			</li>
+		`;
+	}
+
+	/**
+	 * Applies the theme to the document.
+	 */
+	#applyTheme(): void {
+		const theme = this.appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.appTheme;
+		document.documentElement.dataset.bsTheme = theme.toLowerCase();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"theme-dropdown": ThemeDropdown;
+	}
+}

package/src/Client/UI/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "../../../tsconfig.json",
+	"include": ["*.ts"],
+	"compilerOptions": {
+		"composite": true,
+		"declaration": true,
+		"declarationMap": true,
+		"importHelpers": true,
+		"noEmit": false,
+		"outDir": "../../../lib/UI",
+		"rootDir": ".",
+		"tsBuildInfoFile": "../../../var/UI.tsbuildinfo",
+		"useDefineForClassFields": false
+	},
+	"references": [
+		{"path": "../Abstractions/tsconfig.json"},
+		{"path": "../Html/tsconfig.json"}
+	]
+}

package/src/Client/tsconfig.json

@@ -0,0 +1,11 @@
+{
+	"files": [],
+	"references": [
+		{"path": "Abstractions/tsconfig.json"},
+		{"path": "Base/tsconfig.json"},
+		{"path": "DependencyInjection/tsconfig.json"},
+		{"path": "Html/tsconfig.json"},
+		{"path": "Http/tsconfig.json"},
+		{"path": "UI/tsconfig.json"}
+	]
+}