@vectoriox/iox-ui 4.28.0 → 4.29.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3123,78 +3123,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }] } });
 
-/** Which of the form's four states the canvas / runtime is showing. */
-var FormRenderState;
-(function (FormRenderState) {
-    FormRenderState["Idle"] = "idle";
-    FormRenderState["Submitting"] = "submitting";
-    FormRenderState["Success"] = "success";
-    FormRenderState["Error"] = "error";
-})(FormRenderState || (FormRenderState = {}));
-/**
- * Directive-host Form: the real `<form>` IS the host — no wrapper, no inner/outer split. Children
- * (fields, layout, the submit button, and the two state blocks) render into it via `childrenHost`.
- *
- * Scope is ANCESTRY, not naming (decision D1): a Field belongs to its nearest ancestor Form, so
- * there is no form-id to pick and nothing to mis-wire. The runtime finds its fields by walking the
- * DOM it owns.
- *
- * `renderState` drives which children are visible. In the builder it is set by the canvas state
- * switcher so an author can DESIGN the success and error blocks; at runtime the same input is
- * driven by the submit lifecycle. One mechanism, two drivers — the author designs exactly what a
- * visitor will see.
- *
- * ⚠️ `novalidate` is deliberate: the browser's native bubbles would pre-empt our own messages,
- * which are styleable, translated and announced. Validation still runs — ours does it.
- */
-class IoxFormComponent {
-    constructor() {
-        this.nodeId = '';
-        /** Stable id the submit endpoint resolves the saved spec by. */
-        this.formId = '';
-        /** Author-facing name — what the submissions inbox groups by. */
-        this.name = '';
-        this.renderState = FormRenderState.Idle;
-        /**
-         * Emitted instead of navigating. The host (builder canvas or engine runtime) owns the transport;
-         * this component owns only the DOM contract, so the same component works in both renderers.
-         */
-        this.formSubmit = new EventEmitter();
-    }
-    onSubmit(event) {
-        // Never let the browser navigate: a full page POST would lose the designed Success state
-        // and every value the visitor typed.
-        event.preventDefault();
-        this.formSubmit.emit(event);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState" }, outputs: { formSubmit: "formSubmit" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}:host ::ng-deep .iox-form-success,:host ::ng-deep .iox-form-error{display:none}:host([data-iox-state=\"success\"]) ::ng-deep .iox-form-success{display:block}:host([data-iox-state=\"error\"]) ::ng-deep .iox-form-error{display:block}:host([data-iox-state=\"success\"]) ::ng-deep .iox-field,:host([data-iox-state=\"success\"]) ::ng-deep .iox-field-group,:host([data-iox-state=\"success\"]) ::ng-deep .iox-submit{display:none}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'form[iox-form]', template: `<ng-container #childrenHost></ng-container>`, host: {
-                        '[class]': "'iox-form iox-node-' + nodeId",
-                        '[attr.novalidate]': "''",
-                        '[attr.data-iox-form]': 'formId || null',
-                        '[attr.data-iox-state]': 'renderState',
-                        '[attr.aria-busy]': "renderState === 'submitting' ? 'true' : null",
-                        '(submit)': 'onSubmit($event)',
-                    }, standalone: false, styles: [":host{box-sizing:border-box}:host ::ng-deep .iox-form-success,:host ::ng-deep .iox-form-error{display:none}:host([data-iox-state=\"success\"]) ::ng-deep .iox-form-success{display:block}:host([data-iox-state=\"error\"]) ::ng-deep .iox-form-error{display:block}:host([data-iox-state=\"success\"]) ::ng-deep .iox-field,:host([data-iox-state=\"success\"]) ::ng-deep .iox-field-group,:host([data-iox-state=\"success\"]) ::ng-deep .iox-submit{display:none}\n"] }]
-        }], propDecorators: { nodeId: [{
-                type: Input
-            }], formId: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], renderState: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }], childrenHost: [{
-                type: ViewChild,
-                args: ['childrenHost', { read: ViewContainerRef, static: true }]
-            }] } });
-
 // The persisted shape of a form. Pure types + the one derived constant each renderer needs.
 //
 // A FormSpec is DERIVED from the node tree (see `collect.ts`), never hand-maintained beside it —
@@ -3656,6 +3584,87 @@ function normaliseActions(raw) {
     return [STORE_ACTION, ...declared.filter(a => a.type !== STORE_ACTION.type)];
 }
 
+// When a field's error is allowed to be VISIBLE — the pure half of the form runtime.
+//
+// Validity and visibility are different questions. A field can be invalid from the moment the page
+// loads (an empty required field always is), but showing that immediately means greeting a visitor
+// with a wall of red before they have typed anything. This module owns the second question, and it
+// owns it in one place so the builder canvas, the SSR engine and any future runtime agree.
+//
+// Framework-free, like the rest of forms-core.
+const INITIAL_FORM_STATE = Object.freeze({
+    touched: new Set(),
+    submitted: false,
+    errors: {},
+    submitting: false,
+});
+/**
+ * Should this field's error be on screen right now?
+ *
+ * - `Submit`  — only after a submit attempt. Quietest; nothing moves while typing.
+ * - `Live`    — as soon as it is invalid. Loudest; shouts at a half-typed email address.
+ * - `Smart`   — the default, and the reason the author gets one dropdown instead of a decision per
+ *               field: stay quiet until the visitor has either left the field or tried to submit.
+ *               After that, correct live, so fixing an error clears it as they type.
+ */
+function shouldShowError(fieldName, state, timing = FeedbackTiming.Smart) {
+    if (!state.errors[fieldName])
+        return false;
+    switch (timing) {
+        case FeedbackTiming.Live: return true;
+        case FeedbackTiming.Submit: return state.submitted;
+        default: return state.submitted || state.touched.has(fieldName);
+    }
+}
+/**
+ * Re-validate one field after a change. Only that field is re-checked, EXCEPT that a `matches` rule
+ * makes another field's validity depend on this one — so a confirm-email field stops being wrong
+ * the moment you fix the address it points at, rather than waiting for its own blur.
+ */
+function onFieldChange(state, fieldName, values, spec) {
+    const errors = { ...state.errors };
+    const affected = [fieldName, ...dependentsOf(fieldName, spec)];
+    for (const name of affected) {
+        const field = (spec.fields ?? []).find(f => f.name === name);
+        if (!field)
+            continue;
+        const result = validateField(values?.[name], field, values ?? {});
+        if (result.valid)
+            delete errors[name];
+        else
+            errors[name] = { messageKey: result.messageKey, params: result.params };
+    }
+    return { ...state, errors };
+}
+/** Mark a field touched (on blur) and re-check it, so Smart timing can start showing its error. */
+function onFieldBlur(state, fieldName, values, spec) {
+    const touched = new Set(state.touched);
+    touched.add(fieldName);
+    return { ...onFieldChange(state, fieldName, values, spec), touched };
+}
+/**
+ * A submit attempt. Validates everything and flips `submitted`, so from here on every error shows
+ * whatever the timing setting is — a visitor who pressed the button is owed the full picture.
+ */
+function onSubmitAttempt(state, values, spec) {
+    const { errors } = validateForm(values ?? {}, spec);
+    return { ...state, submitted: true, errors };
+}
+/** Server-side rejection: adopt the server's errors verbatim. It is the authority, not the client. */
+function applyServerErrors(state, errors) {
+    return { ...state, submitted: true, submitting: false, errors: { ...errors } };
+}
+/** A clean slate after a successful submit, for a form configured to clear itself. */
+function resetFormState() {
+    return { touched: new Set(), submitted: false, errors: {}, submitting: false };
+}
+/** Field names whose validity depends on `fieldName` through a `matches` rule. */
+function dependentsOf(fieldName, spec) {
+    return (spec.fields ?? [])
+        .filter(f => (f.rules ?? []).some(r => r.params?.['field'] === fieldName))
+        .map(f => f.name);
+}
+
 /*
  * @vectoriox/iox-ui/forms-core — the shared, FRAMEWORK-FREE core of the forms feature.
  *
@@ -3668,6 +3677,229 @@ function normaliseActions(raw) {
  * disagree. See iox-ai-guidance `architecture/builder/forms-and-inputs-plan.md` §5.
  */
 
+const IOX_FORM_MESSAGES = new InjectionToken('IOX_FORM_MESSAGES', {
+    providedIn: 'root',
+    factory: () => defaultMessageResolver,
+});
+/** `{{n}}` / `{{field}}` interpolation over the built-in English catalog. */
+const defaultMessageResolver = (key, params) => {
+    const template = DEFAULT_EN_MESSAGES[key] ?? key;
+    if (!params)
+        return template;
+    return template.replace(/\{\{(\w+)\}\}/g, (_, name) => String(params[name] ?? ''));
+};
+/**
+ * Per-form runtime. **Provided by `IoxFormComponent`**, so every Field created into that form's
+ * `childrenHost` resolves THIS instance through its element injector — which is exactly how a field
+ * finds its form without a form-id, matching the ancestry rule (decision D1). A Field outside any
+ * form injects nothing and simply renders.
+ *
+ * All the decisions live in the pure `forms-core` runtime; this class only holds the mutable state,
+ * the registered fields and the Angular-shaped API. Nothing here decides *when* an error shows.
+ */
+class FormRuntimeService {
+    constructor() {
+        /** Registered fields, in DOM order — the order the spec and focus-first-invalid depend on. */
+        this.fields = [];
+        this._state = INITIAL_FORM_STATE;
+        this._spec = null;
+        this._timing = FeedbackTiming.Smart;
+    }
+    get state() { return this._state; }
+    get submitting() { return this._state.submitting; }
+    /** Set by the Form from its own traits. */
+    configure(spec, timing) {
+        this._spec = spec;
+        this._timing = timing;
+    }
+    /**
+     * A Field announces itself here on init. It passes FUNCTIONS rather than values so the runtime
+     * always reads the field's current spec and value — a trait edited on the canvas takes effect
+     * without re-registering anything.
+     */
+    register(field) {
+        this.fields.push(field);
+        return () => {
+            const index = this.fields.indexOf(field);
+            if (index >= 0)
+                this.fields.splice(index, 1);
+        };
+    }
+    /** The live spec, derived from what is registered right now. */
+    specNow() {
+        const base = this._spec ?? {
+            formId: '', name: '', feedback: FeedbackTiming.Smart,
+            fields: [], actions: [], antiSpam: { honeypot: true, minFillMs: 1200 },
+        };
+        return { ...base, fields: this.fields.map(f => f.spec()) };
+    }
+    /** Current values, keyed by submitted field name. */
+    values() {
+        const out = {};
+        for (const field of this.fields)
+            out[field.spec().name] = field.getValue();
+        return out;
+    }
+    onChange(name) {
+        this._state = onFieldChange(this._state, name, this.values(), this.specNow());
+    }
+    onBlur(name) {
+        this._state = onFieldBlur(this._state, name, this.values(), this.specNow());
+    }
+    /** Validate everything. Returns whether the submission may proceed. */
+    validateAll() {
+        this._state = onSubmitAttempt(this._state, this.values(), this.specNow());
+        return Object.keys(this._state.errors).length === 0;
+    }
+    setSubmitting(submitting) {
+        this._state = { ...this._state, submitting };
+    }
+    /** The server rejected it — its verdict replaces ours. */
+    applyErrors(errors) {
+        this._state = { ...this._state, submitted: true, submitting: false, errors: { ...errors } };
+    }
+    reset() {
+        this._state = resetFormState();
+    }
+    /** Whether this field's error is allowed on screen right now. */
+    showsError(name) {
+        return shouldShowError(name, this._state, this._timing);
+    }
+    errorFor(name) {
+        return this._state.errors[name];
+    }
+    /** The first invalid field in registration (DOM) order — what submit should focus. */
+    firstInvalidName() {
+        for (const field of this.fields) {
+            const name = field.spec().name;
+            if (this._state.errors[name])
+                return name;
+        }
+        return null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: FormRuntimeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: FormRuntimeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: FormRuntimeService, decorators: [{
+            type: Injectable
+        }] });
+
+/** Which of the form's four states the canvas / runtime is showing. */
+var FormRenderState;
+(function (FormRenderState) {
+    FormRenderState["Idle"] = "idle";
+    FormRenderState["Submitting"] = "submitting";
+    FormRenderState["Success"] = "success";
+    FormRenderState["Error"] = "error";
+})(FormRenderState || (FormRenderState = {}));
+/**
+ * Directive-host Form: the real `<form>` IS the host — no wrapper, no inner/outer split. Children
+ * (fields, layout, the submit button, and the two state blocks) render into it via `childrenHost`.
+ *
+ * Scope is ANCESTRY, not naming (decision D1): a Field belongs to its nearest ancestor Form, so
+ * there is no form-id to pick and nothing to mis-wire. The runtime finds its fields by walking the
+ * DOM it owns.
+ *
+ * `renderState` drives which children are visible. In the builder it is set by the canvas state
+ * switcher so an author can DESIGN the success and error blocks; at runtime the same input is
+ * driven by the submit lifecycle. One mechanism, two drivers — the author designs exactly what a
+ * visitor will see.
+ *
+ * ⚠️ `novalidate` is deliberate: the browser's native bubbles would pre-empt our own messages,
+ * which are styleable, translated and announced. Validation still runs — ours does it.
+ */
+class IoxFormComponent {
+    /**
+     * Constructor injection rather than `inject()`, for the same reason as Field: this library's
+     * specs construct components directly. `runtime` is provided by THIS component (see
+     * `providers`), so every Field created into `childrenHost` resolves this instance by ancestry.
+     */
+    constructor(runtime, host) {
+        this.runtime = runtime;
+        this.host = host;
+        this.nodeId = '';
+        /** Stable id the submit endpoint resolves the saved spec by. */
+        this.formId = '';
+        /** Author-facing name — what the submissions inbox groups by. */
+        this.name = '';
+        this.renderState = FormRenderState.Idle;
+        this.feedback = FeedbackTiming.Smart;
+        /**
+         * Emitted ONLY when client-side validation passes, carrying the collected values. The host
+         * (builder canvas or engine runtime) owns the transport — posting, retries and the server's
+         * verdict — so the same component serves both renderers.
+         */
+        this.formSubmit = new EventEmitter();
+        /** Emitted when a submit attempt was refused locally, so a host can react (analytics, focus). */
+        this.validationFailed = new EventEmitter();
+    }
+    ngOnChanges() {
+        // Traits are edited by DIRECT ASSIGNMENT on the canvas, which does not call ngOnChanges —
+        // but `feedback` is also read live by `runtime.showsError`, so re-configuring here covers
+        // the setInput path and the getter covers the rest.
+        this.runtime.configure(this.runtime.specNow(), this.feedback);
+    }
+    onSubmit(event) {
+        // Never let the browser navigate: a full page POST would lose the designed Success state
+        // and every value the visitor typed.
+        event.preventDefault();
+        this.runtime.configure(this.runtime.specNow(), this.feedback);
+        if (!this.runtime.validateAll()) {
+            // Move the visitor TO the problem rather than leaving them to hunt for red text —
+            // the single most valuable thing a failed submit can do.
+            this.focusFirstInvalid();
+            this.validationFailed.emit(this.runtime.state.errors);
+            return;
+        }
+        this.formSubmit.emit({ values: this.runtime.values(), event });
+    }
+    focusFirstInvalid() {
+        const name = this.runtime.firstInvalidName();
+        if (!name)
+            return;
+        // Compare the attribute rather than interpolating the name into a selector: `CSS.escape` is
+        // a browser-only global (undefined on the server and under the unit-test runner), and an
+        // author-overridden field key can contain characters a raw selector would choke on.
+        const fields = this.host.nativeElement.querySelectorAll?.('[data-iox-field]') ?? [];
+        for (const element of Array.from(fields)) {
+            if (element.getAttribute('data-iox-field') !== name)
+                continue;
+            element.querySelector('.iox-field__control')?.focus();
+            return;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, deps: [{ token: FormRuntimeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormComponent, isStandalone: false, selector: "form[iox-form]", inputs: { nodeId: "nodeId", formId: "formId", name: "name", renderState: "renderState", feedback: "feedback" }, outputs: { formSubmit: "formSubmit", validationFailed: "validationFailed" }, host: { listeners: { "submit": "onSubmit($event)" }, properties: { "class": "'iox-form iox-node-' + nodeId", "attr.novalidate": "''", "attr.data-iox-form": "formId || null", "attr.data-iox-state": "renderState", "attr.aria-busy": "renderState === 'submitting' ? 'true' : null" } }, providers: [FormRuntimeService], viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}:host ::ng-deep .iox-form-success,:host ::ng-deep .iox-form-error{display:none}:host([data-iox-state=\"success\"]) ::ng-deep .iox-form-success{display:block}:host([data-iox-state=\"error\"]) ::ng-deep .iox-form-error{display:block}:host([data-iox-state=\"success\"]) ::ng-deep .iox-field,:host([data-iox-state=\"success\"]) ::ng-deep .iox-field-group,:host([data-iox-state=\"success\"]) ::ng-deep .iox-submit{display:none}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'form[iox-form]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-form iox-node-' + nodeId",
+                        '[attr.novalidate]': "''",
+                        '[attr.data-iox-form]': 'formId || null',
+                        '[attr.data-iox-state]': 'renderState',
+                        '[attr.aria-busy]': "renderState === 'submitting' ? 'true' : null",
+                        '(submit)': 'onSubmit($event)',
+                    }, providers: [FormRuntimeService], standalone: false, styles: [":host{box-sizing:border-box}:host ::ng-deep .iox-form-success,:host ::ng-deep .iox-form-error{display:none}:host([data-iox-state=\"success\"]) ::ng-deep .iox-form-success{display:block}:host([data-iox-state=\"error\"]) ::ng-deep .iox-form-error{display:block}:host([data-iox-state=\"success\"]) ::ng-deep .iox-field,:host([data-iox-state=\"success\"]) ::ng-deep .iox-field-group,:host([data-iox-state=\"success\"]) ::ng-deep .iox-submit{display:none}\n"] }]
+        }], ctorParameters: () => [{ type: FormRuntimeService }, { type: i0.ElementRef }], propDecorators: { nodeId: [{
+                type: Input
+            }], formId: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], renderState: [{
+                type: Input
+            }], feedback: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], validationFailed: [{
+                type: Output
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
 let fieldSeq = 0;
 /**
  * The compound Field: label + control + help + error + required mark, as ONE node (decision D2).
@@ -3685,8 +3917,19 @@ let fieldSeq = 0;
  * and choosing `email` also chooses email validation.
  */
 class IoxFieldComponent {
-    constructor() {
+    /**
+     * Classic constructor injection, not `inject()`: this library's specs construct components
+     * directly (its vitest setup cannot run `TestBed.createComponent`), and a field initializer
+     * calling `inject()` throws NG0203 outside an injection context.
+     *
+     * `runtime` is optional because a Field dropped OUTSIDE any Form must still render — it simply
+     * has nothing to submit to. That is the same ancestry rule from the other side.
+     */
+    constructor(runtime, resolveMessage) {
+        this.runtime = runtime;
+        this.resolveMessage = resolveMessage;
         this.nodeId = '';
+        /** The submitted key. Blank means "derive it from the label" — authors never invent keys. */
         this.name = '';
         this.label = '';
         this.control = ControlType.Text;
@@ -3700,10 +3943,15 @@ class IoxFieldComponent {
         this.accept = '';
         this.options = [];
         this.value = '';
-        /** The resolved, already-translated message. Resolving the key is the host's job, not ours. */
-        this.errorText = '';
-        /** Design-time or runtime failure. The style compiler targets `.iox-invalid`. */
-        this.invalid = false;
+        /** Rules beyond `required` — carried on the node, interpreted by forms-core. */
+        this.rules = [];
+        /**
+         * Forces the error appearance without a real failure — how the builder lets an author DESIGN
+         * the error state (decision D5). At runtime the state comes from the runtime service instead.
+         */
+        this.forceInvalid = false;
+        /** Placeholder shown while designing the error state, so the block has something to style. */
+        this.designErrorText = 'Please check this field';
         /** Only after a successful check — never on an untouched field. */
         this.showValid = false;
         this.valueChange = new EventEmitter();
@@ -3711,6 +3959,47 @@ class IoxFieldComponent {
         /** Stable per instance so `for`/`id` and `aria-describedby` always pair up. */
         this.controlId = `iox-field-${++fieldSeq}`;
     }
+    ngOnInit() {
+        this.unregister = this.runtime?.register({
+            // Functions, not values: a trait edited on the canvas takes effect with no re-register.
+            spec: () => this.toSpec(),
+            getValue: () => this.value,
+        });
+    }
+    ngOnDestroy() {
+        this.unregister?.();
+    }
+    /** The submitted key: the author's override, else derived from the label. */
+    get fieldName() {
+        return this.name || deriveFieldName(this.label);
+    }
+    /** Failing AND allowed to say so — or forced, while an author designs the state. */
+    get invalid() {
+        if (this.forceInvalid)
+            return true;
+        return !!this.runtime?.showsError(this.fieldName);
+    }
+    /** The message a visitor reads. Translation is the consumer's, via IOX_FORM_MESSAGES. */
+    get errorText() {
+        if (this.forceInvalid)
+            return this.designErrorText;
+        const error = this.runtime?.errorFor(this.fieldName);
+        return error ? this.resolveMessage(error.messageKey, error.params) : '';
+    }
+    toSpec() {
+        const spec = {
+            name: this.fieldName,
+            control: this.control ?? ControlType.Text,
+            label: this.label,
+        };
+        if (this.required)
+            spec.required = true;
+        if (this.rules?.length)
+            spec.rules = this.rules;
+        if (this.options?.length)
+            spec.options = this.options;
+        return spec;
+    }
     /** `file`, `date`, `number`… map straight through; everything else is a text input. */
     get inputType() {
         const passthrough = ['email', 'tel', 'url', 'number', 'password', 'date', 'time', 'file', 'hidden'];
@@ -3727,13 +4016,16 @@ class IoxFieldComponent {
     }
     emit(value) {
         this.value = value;
+        this.runtime?.onChange(this.fieldName);
         this.valueChange.emit(value);
     }
     touch() {
+        // Blur is what lets Smart timing start speaking for this field.
+        this.runtime?.onBlur(this.fieldName);
         this.touched.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", accept: "accept", options: "options", value: "value", errorText: "errorText", invalid: "invalid", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "name || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, deps: [{ token: FormRuntimeService, optional: true }, { token: IOX_FORM_MESSAGES }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFieldComponent, isStandalone: false, selector: "div[iox-field]", inputs: { nodeId: "nodeId", name: "name", label: "label", control: "control", placeholder: "placeholder", help: "help", required: "required", disabled: "disabled", labelHidden: "labelHidden", requiredMark: "requiredMark", rows: "rows", accept: "accept", options: "options", value: "value", rules: "rules", forceInvalid: "forceInvalid", designErrorText: "designErrorText", showValid: "showValid" }, outputs: { valueChange: "valueChange", touched: "touched" }, host: { properties: { "class": "'iox-field iox-node-' + nodeId", "class.iox-invalid": "invalid", "class.iox-valid": "showValid", "attr.data-iox-field": "fieldName || null", "hidden": "control === 'hidden' ? true : null" } }, ngImport: i0, template: `
         <label class="iox-field__label"
                [class.iox-field__label--hidden]="labelHidden"
                [attr.for]="controlId">
@@ -3747,7 +4039,7 @@ class IoxFieldComponent {
             @case ('textarea') {
                 <textarea class="iox-field__control"
                           [id]="controlId"
-                          [name]="name"
+                          [name]="fieldName"
                           [rows]="rows"
                           [attr.placeholder]="placeholder || null"
                           [attr.required]="required ? '' : null"
@@ -3761,7 +4053,7 @@ class IoxFieldComponent {
             @case ('select') {
                 <select class="iox-field__control"
                         [id]="controlId"
-                        [name]="name"
+                        [name]="fieldName"
                         [attr.required]="required ? '' : null"
                         [attr.aria-invalid]="invalid ? 'true' : null"
                         [attr.aria-describedby]="describedBy"
@@ -3778,7 +4070,7 @@ class IoxFieldComponent {
                 <input class="iox-field__control iox-field__control--checkbox"
                        type="checkbox"
                        [id]="controlId"
-                       [name]="name"
+                       [name]="fieldName"
                        [attr.required]="required ? '' : null"
                        [attr.aria-invalid]="invalid ? 'true' : null"
                        [attr.aria-describedby]="describedBy"
@@ -3792,7 +4084,7 @@ class IoxFieldComponent {
                     @for (option of options; track option.value) {
                         <label class="iox-field__option">
                             <input type="radio"
-                                   [name]="name"
+                                   [name]="fieldName"
                                    [value]="option.value"
                                    [checked]="option.value === value"
                                    [attr.disabled]="disabled ? '' : null"
@@ -3806,7 +4098,7 @@ class IoxFieldComponent {
             @default {
                 <input class="iox-field__control"
                        [id]="controlId"
-                       [name]="name"
+                       [name]="fieldName"
                        [type]="inputType"
                        [attr.placeholder]="placeholder || null"
                        [attr.required]="required ? '' : null"
@@ -3844,7 +4136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             @case ('textarea') {
                 <textarea class="iox-field__control"
                           [id]="controlId"
-                          [name]="name"
+                          [name]="fieldName"
                           [rows]="rows"
                           [attr.placeholder]="placeholder || null"
                           [attr.required]="required ? '' : null"
@@ -3858,7 +4150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             @case ('select') {
                 <select class="iox-field__control"
                         [id]="controlId"
-                        [name]="name"
+                        [name]="fieldName"
                         [attr.required]="required ? '' : null"
                         [attr.aria-invalid]="invalid ? 'true' : null"
                         [attr.aria-describedby]="describedBy"
@@ -3875,7 +4167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 <input class="iox-field__control iox-field__control--checkbox"
                        type="checkbox"
                        [id]="controlId"
-                       [name]="name"
+                       [name]="fieldName"
                        [attr.required]="required ? '' : null"
                        [attr.aria-invalid]="invalid ? 'true' : null"
                        [attr.aria-describedby]="describedBy"
@@ -3889,7 +4181,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                     @for (option of options; track option.value) {
                         <label class="iox-field__option">
                             <input type="radio"
-                                   [name]="name"
+                                   [name]="fieldName"
                                    [value]="option.value"
                                    [checked]="option.value === value"
                                    [attr.disabled]="disabled ? '' : null"
@@ -3903,7 +4195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             @default {
                 <input class="iox-field__control"
                        [id]="controlId"
-                       [name]="name"
+                       [name]="fieldName"
                        [type]="inputType"
                        [attr.placeholder]="placeholder || null"
                        [attr.required]="required ? '' : null"
@@ -3927,10 +4219,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[class]': "'iox-field iox-node-' + nodeId",
                         '[class.iox-invalid]': 'invalid',
                         '[class.iox-valid]': 'showValid',
-                        '[attr.data-iox-field]': 'name || null',
+                        '[attr.data-iox-field]': 'fieldName || null',
                         '[hidden]': "control === 'hidden' ? true : null",
                     }, standalone: false, styles: [":host{box-sizing:border-box;display:block}.iox-field__label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}\n"] }]
-        }], propDecorators: { nodeId: [{
+        }], ctorParameters: () => [{ type: FormRuntimeService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [IOX_FORM_MESSAGES]
+                }] }], propDecorators: { nodeId: [{
                 type: Input
             }], name: [{
                 type: Input
@@ -3958,9 +4255,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 type: Input
             }], value: [{
                 type: Input
-            }], errorText: [{
+            }], rules: [{
+                type: Input
+            }], forceInvalid: [{
                 type: Input
-            }], invalid: [{
+            }], designErrorText: [{
                 type: Input
             }], showValid: [{
                 type: Input