@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/pin-input/pin-input.presentation.d.ts

@@ -0,0 +1,204 @@
+import { PinInputArgs, PinInputContext, PinInputState } from "./pin-input.state.js";
+import { PinInputEvents } from "./pin-input.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+/** Pin-input definition: the DOM contract as data. */
+type ScopeLike = ViewFor<PinInputContext, PinInputEvents, PinInputState>;
+type SlotLike = SlotViewFor<number, PinInputContext, PinInputEvents, PinInputState>;
+export type PinInputType = "numeric" | "alphabetic" | "alphanumeric";
+export declare const def: {
+  name: string;
+  machine: (args: PinInputArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<PinInputContext, PinInputEvents, PinInputState>;
+  start: "idle";
+  mounted: ({ props, focus }: {
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+  }) => void;
+  settled: ({ before, after, id, root, focus }: {
+    readonly before: {
+      readonly context: PinInputContext;
+      readonly state: PinInputState;
+    };
+    readonly after: {
+      readonly context: PinInputContext;
+      readonly state: PinInputState;
+    };
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly root: () => Element;
+    readonly focus: (part: string, slot?: unknown) => void;
+  }) => void;
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        "data-complete": string | undefined;
+        "data-disabled": string | undefined;
+        "data-readonly": string | undefined;
+        "data-invalid": string | undefined;
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+        for: string;
+        "data-complete": string | undefined;
+        "data-invalid": string | undefined;
+        "data-required": string | undefined;
+        onClick: (event: MouseEvent) => void;
+      };
+    };
+    control: {
+      attrs: (scope: ScopeLike) => {
+        dir: "ltr" | "rtl";
+      };
+    };
+    hiddenInput: {
+      id: string;
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        tabIndex: number;
+        hidden: boolean;
+        disabled: boolean;
+        readOnly: boolean;
+        required: boolean;
+        name: string | undefined;
+        form: string | undefined;
+        maxLength: number;
+        value: string;
+      };
+    };
+  };
+  slots: {
+    input: {
+      indexes: (context: PinInputContext) => readonly number[];
+      attrs: (scope: SlotLike) => {
+        onFocus: () => void;
+        onBlur: (event: FocusEvent) => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+        onPaste: (event: ClipboardEvent) => void;
+        onBeforeInput: (event: InputEvent) => void;
+        onInput: (event: InputEvent) => void;
+        "aria-label": string;
+        inputMode: string;
+        enterKeyHint: string;
+        type: string;
+        value: string;
+        readOnly: boolean;
+        autoCapitalize: string;
+        autoComplete: string;
+        placeholder: string;
+        id: string;
+        dir: "ltr" | "rtl";
+        disabled: boolean;
+        tabIndex: number;
+        "data-index": number;
+        "data-disabled": string | undefined;
+        "data-complete": string | undefined;
+        "data-filled": string | undefined;
+        "data-invalid": string | undefined;
+      };
+    };
+  };
+  commands: {
+    focus: {
+      view: ({ focus }: {
+        readonly args: readonly unknown[];
+        readonly id: (part: string, slot?: unknown) => string;
+        readonly focus: (part: string, slot?: unknown) => void;
+        readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+        readonly root: () => Element;
+      }) => void;
+    };
+    setValue: {
+      event: ([value]: [value: readonly string[]]) => {
+        type: "VALUE.SET";
+        value: string[];
+      };
+    };
+    clearValue: {
+      event: () => {
+        type: "VALUE.CLEAR";
+      };
+    };
+    setValueAtIndex: {
+      event: ([index, value]: [index: number, value: string]) => {
+        type: "VALUE.SET";
+        value: string;
+        index: number;
+      };
+    };
+  };
+  readers: {
+    count: {
+      read: (context: PinInputContext) => number;
+    };
+    items: {
+      read: (context: PinInputContext) => readonly number[];
+    };
+    value: {
+      read: (context: PinInputContext) => string[];
+    };
+    valueAsString: {
+      read: (context: PinInputContext) => string;
+    };
+    complete: {
+      read: (context: PinInputContext) => boolean;
+    };
+    focused: {
+      read: (_context: PinInputContext, state: PinInputState) => state is "focused";
+    };
+    invalid: {
+      read: (context: PinInputContext) => boolean;
+    };
+    disabled: {
+      read: (context: PinInputContext) => boolean;
+    };
+  };
+  methods: {
+    getItems: {
+      call: (context: PinInputContext) => readonly number[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: PinInputContext) => string[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: PinInputContext | undefined) => {
+        value: string[];
+        valueAsString: string;
+      };
+    };
+    "value-complete": {
+      prop: string;
+      watch: (context: PinInputContext) => boolean[];
+      detail: (_watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context: PinInputContext | undefined) => {
+        value: string[];
+        valueAsString: string;
+      };
+    };
+    "value-invalid": {
+      prop: string;
+      watch: () => never[];
+      detail: (watched: readonly [string, number]) => {
+        value: string;
+        index: number;
+      };
+      select: (event: {
+        readonly type: string;
+      } & Record<string, unknown>, _before: PinInputContext, after: PinInputContext) => {
+        value: string;
+        index: number;
+      } | null;
+    };
+  };
+};
+export type PinInputApi = ApiOf<typeof def>;
+export declare const pinInput: import("@spinjs/runtime").DefinedComponent<PinInputApi, PinInputArgs>;
+export {};
+//# sourceMappingURL=pin-input.presentation.d.ts.map

package/dist/pin-input/pin-input.presentation.js

@@ -0,0 +1,392 @@
+import { pinView } from "./pin-input.state.js";
+import { pinInput as pinInput$1 } from "./pin-input.machine.js";
+import { ariaHidden, ariaInvalid, defineComponent } from "@spinjs/runtime";
+// src/pin-input/pin-input.presentation.ts
+const defaultTranslations = { inputLabel: (index, length) => `pin code ${index + 1} of ${length}` };
+const isInputLabel = (value) => typeof value === "function";
+function parseTranslations(raw) {
+	if (typeof raw !== "object" || raw === null) return defaultTranslations;
+	const inputLabel = Reflect.get(raw, "inputLabel");
+	return { inputLabel: isInputLabel(inputLabel) ? inputLabel : defaultTranslations.inputLabel };
+}
+const TYPE_PATTERNS = {
+	numeric: /^[0-9]+$/,
+	alphabetic: /^[A-Za-z]+$/,
+	alphanumeric: /^[a-zA-Z0-9]+$/i
+};
+/** Zag's `isValidValue`. The pattern path compiles without Zag's `g` flag: a
+* global regex's `lastIndex` makes a repeated test of the same value report
+* differently the second time. */
+function isValidValue(value, type, pattern) {
+	if (pattern.length > 0) return new RegExp(pattern).test(value);
+	const regex = TYPE_PATTERNS[type];
+	return regex !== void 0 && regex.test(value);
+}
+/** Zag's rtl flip: in a right-to-left pin, ArrowLeft walks forward. */
+function eventKey(event, dir) {
+	if (dir !== "rtl") return event.key;
+	if (event.key === "ArrowLeft") return "ArrowRight";
+	if (event.key === "ArrowRight") return "ArrowLeft";
+	return event.key;
+}
+const resolveTranslations = (scope) => {
+	const raw = scope.context.translations;
+	if (typeof raw === "object" && raw !== null) return parseTranslations(raw);
+	const fromRoot = Reflect.get(scope.root(), "translations");
+	if (typeof fromRoot === "object" && fromRoot !== null) return parseTranslations(fromRoot);
+	return defaultTranslations;
+};
+const isSanitize = (value) => typeof value === "function";
+const resolveSanitize = (scope) => {
+	const raw = scope.context.sanitizeValue;
+	if (isSanitize(raw)) return raw;
+	const fromRoot = Reflect.get(scope.root(), "sanitizeValue");
+	if (isSanitize(fromRoot)) return fromRoot;
+	return (value) => value;
+};
+/** The type union has three members; anything else is numeric. */
+/** The cell indices, cached per count: the `for` directive iterates this
+* array, and a fresh one per read would re-sync every cell on every move. */
+const itemsCache = /* @__PURE__ */ new Map();
+const cellIndexes = (count) => {
+	const hit = itemsCache.get(count);
+	if (hit !== void 0) return hit;
+	const made = Array.from({ length: count }, (_unused, at) => at);
+	itemsCache.set(count, made);
+	return made;
+};
+const cellHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const cellHandlers = (scope, index) => {
+	let byIndex = cellHandlersByBridge.get(scope.send);
+	if (byIndex === void 0) {
+		byIndex = /* @__PURE__ */ new Map();
+		cellHandlersByBridge.set(scope.send, byIndex);
+	}
+	const hit = byIndex.get(index);
+	if (hit !== void 0) return hit;
+	const made = {
+		onFocus: () => scope.send({
+			type: "INPUT.FOCUS",
+			index
+		}),
+		onBlur: (event) => {
+			const target = event.relatedTarget;
+			if (target instanceof Element && scope.root().contains(target)) return;
+			scope.send({
+				type: "INPUT.BLUR",
+				index
+			});
+		},
+		onKeyDown: (event) => {
+			if (event.defaultPrevented) return;
+			if (event.isComposing === true || event.keyCode === 229) return;
+			if (event.ctrlKey || event.altKey || event.metaKey) return;
+			const retyped = pinView(scope.context.value, scope.context.count).chars[scope.context.focusedIndex] ?? "";
+			if (event.key.length === 1 && retyped === event.key) {
+				event.preventDefault();
+				scope.send({ type: "INPUT.ADVANCE" });
+				return;
+			}
+			switch (eventKey(event, scope.context.dir)) {
+				case "Backspace":
+					scope.send({ type: "INPUT.BACKSPACE" });
+					break;
+				case "Delete":
+					scope.send({ type: "INPUT.DELETE" });
+					break;
+				case "ArrowLeft":
+					scope.send({ type: "INPUT.ARROW_LEFT" });
+					break;
+				case "ArrowRight":
+					scope.send({ type: "INPUT.ARROW_RIGHT" });
+					break;
+				case "Enter": {
+					const ctx = scope.context;
+					const view = pinView(ctx.value, ctx.count);
+					const name = scope.context.name;
+					if (view.complete && typeof name === "string" && name.length > 0) {
+						for (const node of Array.from(scope.root().getElementsByTagName("input"))) if (node instanceof HTMLInputElement && node.id === scope.id("hidden")) node.form?.requestSubmit();
+					}
+					break;
+				}
+				case "Home":
+					scope.send({ type: "INPUT.HOME" });
+					break;
+				case "End":
+					scope.send({ type: "INPUT.END" });
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		},
+		onPaste: (event) => {
+			if (scope.context.disabled || scope.context.readOnly) return;
+			const raw = event.clipboardData?.getData("text/plain");
+			if (raw === void 0 || raw.length === 0) return;
+			const pasted = resolveSanitize(scope)(raw);
+			if (!isValidValue(pasted, scope.context.type, scope.context.pattern)) {
+				scope.send({
+					type: "VALUE.INVALID",
+					value: pasted
+				});
+				event.preventDefault();
+				return;
+			}
+			event.preventDefault();
+			scope.send({
+				type: "INPUT.PASTE",
+				value: pasted
+			});
+		},
+		onBeforeInput: (event) => {
+			if (scope.context.disabled || scope.context.readOnly) return;
+			const target = event.currentTarget;
+			if (!(target instanceof HTMLInputElement)) return;
+			if ((event.inputType ?? "").startsWith("delete")) return;
+			const from = target.selectionStart ?? 0;
+			const to = target.selectionEnd ?? from;
+			const value = target.value.slice(0, from) + (event.data ?? "") + target.value.slice(to);
+			if (!isValidValue(value, scope.context.type, scope.context.pattern)) {
+				scope.send({
+					type: "VALUE.INVALID",
+					value
+				});
+				event.preventDefault();
+			}
+			if (value.length > 1 && typeof target.setSelectionRange === "function") target.setSelectionRange(0, 1, "forward");
+		},
+		onInput: (event) => {
+			if (scope.context.disabled || scope.context.readOnly) return;
+			const target = event.currentTarget;
+			if (!(target instanceof HTMLInputElement)) return;
+			const value = target.value;
+			if (event.inputType === "insertFromPaste") {
+				target.value = value[0] ?? "";
+				return;
+			}
+			if (value.length > 2) {
+				scope.send({
+					type: "INPUT.PASTE",
+					value
+				});
+				target.value = value[0] ?? "";
+				event.preventDefault();
+				return;
+			}
+			if (event.inputType === "deleteContentBackward") {
+				scope.send({ type: "INPUT.BACKSPACE" });
+				return;
+			}
+			if (event.inputType === "deleteByCut") {
+				scope.send({ type: "INPUT.DELETE" });
+				return;
+			}
+			if (value === (pinView(scope.context.value, scope.context.count).chars[scope.context.focusedIndex] ?? "")) return;
+			scope.send({
+				type: "INPUT.CHANGE",
+				index,
+				value
+			});
+		}
+	};
+	byIndex.set(index, made);
+	return made;
+};
+const def = {
+	name: "pin-input",
+	machine: (args, authored) => pinInput$1(args, authored),
+	start: "idle",
+	mounted: ({ props, focus }) => {
+		if (props["autoFocus"] !== true) return;
+		queueMicrotask(() => {
+			focus("input", 0);
+		});
+	},
+	settled: ({ before, after, id, root, focus }) => {
+		const beforeCtx = before.context;
+		const afterCtx = after.context;
+		const index = afterCtx.focusedIndex;
+		if (index !== beforeCtx.focusedIndex && index >= 0) focus("input", index);
+		const wasComplete = pinView(beforeCtx.value, beforeCtx.count).complete;
+		const isComplete = pinView(afterCtx.value, afterCtx.count).complete;
+		if (!wasComplete && isComplete) {
+			if (afterCtx.blurOnComplete) {
+				const active = root().ownerDocument.activeElement;
+				if (active instanceof HTMLElement && root().contains(active)) active.blur();
+			}
+			if (afterCtx.autoSubmit) {
+				const name = afterCtx.name;
+				if (typeof name === "string" && name.length > 0) {
+					for (const node of Array.from(root().getElementsByTagName("input"))) if (node instanceof HTMLInputElement && node.id === id("hidden")) node.form?.requestSubmit();
+				}
+			}
+		}
+	},
+	parts: {
+		root: { attrs: (scope) => {
+			const ctx = scope.context;
+			return {
+				dir: scope.context.dir,
+				"data-complete": scope.attr(pinView(ctx.value, ctx.count).complete),
+				"data-disabled": scope.attr(ctx.disabled),
+				"data-readonly": scope.attr(ctx.readOnly),
+				"data-invalid": scope.attr(ctx.invalid === true)
+			};
+		} },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			for: scope.id("hidden"),
+			"data-complete": scope.attr(pinView(scope.context.value, scope.context.count).complete),
+			"data-invalid": scope.attr(scope.context.invalid === true),
+			"data-required": scope.attr(scope.context.required),
+			onClick: (event) => {
+				event.preventDefault();
+				scope.send({
+					type: "INPUT.FOCUS",
+					index: 0
+				});
+			}
+		}) },
+		control: { attrs: (scope) => ({ dir: scope.context.dir }) },
+		hiddenInput: {
+			id: "hidden",
+			attrs: (scope) => {
+				const ctx = scope.context;
+				const joined = pinView(ctx.value, ctx.count);
+				return {
+					...ariaHidden(true),
+					type: "text",
+					tabIndex: -1,
+					hidden: true,
+					disabled: scope.context.disabled,
+					readOnly: scope.context.readOnly,
+					required: scope.context.required,
+					name: scope.context.name,
+					form: scope.context.form,
+					maxLength: joined.length,
+					value: joined.asString
+				};
+			}
+		}
+	},
+	slots: { input: {
+		indexes: (context) => cellIndexes(context.count),
+		attrs: (scope) => {
+			const index = scope.slot;
+			const ctx = scope.context;
+			const filled = pinView(ctx.value, ctx.count);
+			const char = filled.chars[index] ?? "";
+			const focused = ctx.focusedIndex;
+			const tabbable = focused !== -1 ? focused : Math.min(filled.filled, filled.length - 1);
+			const label = resolveTranslations(scope).inputLabel(index, filled.length);
+			const type = scope.context.type;
+			return {
+				id: scope.id("input", index),
+				dir: scope.context.dir,
+				disabled: scope.context.disabled,
+				tabIndex: index === tabbable ? 0 : -1,
+				"data-index": index,
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-complete": scope.attr(filled.complete),
+				"data-filled": scope.attr(char !== ""),
+				"data-invalid": scope.attr(scope.context.invalid === true),
+				...ariaInvalid(scope.context.invalid === true ? true : void 0),
+				"aria-label": label,
+				inputMode: scope.context.otp || type === "numeric" ? "numeric" : "text",
+				enterKeyHint: index === filled.length - 1 ? "done" : "next",
+				type: scope.context.mask ? "password" : type === "numeric" ? "tel" : "text",
+				value: char,
+				readOnly: scope.context.readOnly,
+				autoCapitalize: "none",
+				autoComplete: scope.context.otp ? "one-time-code" : "off",
+				placeholder: focused === index ? "" : scope.context.placeholder,
+				...cellHandlers(scope, index)
+			};
+		}
+	} },
+	commands: {
+		focus: { view: ({ focus }) => focus("input", 0) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value: [...value]
+		}) },
+		clearValue: { event: () => ({ type: "VALUE.CLEAR" }) },
+		setValueAtIndex: { event: ([index, value]) => ({
+			type: "VALUE.SET",
+			value,
+			index: Math.trunc(index)
+		}) }
+	},
+	readers: {
+		count: { read: (context) => context.count },
+		items: { read: (context) => cellIndexes(context.count) },
+		value: { read: (context) => [...context.value] },
+		valueAsString: { read: (context) => pinView(context.value, context.count).asString },
+		complete: { read: (context) => {
+			const ctx = context;
+			return pinView(ctx.value, ctx.count).complete;
+		} },
+		focused: { read: (_context, state) => state === "focused" },
+		invalid: { read: (context) => context.invalid === true },
+		disabled: { read: (context) => context.disabled }
+	},
+	methods: { getItems: { call: (context) => cellIndexes(context.count) } },
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => {
+				const ctx = context;
+				return [...pinView(ctx.value, ctx.count).chars];
+			},
+			detail: (watched, _event, _props, context) => {
+				if (context === void 0) return {
+					value: [],
+					valueAsString: ""
+				};
+				const view = pinView(context.value, context.count);
+				return {
+					value: [...view.chars],
+					valueAsString: view.asString
+				};
+			}
+		},
+		"value-complete": {
+			prop: "onValueComplete",
+			watch: (context) => {
+				const ctx = context;
+				return [pinView(ctx.value, ctx.count).complete];
+			},
+			detail: (_watched, _event, _props, context) => {
+				if (context === void 0) return {
+					value: [],
+					valueAsString: ""
+				};
+				const view = pinView(context.value, context.count);
+				return {
+					value: [...view.chars],
+					valueAsString: view.asString
+				};
+			}
+		},
+		"value-invalid": {
+			prop: "onValueInvalid",
+			watch: () => [],
+			detail: (watched) => ({
+				value: watched[0],
+				index: watched[1]
+			}),
+			select: (event, _before, after) => {
+				if (event.type !== "VALUE.INVALID") return null;
+				const ctx = after;
+				return {
+					value: typeof event.value === "string" ? event.value : "",
+					index: ctx.focusedIndex
+				};
+			}
+		}
+	}
+};
+const pinInput = defineComponent(def);
+export { def, pinInput };
+
+//# sourceMappingURL=pin-input.presentation.js.map

package/dist/pin-input/pin-input.state.d.ts

@@ -0,0 +1,67 @@
+export type PinInputSanitize = (value: string) => string;
+export interface PinInputTranslations {
+  readonly inputLabel: (index: number, length: number) => string;
+}
+export type PinInputState = "idle" | "focused";
+export interface PinInputContext {
+  /** One character per cell, filled to `count` by every assign. */
+  value: string[];
+  /** The cell the keyboard talks to; -1 when nothing holds focus. */
+  focusedIndex: number;
+  count: number;
+  dir: "ltr" | "rtl";
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean | undefined;
+  required: boolean;
+  name: string | undefined;
+  form: string | undefined;
+  type: "numeric" | "alphabetic" | "alphanumeric";
+  mask: boolean;
+  otp: boolean;
+  placeholder: string;
+  pattern: string;
+  translations: unknown;
+  sanitizeValue: unknown;
+  blurOnComplete: boolean;
+  autoSubmit: boolean;
+  autoFocus: boolean;
+}
+export interface PinInputArgs {
+  count?: number;
+  value?: string | readonly string[];
+  autoFocus?: boolean;
+  defaultCount?: number;
+  dir?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  name?: string;
+  form?: string;
+  type?: string;
+  mask?: boolean;
+  otp?: boolean;
+  placeholder?: string;
+  pattern?: string;
+  translations?: unknown;
+  sanitizeValue?: unknown;
+  blurOnComplete?: boolean;
+  autoSubmit?: boolean;
+}
+export declare function initial(args: PinInputArgs, authored: (name: string) => boolean): PinInputContext;
+/**
+ * The value padded (or truncated) to the cell count. A cell the value does
+ * not reach reads as the empty string.
+ */
+export declare function fill(value: readonly string[], count: number): string[];
+export interface PinValueView {
+  readonly chars: readonly string[];
+  readonly length: number;
+  readonly filled: number;
+  readonly complete: boolean;
+  readonly asString: string;
+}
+export declare function pinView(value: readonly string[], count: number): PinValueView;
+export declare function getNextValue(current: string, next: string): string;
+//# sourceMappingURL=pin-input.state.d.ts.map