schema-components 2.0.1 → 2.1.0

package/dist/lit/renderers/scArray.mjs

@@ -0,0 +1,86 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { defaultRecordValueLit } from "./recordHelpers.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scArray.ts
+/**
+* `<sc-array>` — Custom Element renderer for `ArrayField`.
+*
+* Mirrors React's `renderArray`: an ordered list in read-only mode,
+* an editable list with per-item remove and footer add buttons in
+* editable mode. Uses the same `defaultRecordValue()` helper as the
+* record renderer for new entries — the resolver-agnostic default
+* lives in `lit/recordHelpers.ts`.
+*
+* Parts: `list`, `item`, `remove`, `add`.
+*
+* @packageDocumentation
+*/
+function ariaLabel(description) {
+	return typeof description === "string" ? description : void 0;
+}
+/**
+* Lit Custom Element rendering an array schema field.
+*
+* Tag: `<sc-array>` (registered by `registerSchemaComponents`).
+*/
+var ScArray = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "array") return html``;
+		const arr = Array.isArray(this.value) ? this.value : [];
+		const element = this.tree.element;
+		if (element === void 0) return html``;
+		const label = ariaLabel(this.meta.description);
+		if (this.readOnly) {
+			if (arr.length === 0) return html``;
+			return html`<ul part="list" role="group" aria-label=${label ?? ""}>
+                ${arr.map((item, i) => html`<li part="item">
+                            ${this.renderChild(element, item, () => {}, `[${String(i)}]`)}
+                        </li>`)}
+            </ul>`;
+		}
+		const handleRemove = (index) => {
+			const next = arr.slice();
+			next.splice(index, 1);
+			this.emitChange(next);
+		};
+		const handleAdd = () => {
+			const next = arr.slice();
+			next.push(defaultRecordValueLit(element));
+			this.emitChange(next);
+		};
+		return html`<div role="group" aria-label=${label ?? ""}>
+            <ul part="list">
+                ${arr.map((item, i) => {
+			const childChange = (v) => {
+				const nextArr = arr.slice();
+				nextArr[i] = v;
+				this.emitChange(nextArr);
+			};
+			return html`<li part="item">
+                        ${this.renderChild(element, item, childChange, `[${String(i)}]`)}
+                        <button
+                            part="remove"
+                            type="button"
+                            aria-label="Remove item ${String(i)}"
+                            @click=${() => {
+				handleRemove(i);
+			}}
+                        >
+                            Remove
+                        </button>
+                    </li>`;
+		})}
+            </ul>
+            <button
+                part="add"
+                type="button"
+                aria-label="Add item"
+                @click=${handleAdd}
+            >
+                Add
+            </button>
+        </div>`;
+	}
+};
+//#endregion
+export { ScArray };

package/dist/lit/renderers/scBoolean.d.mts

@@ -0,0 +1,15 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scBoolean.d.ts
+/**
+ * Lit Custom Element rendering a boolean-valued schema field.
+ *
+ * Tag: `<sc-boolean>` (registered by `registerSchemaComponents`).
+ */
+declare class ScBoolean extends BaseScElement {
+  render(): TemplateResult;
+  private handleChange;
+}
+//#endregion
+export { ScBoolean };

package/dist/lit/renderers/scBoolean.mjs

@@ -0,0 +1,47 @@
+import "../../core/cssClasses.mjs";
+import { fieldDomId } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scBoolean.ts
+/**
+* `<sc-boolean>` — Custom Element renderer for `BooleanField`.
+*
+* Mirrors React's `renderBoolean`: `<input type="checkbox">` in
+* editable mode, `Yes` / `No` text in read-only mode.
+*
+* Parts: `input`, `value`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a boolean-valued schema field.
+*
+* Tag: `<sc-boolean>` (registered by `registerSchemaComponents`).
+*/
+var ScBoolean = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		if (this.readOnly) {
+			if (typeof this.value !== "boolean") return html`<span part="value" id=${id}>${"—"}</span>`;
+			return html`<span part="value" id=${id}
+                >${this.value ? "Yes" : "No"}</span
+            >`;
+		}
+		const ariaLabel = typeof this.meta.description === "string" ? this.meta.description : void 0;
+		return html`<input
+            part="input"
+            id=${id}
+            type="checkbox"
+            .checked=${this.writeOnly ? false : this.value === true}
+            aria-label=${ariaLabel ?? ""}
+            @change=${this.handleChange}
+        />`;
+	}
+	handleChange = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		this.emitChange(target.checked);
+	};
+};
+//#endregion
+export { ScBoolean };

package/dist/lit/renderers/scConditional.d.mts

@@ -0,0 +1,23 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scConditional.d.ts
+/**
+ * Lit Custom Element rendering a JSON Schema `if`/`then`/`else`
+ * conditional field.
+ *
+ * Tag: `<sc-conditional>` (registered by `registerSchemaComponents`).
+ */
+declare class ScConditional extends BaseScElement {
+  render(): TemplateResult;
+}
+/**
+ * Lit Custom Element rendering a JSON Schema `not` (negation) field.
+ *
+ * Tag: `<sc-negation>` (registered by `registerSchemaComponents`).
+ */
+declare class ScNegation extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScConditional, ScNegation };

package/dist/lit/renderers/scConditional.mjs

@@ -0,0 +1,65 @@
+import { SC_CLASSES } from "../../core/cssClasses.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scConditional.ts
+/**
+* `<sc-conditional>` and `<sc-negation>` — Custom Element renderers
+* for the two JSON-Schema-composition variants.
+*
+* Mirror React's `renderConditional` and `renderNegation`: each clause
+* is surfaced as a labelled `<fieldset>` with a discoverable structure
+* so theme adapters and assistive tech can interpret the schema
+* constraint as well as the rendered value.
+*
+* Parts: `fieldset`, `clause`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a JSON Schema `if`/`then`/`else`
+* conditional field.
+*
+* Tag: `<sc-conditional>` (registered by `registerSchemaComponents`).
+*/
+var ScConditional = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "conditional") return html``;
+		const { ifClause, thenClause, elseClause } = this.tree;
+		const onChange = (next) => {
+			this.emitChange(next);
+		};
+		return html`<fieldset part="fieldset" class=${SC_CLASSES.conditional}>
+            <div part="clause" class=${SC_CLASSES.conditionalIf}>
+                <strong>if:</strong>
+                ${this.renderChild(ifClause, this.value, onChange)}
+            </div>
+            ${thenClause === void 0 ? html`` : html`<div part="clause" class=${SC_CLASSES.conditionalThen}>
+                      <strong>then:</strong>
+                      ${this.renderChild(thenClause, this.value, onChange)}
+                  </div>`}
+            ${elseClause === void 0 ? html`` : html`<div part="clause" class=${SC_CLASSES.conditionalElse}>
+                      <strong>else:</strong>
+                      ${this.renderChild(elseClause, this.value, onChange)}
+                  </div>`}
+        </fieldset>`;
+	}
+};
+/**
+* Lit Custom Element rendering a JSON Schema `not` (negation) field.
+*
+* Tag: `<sc-negation>` (registered by `registerSchemaComponents`).
+*/
+var ScNegation = class extends BaseScElement {
+	render() {
+		if (this.tree.type !== "negation") return html``;
+		const onChange = (next) => {
+			this.emitChange(next);
+		};
+		return html`<fieldset part="fieldset" class=${SC_CLASSES.negation}>
+            <strong>Must NOT match:</strong>
+            ${this.renderChild(this.tree.negated, this.value, onChange)}
+        </fieldset>`;
+	}
+};
+//#endregion
+export { ScConditional, ScNegation };

package/dist/lit/renderers/scDiscriminated.d.mts

@@ -0,0 +1,23 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scDiscriminated.d.ts
+/**
+ * Pure helper: convert a tab index into the new value the discriminated
+ * union should emit. Mirrors React's
+ * `discriminatedUnionValueForTab` so the contract is unit-testable
+ * without instantiating the Custom Element.
+ */
+declare function discriminatedUnionValueForTabLit(optionLabels: readonly string[], discKey: string, newIndex: number): Record<string, string> | undefined;
+/**
+ * Lit Custom Element rendering a discriminated-union schema field.
+ *
+ * Tag: `<sc-discriminated>` (registered by `registerSchemaComponents`).
+ */
+declare class ScDiscriminated extends BaseScElement {
+  private pendingFocus;
+  render(): TemplateResult;
+  updated(): void;
+}
+//#endregion
+export { ScDiscriminated, discriminatedUnionValueForTabLit };

package/dist/lit/renderers/scDiscriminated.mjs

@@ -0,0 +1,138 @@
+import { isObject } from "../../core/guards.mjs";
+import "../../core/cssClasses.mjs";
+import { panelIdFor, tabIdFor } from "../../core/idPath.mjs";
+import { resolveDiscriminatedActive } from "../../core/unionMatch.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scDiscriminated.ts
+/**
+* `<sc-discriminated>` — Custom Element renderer for
+* `DiscriminatedUnionField`.
+*
+* Implements the WAI-ARIA "Tabs with Automatic Activation" pattern in
+* parity with React's `DiscriminatedUnionTabs`:
+*
+* - `ArrowRight` / `ArrowLeft` move between tabs with wrap-around
+* - `Home` / `End` jump to the first / last tab
+* - `role="tablist"` / `"tab"` / `"tabpanel"`, `aria-selected`,
+*   `aria-controls`, `aria-labelledby`
+* - Roving tabindex: the active tab carries `tabindex="0"`, the rest
+*   `tabindex="-1"`
+* - Selection and focus stay aligned on every keystroke
+*
+* Parts: `tablist`, `tab`, `tab-active`, `panel`.
+*
+* @packageDocumentation
+*/
+/**
+* Pure helper: convert a tab index into the new value the discriminated
+* union should emit. Mirrors React's
+* `discriminatedUnionValueForTab` so the contract is unit-testable
+* without instantiating the Custom Element.
+*/
+function discriminatedUnionValueForTabLit(optionLabels, discKey, newIndex) {
+	const label = optionLabels[newIndex];
+	if (label === void 0) return void 0;
+	return { [discKey]: label };
+}
+/**
+* Lit Custom Element rendering a discriminated-union schema field.
+*
+* Tag: `<sc-discriminated>` (registered by `registerSchemaComponents`).
+*/
+var ScDiscriminated = class extends BaseScElement {
+	pendingFocus = false;
+	render() {
+		if (this.tree.type !== "discriminatedUnion") {
+			if (this.value === void 0 || this.value === null) return html`<span part="value">${"—"}</span>`;
+			return html`<span part="value"
+                >${JSON.stringify(this.value)}</span
+            >`;
+		}
+		const { options, discriminator: discKey } = this.tree;
+		if (options.length === 0) {
+			if (this.value === void 0 || this.value === null) return html`<span part="value">${"—"}</span>`;
+			return html`<span part="value"
+                >${JSON.stringify(this.value)}</span
+            >`;
+		}
+		const { optionLabels, activeIndex, activeOption } = resolveDiscriminatedActive(options, discKey, isObject(this.value) ? this.value : void 0);
+		if (this.readOnly) {
+			if (activeOption !== void 0) return this.renderChild(activeOption, this.value, (next) => {
+				this.emitChange(next);
+			});
+			return html`<span part="value">${"—"}</span>`;
+		}
+		const panelId = panelIdFor(this.path);
+		const wrapIndex = (index) => (index % options.length + options.length) % options.length;
+		const handleTabChange = (newIndex) => {
+			const next = discriminatedUnionValueForTabLit(optionLabels, discKey, newIndex);
+			if (next === void 0) return;
+			this.emitChange(next);
+		};
+		const handleKeyDown = (e) => {
+			let target;
+			if (e.key === "ArrowRight") target = wrapIndex(activeIndex + 1);
+			else if (e.key === "ArrowLeft") target = wrapIndex(activeIndex - 1);
+			else if (e.key === "Home") target = 0;
+			else if (e.key === "End") target = options.length - 1;
+			if (target === void 0) return;
+			e.preventDefault();
+			if (target === activeIndex) return;
+			this.pendingFocus = true;
+			handleTabChange(target);
+		};
+		return html`<div part="container">
+            <div
+                part="tablist"
+                role="tablist"
+                aria-label="Select variant"
+                aria-orientation="horizontal"
+                @keydown=${handleKeyDown}
+            >
+                ${options.map((_opt, i) => {
+			const tabId = tabIdFor(this.path, i);
+			const isActive = i === activeIndex;
+			return html`<button
+                        part=${isActive ? "tab tab-active" : "tab"}
+                        type="button"
+                        role="tab"
+                        id=${tabId}
+                        aria-selected=${isActive ? "true" : "false"}
+                        aria-controls=${panelId}
+                        tabindex=${isActive ? 0 : -1}
+                        @click=${() => {
+				handleTabChange(i);
+			}}
+                    >
+                        ${optionLabels[i]}
+                    </button>`;
+		})}
+            </div>
+            <div
+                part="panel"
+                role="tabpanel"
+                id=${panelId}
+                aria-labelledby=${tabIdFor(this.path, activeIndex)}
+            >
+                ${activeOption === void 0 ? html`` : this.renderChild(activeOption, this.value, (next) => {
+			this.emitChange(next);
+		})}
+            </div>
+        </div>`;
+	}
+	updated() {
+		if (!this.pendingFocus) return;
+		this.pendingFocus = false;
+		if (this.tree.type !== "discriminatedUnion") return;
+		const { options, discriminator: discKey } = this.tree;
+		const { activeIndex } = resolveDiscriminatedActive(options, discKey, isObject(this.value) ? this.value : void 0);
+		const id = tabIdFor(this.path, activeIndex);
+		const root = this.shadowRoot;
+		if (root === null) return;
+		const tab = root.getElementById(id);
+		if (tab !== null && tab instanceof HTMLElement) tab.focus();
+	}
+};
+//#endregion
+export { ScDiscriminated, discriminatedUnionValueForTabLit };

package/dist/lit/renderers/scEnum.d.mts

@@ -0,0 +1,16 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scEnum.d.ts
+/**
+ * Lit Custom Element rendering an enumerated string-valued schema
+ * field.
+ *
+ * Tag: `<sc-enum>` (registered by `registerSchemaComponents`).
+ */
+declare class ScEnum extends BaseScElement {
+  render(): TemplateResult;
+  private handleChange;
+}
+//#endregion
+export { ScEnum };

package/dist/lit/renderers/scEnum.mjs

@@ -0,0 +1,66 @@
+import { constraintHint } from "../../core/constraintHint.mjs";
+import "../../core/cssClasses.mjs";
+import { fieldDomId, hintIdFor } from "../../core/idPath.mjs";
+import { displayJsonValue } from "../../core/walkBuilders.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scEnum.ts
+/**
+* `<sc-enum>` — Custom Element renderer for `EnumField`.
+*
+* Mirrors React's `renderEnum`: `<select>` listing each option, with
+* a hint advertising any pattern / format constraints.
+*
+* Parts: `input`, `value`, `hint`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering an enumerated string-valued schema
+* field.
+*
+* Tag: `<sc-enum>` (registered by `registerSchemaComponents`).
+*/
+var ScEnum = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		const enumValue = typeof this.value === "string" ? this.value : "";
+		if (this.readOnly) return html`<span part="value" id=${id}
+                >${enumValue.length === 0 ? "—" : enumValue}</span
+            >`;
+		const enumValues = this.tree.type === "enum" ? this.tree.enumValues : [];
+		const hint = constraintHint(this.constraints);
+		const describedBy = hint !== void 0 ? hintIdFor(id) : void 0;
+		const selected = this.writeOnly ? "" : enumValue;
+		return html`
+            <select
+                part="input"
+                id=${id}
+                .value=${selected}
+                aria-describedby=${describedBy ?? ""}
+                @change=${this.handleChange}
+            >
+                <option value="">Select${"…"}</option>
+                ${enumValues.map((v) => {
+			const display = displayJsonValue(v);
+			return html`<option
+                        value=${display}
+                        ?selected=${display === selected}
+                    >
+                        ${display}
+                    </option>`;
+		})}
+            </select>
+            ${hint === void 0 ? html`` : html`<small part="hint" id=${hintIdFor(id)} class="sc-hint"
+                      >${hint}</small
+                  >`}
+        `;
+	}
+	handleChange = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLSelectElement)) return;
+		this.emitChange(target.value);
+	};
+};
+//#endregion
+export { ScEnum };

package/dist/lit/renderers/scFile.d.mts

@@ -0,0 +1,15 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scFile.d.ts
+/**
+ * Lit Custom Element rendering a file-upload schema field.
+ *
+ * Tag: `<sc-file>` (registered by `registerSchemaComponents`).
+ */
+declare class ScFile extends BaseScElement {
+  render(): TemplateResult;
+  private handleChange;
+}
+//#endregion
+export { ScFile };

package/dist/lit/renderers/scFile.mjs

@@ -0,0 +1,53 @@
+import { constraintHint } from "../../core/constraintHint.mjs";
+import { fieldDomId, hintIdFor } from "../../core/idPath.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scFile.ts
+/**
+* `<sc-file>` — Custom Element renderer for `FileField`.
+*
+* Mirrors React's `renderFile`: `<input type="file">` honouring the
+* schema's `contentMediaType` constraint via the `accept` attribute,
+* plus a constraint hint.
+*
+* Parts: `input`, `hint`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a file-upload schema field.
+*
+* Tag: `<sc-file>` (registered by `registerSchemaComponents`).
+*/
+var ScFile = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		const accept = this.constraints.mimeTypes?.join(",");
+		if (this.readOnly) return html`<span part="value" id=${id}>File field</span>`;
+		const hint = constraintHint(this.constraints);
+		const describedBy = hint !== void 0 ? hintIdFor(id) : void 0;
+		const ariaLabel = typeof this.meta.description === "string" ? this.meta.description : void 0;
+		return html`
+            <input
+                part="input"
+                id=${id}
+                type="file"
+                accept=${accept ?? ""}
+                aria-describedby=${describedBy ?? ""}
+                aria-label=${ariaLabel ?? ""}
+                @change=${this.handleChange}
+            />
+            ${hint === void 0 ? html`` : html`<small part="hint" id=${hintIdFor(id)} class="sc-hint"
+                      >${hint}</small
+                  >`}
+        `;
+	}
+	handleChange = (e) => {
+		const target = e.target;
+		if (!(target instanceof HTMLInputElement)) return;
+		const file = target.files?.[0];
+		if (file !== void 0) this.emitChange(file);
+	};
+};
+//#endregion
+export { ScFile };

package/dist/lit/renderers/scLiteralNullNever.d.mts

@@ -0,0 +1,30 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scLiteralNullNever.d.ts
+/**
+ * Lit Custom Element rendering a `literal` schema field.
+ *
+ * Tag: `<sc-literal>` (registered by `registerSchemaComponents`).
+ */
+declare class ScLiteral extends BaseScElement {
+  render(): TemplateResult;
+}
+/**
+ * Lit Custom Element rendering a `null` schema field.
+ *
+ * Tag: `<sc-null>` (registered by `registerSchemaComponents`).
+ */
+declare class ScNull extends BaseScElement {
+  render(): TemplateResult;
+}
+/**
+ * Lit Custom Element rendering a `never` schema field.
+ *
+ * Tag: `<sc-never>` (registered by `registerSchemaComponents`).
+ */
+declare class ScNever extends BaseScElement {
+  render(): TemplateResult;
+}
+//#endregion
+export { ScLiteral, ScNever, ScNull };

package/dist/lit/renderers/scLiteralNullNever.mjs

@@ -0,0 +1,57 @@
+import { SC_CLASSES } from "../../core/cssClasses.mjs";
+import { fieldDomId } from "../../core/idPath.mjs";
+import { displayJsonValue } from "../../core/walkBuilders.mjs";
+import { BaseScElement } from "./baseElement.mjs";
+import { html } from "lit";
+//#region src/lit/renderers/scLiteralNullNever.ts
+/**
+* `<sc-literal>`, `<sc-null>`, `<sc-never>` — Custom Element renderers
+* for the three non-editable leaf types.
+*
+* Each emits a single `<span>` placeholder. The literal renderer
+* displays the literal value (or comma-separated list); the null and
+* never renderers display the em-dash and a `never matches` italic
+* note respectively. Mirrors the React headless renderers.
+*
+* Parts: `value`.
+*
+* @packageDocumentation
+*/
+/**
+* Lit Custom Element rendering a `literal` schema field.
+*
+* Tag: `<sc-literal>` (registered by `registerSchemaComponents`).
+*/
+var ScLiteral = class extends BaseScElement {
+	render() {
+		const id = fieldDomId(this.path);
+		if (this.tree.type !== "literal") return html`<span part="value" id=${id}>${"—"}</span>`;
+		const values = this.tree.literalValues;
+		if (values.length === 0) return html`<span part="value" id=${id}>${"—"}</span>`;
+		return html`<span part="value" id=${id}>${values.map((v) => displayJsonValue(v)).join(", ")}</span>`;
+	}
+};
+/**
+* Lit Custom Element rendering a `null` schema field.
+*
+* Tag: `<sc-null>` (registered by `registerSchemaComponents`).
+*/
+var ScNull = class extends BaseScElement {
+	render() {
+		return html`<span part="value" id=${fieldDomId(this.path)}>${"—"}</span>`;
+	}
+};
+/**
+* Lit Custom Element rendering a `never` schema field.
+*
+* Tag: `<sc-never>` (registered by `registerSchemaComponents`).
+*/
+var ScNever = class extends BaseScElement {
+	render() {
+		return html`<span part="value" id=${fieldDomId(this.path)} class=${SC_CLASSES.never}
+            ><em>never matches</em></span
+        >`;
+	}
+};
+//#endregion
+export { ScLiteral, ScNever, ScNull };

package/dist/lit/renderers/scNumber.d.mts

@@ -0,0 +1,15 @@
+import { BaseScElement } from "./baseElement.mjs";
+import { TemplateResult } from "lit";
+
+//#region src/lit/renderers/scNumber.d.ts
+/**
+ * Lit Custom Element rendering a number-valued schema field.
+ *
+ * Tag: `<sc-number>` (registered by `registerSchemaComponents`).
+ */
+declare class ScNumber extends BaseScElement {
+  render(): TemplateResult;
+  private handleInput;
+}
+//#endregion
+export { ScNumber };