@vectoriox/iox-ui 4.26.0 → 4.28.0

package/fesm2022/vectoriox-iox-ui.mjs

@@ -3123,6 +3123,976 @@ 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 —
+// there is one source of truth for "what fields does this form have", and it is the tree the author
+// edited. The builder writes the derived spec into the saved page so the SERVER can re-validate
+// against it without re-implementing the builder's tree walk.
+/** What the visitor actually types into. Chosen by a trait; it also implies a validation rule. */
+var ControlType;
+(function (ControlType) {
+    ControlType["Text"] = "text";
+    ControlType["Email"] = "email";
+    ControlType["Tel"] = "tel";
+    ControlType["Url"] = "url";
+    ControlType["Number"] = "number";
+    ControlType["Password"] = "password";
+    ControlType["Textarea"] = "textarea";
+    ControlType["Select"] = "select";
+    ControlType["Checkbox"] = "checkbox";
+    ControlType["Radio"] = "radio";
+    ControlType["Date"] = "date";
+    ControlType["Time"] = "time";
+    ControlType["File"] = "file";
+    /** Not shown; carries a constant or a bound value (campaign, source page, …). */
+    ControlType["Hidden"] = "hidden";
+})(ControlType || (ControlType = {}));
+/** The v1 rule grammar. Phase 3's conditional logic reuses these same names for its conditions. */
+var RuleName;
+(function (RuleName) {
+    RuleName["Required"] = "required";
+    RuleName["MinLength"] = "minLength";
+    RuleName["MaxLength"] = "maxLength";
+    RuleName["Min"] = "min";
+    RuleName["Max"] = "max";
+    RuleName["Pattern"] = "pattern";
+    /** Cross-field: this value must equal another field's (confirm email / password). */
+    RuleName["Matches"] = "matches";
+    /** A checkbox that must be ticked — terms, consent. */
+    RuleName["Accepted"] = "accepted";
+    RuleName["FileType"] = "fileType";
+    RuleName["FileSize"] = "fileSize";
+})(RuleName || (RuleName = {}));
+/** Named regexes so an author picks "Email" rather than writing one. */
+var PatternPreset;
+(function (PatternPreset) {
+    PatternPreset["Email"] = "email";
+    PatternPreset["Phone"] = "phone";
+    PatternPreset["Url"] = "url";
+    PatternPreset["Digits"] = "digits";
+    PatternPreset["Letters"] = "letters";
+    PatternPreset["Slug"] = "slug";
+})(PatternPreset || (PatternPreset = {}));
+/**
+ * Deliberately permissive. A validator that rejects `user+tag@sub.domain.co.uk` or a real-world
+ * phone number is worse than one that lets a typo through: the address gets verified by sending to
+ * it, and a false rejection is a lost lead with no recourse.
+ */
+const PATTERN_PRESETS = Object.freeze({
+    [PatternPreset.Email]: /^[^\s@]+@[^\s@.]+(\.[^\s@.]+)+$/,
+    [PatternPreset.Phone]: /^\+?[\d\s().-]{6,20}$/,
+    [PatternPreset.Url]: /^(https?:\/\/)?[^\s.]+\.[^\s]{2,}$/i,
+    [PatternPreset.Digits]: /^\d+$/,
+    [PatternPreset.Letters]: /^[\p{L}\s'-]+$/u,
+    [PatternPreset.Slug]: /^[a-z0-9]+(-[a-z0-9]+)*$/,
+});
+/** When a field is validated, once the author has stopped deciding it per field. */
+var FeedbackTiming;
+(function (FeedbackTiming) {
+    /** Validate on submit, then live per-field once that field has been touched or has failed. */
+    FeedbackTiming["Smart"] = "smart";
+    FeedbackTiming["Submit"] = "submit";
+    FeedbackTiming["Live"] = "live";
+})(FeedbackTiming || (FeedbackTiming = {}));
+/**
+ * The rule a control type implies with no configuration. Choosing "Email" IS choosing email
+ * validation — the single biggest reason the panel can stay empty and still validate well.
+ */
+const IMPLIED_PATTERN = Object.freeze({
+    [ControlType.Email]: PatternPreset.Email,
+    [ControlType.Tel]: PatternPreset.Phone,
+    [ControlType.Url]: PatternPreset.Url,
+});
+/** Controls whose value is a list rather than a scalar. */
+const MULTI_VALUE_CONTROLS = new Set([ControlType.File]);
+
+// The default message for every rule, as an i18n KEY — never a rendered string.
+//
+// This is what lets the Validation panel stay empty and still produce good errors: an author who
+// configures nothing gets "Enter a valid email address", not "Invalid". The author's own `message`
+// on a rule always wins; this is the fallback, and it is the only place a default lives.
+//
+// Consumers translate the key with their own i18n (the CMS client via ngx-translate, the engine via
+// the page's locale bundle). The backend returns the key too, so a server-side rejection renders in
+// the visitor's language rather than in the server's.
+/** Namespace for every forms validation key. Keep in sync with `en.json` / `he.json`. */
+const MESSAGE_NAMESPACE = 'forms.validation';
+/**
+ * Rule → i18n key. Params travel beside the key (`{ n: 8 }`, `{ field: 'Email' }`) so a translation
+ * can place the number wherever its grammar needs it, rather than having it baked into the string.
+ */
+const RULE_MESSAGE_KEYS = Object.freeze({
+    [RuleName.Required]: `${MESSAGE_NAMESPACE}.required`,
+    [RuleName.MinLength]: `${MESSAGE_NAMESPACE}.minLength`,
+    [RuleName.MaxLength]: `${MESSAGE_NAMESPACE}.maxLength`,
+    [RuleName.Min]: `${MESSAGE_NAMESPACE}.min`,
+    [RuleName.Max]: `${MESSAGE_NAMESPACE}.max`,
+    [RuleName.Pattern]: `${MESSAGE_NAMESPACE}.pattern`,
+    [RuleName.Matches]: `${MESSAGE_NAMESPACE}.matches`,
+    [RuleName.Accepted]: `${MESSAGE_NAMESPACE}.accepted`,
+    [RuleName.FileType]: `${MESSAGE_NAMESPACE}.fileType`,
+    [RuleName.FileSize]: `${MESSAGE_NAMESPACE}.fileSize`,
+});
+/**
+ * A pattern failure deserves better than "Invalid format". Each preset gets its own key so the
+ * message can say what a valid value looks like, which is the difference between a visitor fixing
+ * a typo and a visitor giving up.
+ */
+const PATTERN_MESSAGE_KEYS = Object.freeze({
+    email: `${MESSAGE_NAMESPACE}.pattern.email`,
+    phone: `${MESSAGE_NAMESPACE}.pattern.phone`,
+    url: `${MESSAGE_NAMESPACE}.pattern.url`,
+    digits: `${MESSAGE_NAMESPACE}.pattern.digits`,
+    letters: `${MESSAGE_NAMESPACE}.pattern.letters`,
+    slug: `${MESSAGE_NAMESPACE}.pattern.slug`,
+});
+/** Form-level outcomes the visitor sees in the Error state. One designed block, five reasons. */
+const FORM_ERROR_KEYS = Object.freeze({
+    Network: `${MESSAGE_NAMESPACE}.form.network`,
+    Rejected: `${MESSAGE_NAMESPACE}.form.rejected`,
+    Spam: `${MESSAGE_NAMESPACE}.form.spam`,
+    RateLimited: `${MESSAGE_NAMESPACE}.form.rateLimited`,
+    Server: `${MESSAGE_NAMESPACE}.form.server`,
+});
+/** The English defaults, so a consumer that has not added the keys yet still shows real text. */
+const DEFAULT_EN_MESSAGES = Object.freeze({
+    [RULE_MESSAGE_KEYS[RuleName.Required]]: 'This field is required',
+    [RULE_MESSAGE_KEYS[RuleName.MinLength]]: 'Use at least {{n}} characters',
+    [RULE_MESSAGE_KEYS[RuleName.MaxLength]]: 'Use no more than {{n}} characters',
+    [RULE_MESSAGE_KEYS[RuleName.Min]]: 'Enter {{n}} or more',
+    [RULE_MESSAGE_KEYS[RuleName.Max]]: 'Enter {{n}} or less',
+    [RULE_MESSAGE_KEYS[RuleName.Pattern]]: 'Check the format of this value',
+    [RULE_MESSAGE_KEYS[RuleName.Matches]]: 'This must match {{field}}',
+    [RULE_MESSAGE_KEYS[RuleName.Accepted]]: 'Please tick this to continue',
+    [RULE_MESSAGE_KEYS[RuleName.FileType]]: 'That file type isn’t accepted',
+    [RULE_MESSAGE_KEYS[RuleName.FileSize]]: 'That file is larger than {{n}}MB',
+    [PATTERN_MESSAGE_KEYS['email']]: 'Enter a valid email address',
+    [PATTERN_MESSAGE_KEYS['phone']]: 'Enter a valid phone number',
+    [PATTERN_MESSAGE_KEYS['url']]: 'Enter a valid web address',
+    [PATTERN_MESSAGE_KEYS['digits']]: 'Use digits only',
+    [PATTERN_MESSAGE_KEYS['letters']]: 'Use letters only',
+    [PATTERN_MESSAGE_KEYS['slug']]: 'Use lowercase letters, numbers and hyphens',
+    [FORM_ERROR_KEYS.Network]: 'We couldn’t reach the server — check your connection and try again',
+    [FORM_ERROR_KEYS.Rejected]: 'Some answers need fixing',
+    [FORM_ERROR_KEYS.Spam]: 'We couldn’t accept this submission',
+    [FORM_ERROR_KEYS.RateLimited]: 'Too many attempts — please wait a moment and try again',
+    [FORM_ERROR_KEYS.Server]: 'Something went wrong on our side — your answers are still here',
+});
+
+// The validator. ONE implementation, run by the builder canvas, the SSR engine and `iox-cms`.
+//
+// Client-side validation is UX; server-side validation is truth. Because both call this function,
+// a visitor can never be told a value is fine and then have the server reject it, and a hand-crafted
+// POST can never bypass a rule the author configured.
+/**
+ * Validate one field's value.
+ *
+ * Order is deliberate and is part of the contract:
+ *   1. `required` (or `accepted` for a checkbox) — the only rules an EMPTY value can fail.
+ *   2. Everything else, in the order the author arranged them, but ONLY for a non-empty value.
+ *
+ * That second point is what stops an optional "Phone" field from shouting "enter a valid phone
+ * number" at someone who simply left it blank — the single most common validation-UX bug.
+ * The FIRST failure wins: a visitor fixes one thing at a time.
+ */
+function validateField(value, spec, form = {}) {
+    const rules = effectiveRules(spec);
+    const empty = isEmpty(value, spec.control);
+    for (const rule of rules) {
+        const appliesToEmpty = rule.name === RuleName.Required || rule.name === RuleName.Accepted;
+        if (empty && !appliesToEmpty)
+            continue;
+        const failure = check(rule, value, spec, form);
+        if (failure) {
+            return {
+                valid: false,
+                messageKey: rule.message ?? failure.messageKey,
+                params: failure.params,
+            };
+        }
+    }
+    return { valid: true };
+}
+/**
+ * Validate a whole submission. Every field is checked (not short-circuited at the first bad one) so
+ * the visitor sees every problem at once instead of fixing them one reload at a time.
+ */
+function validateForm(values, spec) {
+    const errors = {};
+    for (const field of spec.fields ?? []) {
+        const result = validateField(values?.[field.name], field, values ?? {});
+        if (!result.valid) {
+            errors[field.name] = { messageKey: result.messageKey, params: result.params };
+        }
+    }
+    return { valid: Object.keys(errors).length === 0, errors };
+}
+/** The name of the first field with an error, in spec order — what the browser should focus. */
+function firstInvalidField(spec, errors) {
+    for (const field of spec.fields ?? [])
+        if (errors[field.name])
+            return field.name;
+    return null;
+}
+// ─── internals ───────────────────────────────────────────────────────────────
+/**
+ * The author's rules, plus the ones the field's own configuration implies: `required` from the
+ * switch (rather than making the author add a rule for the commonest case) and the pattern implied
+ * by an Email/Tel/Url control. An explicitly declared rule of the same name always wins, so an
+ * author who sets their own `pattern` on an Email field is not fighting an invisible second one.
+ */
+function effectiveRules(spec) {
+    const declared = spec.rules ?? [];
+    const has = (name) => declared.some(r => r.name === name);
+    const implied = [];
+    if (spec.required && !has(RuleName.Required)) {
+        // A checkbox's "required" means TICKED, which is a different message and a different check.
+        implied.push(spec.control === ControlType.Checkbox
+            ? { name: RuleName.Accepted }
+            : { name: RuleName.Required });
+    }
+    const preset = IMPLIED_PATTERN[spec.control];
+    if (preset && !has(RuleName.Pattern)) {
+        implied.push({ name: RuleName.Pattern, params: { preset } });
+    }
+    return [...implied, ...declared];
+}
+/** Empty means "the visitor gave us nothing" — per control type, not a blanket falsy check. */
+function isEmpty(value, control) {
+    if (value === null || value === undefined)
+        return true;
+    if (control === ControlType.Checkbox)
+        return value === false;
+    if (Array.isArray(value))
+        return value.length === 0;
+    if (typeof value === 'string')
+        return value.trim() === '';
+    return false;
+}
+function check(rule, value, spec, form) {
+    const fail = (messageKey, params) => ({ messageKey, params });
+    const defaultKey = RULE_MESSAGE_KEYS[rule.name];
+    const n = Number(rule.params?.['n']);
+    switch (rule.name) {
+        case RuleName.Required:
+            return isEmpty(value, spec.control) ? fail(defaultKey) : null;
+        case RuleName.Accepted:
+            return value === true ? null : fail(defaultKey);
+        case RuleName.MinLength:
+            return text(value).length < n ? fail(defaultKey, { n }) : null;
+        case RuleName.MaxLength:
+            return text(value).length > n ? fail(defaultKey, { n }) : null;
+        case RuleName.Min: {
+            const num = numeric(value);
+            return num === null || num < n ? fail(defaultKey, { n }) : null;
+        }
+        case RuleName.Max: {
+            const num = numeric(value);
+            return num === null || num > n ? fail(defaultKey, { n }) : null;
+        }
+        case RuleName.Pattern: {
+            const regex = patternFor(rule);
+            if (!regex)
+                return null; // an unparsable custom regex must not block a submission
+            if (regex.test(text(value)))
+                return null;
+            const preset = rule.params?.['preset'];
+            return fail((preset && PATTERN_MESSAGE_KEYS[preset]) || defaultKey);
+        }
+        case RuleName.Matches: {
+            const other = String(rule.params?.['field'] ?? '');
+            return text(value) === text(form?.[other]) ? null : fail(defaultKey, { field: other });
+        }
+        case RuleName.FileType: {
+            const accepted = list(rule.params?.['types']).map(t => t.toLowerCase().replace(/^\./, ''));
+            if (!accepted.length)
+                return null;
+            const bad = files(value).some(f => {
+                const ext = (f.name ?? '').split('.').pop()?.toLowerCase() ?? '';
+                const mime = (f.type ?? '').toLowerCase();
+                return !accepted.some(t => t === ext || mime === t || mime.startsWith(t + '/'));
+            });
+            return bad ? fail(defaultKey, { types: accepted.join(', ') }) : null;
+        }
+        case RuleName.FileSize: {
+            const maxBytes = n * 1024 * 1024;
+            return files(value).some(f => (f.size ?? 0) > maxBytes) ? fail(defaultKey, { n }) : null;
+        }
+        default:
+            return null;
+    }
+}
+function patternFor(rule) {
+    const preset = rule.params?.['preset'];
+    if (preset && PATTERN_PRESETS[preset])
+        return PATTERN_PRESETS[preset];
+    const custom = rule.params?.['regex'];
+    if (typeof custom !== 'string' || !custom)
+        return null;
+    // A malformed regex is the AUTHOR's mistake; failing open is the only safe reading, because
+    // failing closed would make a live form permanently unsubmittable for every visitor.
+    try {
+        return new RegExp(custom);
+    }
+    catch {
+        return null;
+    }
+}
+const text = (value) => value === null || value === undefined ? '' : String(value).trim();
+function numeric(value) {
+    const parsed = typeof value === 'number' ? value : parseFloat(text(value));
+    return Number.isFinite(parsed) ? parsed : null;
+}
+const list = (value) => Array.isArray(value) ? value.map(String)
+    : typeof value === 'string' ? value.split(',').map(s => s.trim()).filter(Boolean)
+        : [];
+const files = (value) => Array.isArray(value) ? value
+    : value && typeof value === 'object' ? [value]
+        : [];
+
+// Derive a FormSpec from a node tree.
+//
+// The tree the author edited is the SINGLE source of truth for "what fields does this form have".
+// The spec is derived from it — never maintained beside it — so a field cannot exist in one and not
+// the other. The builder runs this on save and stores the result in the page document; the backend
+// reads THAT stored spec to re-validate a submission (it must never trust a spec sent by the
+// browser). See iox-ai-guidance `architecture/builder/forms-and-inputs-plan.md` §5.1 and D11.
+const FORM_NODE_TYPE = 'Form';
+const FIELD_NODE_TYPE = 'Field';
+/** Always present, never removable — the safety net that makes "store first, deliver after" true. */
+const STORE_ACTION = Object.freeze({ type: 'store' });
+/**
+ * Turn a label into the key that arrives in the submitted data — `Full name` → `fullName`.
+ * Authors never have to invent keys (decision: auto-derive, with an editable override).
+ *
+ * Diacritics are stripped rather than dropped, so a Hebrew or accented label still yields a usable
+ * ASCII key instead of an empty one; a label with no usable characters falls back to `field`.
+ */
+function deriveFieldName(label) {
+    const words = (label ?? '')
+        .normalize('NFD').replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-zA-Z0-9]+/g, ' ')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean);
+    if (!words.length)
+        return 'field';
+    const [first, ...rest] = words;
+    const name = first.toLowerCase() + rest.map(w => w[0].toUpperCase() + w.slice(1).toLowerCase()).join('');
+    // A key must not start with a digit — it ends up as an object key and a form control id.
+    return /^\d/.test(name) ? `field${name}` : name;
+}
+/** Make `name` unique within `taken`, appending 2, 3, … — two "Email" fields must not collide. */
+function uniqueFieldName(name, taken) {
+    if (!taken.has(name))
+        return name;
+    let n = 2;
+    while (taken.has(`${name}${n}`))
+        n++;
+    return `${name}${n}`;
+}
+/**
+ * Walk a Form subtree and produce its spec.
+ *
+ * Nested forms are not collected: a Field belongs to its NEAREST ancestor Form (decision D1), so the
+ * walk stops at any inner Form node rather than stealing its fields.
+ */
+function collectFormSpec(node) {
+    if (!node || node.type !== FORM_NODE_TYPE)
+        return null;
+    const props = node.props ?? {};
+    const fields = [];
+    const taken = new Set();
+    for (const fieldNode of collectFieldNodes(node.children ?? [])) {
+        const spec = toFieldSpec(fieldNode, taken);
+        taken.add(spec.name);
+        fields.push(spec);
+    }
+    return {
+        formId: props['formId'] ?? '',
+        name: props['name'] ?? 'Form',
+        feedback: props['feedback'] ?? FeedbackTiming.Smart,
+        fields,
+        actions: normaliseActions(props['actions']),
+        antiSpam: {
+            honeypot: props['honeypot'] !== false,
+            minFillMs: Number(props['minFillMs'] ?? 1200),
+            ...(props['turnstile'] ? { turnstile: true } : {}),
+        },
+        ...(props['retentionDays'] ? { retention: { days: Number(props['retentionDays']) } } : {}),
+    };
+}
+/** Every Field in this subtree, in document order, not descending into a nested Form. */
+function collectFieldNodes(nodes) {
+    const out = [];
+    for (const node of nodes ?? []) {
+        if (!node?.type)
+            continue;
+        if (node.type === FORM_NODE_TYPE)
+            continue; // a nested form owns its own fields
+        if (node.type === FIELD_NODE_TYPE) {
+            out.push(node);
+            continue;
+        }
+        out.push(...collectFieldNodes(node.children ?? []));
+    }
+    return out;
+}
+function toFieldSpec(node, taken) {
+    const props = node.props ?? {};
+    const label = props['label'] ?? '';
+    // The author's explicit override wins; otherwise derive from the label.
+    const name = uniqueFieldName(props['name'] || deriveFieldName(label), taken);
+    const spec = {
+        name,
+        control: props['control'] ?? ControlType.Text,
+        label,
+    };
+    if (props['required'])
+        spec.required = true;
+    const rules = normaliseRules(props['rules']);
+    if (rules.length)
+        spec.rules = rules;
+    if (Array.isArray(props['options']) && props['options'].length)
+        spec.options = props['options'];
+    if (props['optionsSource'])
+        spec.optionsSource = props['optionsSource'];
+    if (props['defaultValue'] !== undefined && props['defaultValue'] !== '') {
+        spec.defaultValue = props['defaultValue'];
+    }
+    return spec;
+}
+/** Drop anything that isn't a rule we know — a hand-edited page must not break validation. */
+function normaliseRules(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    const known = new Set(Object.values(RuleName));
+    return raw
+        .filter(r => r && known.has(r.name))
+        .map(r => ({
+        name: r.name,
+        ...(r.params ? { params: r.params } : {}),
+        ...(r.message ? { message: r.message } : {}),
+    }));
+}
+/** `store` is always first and always present, however the page was edited. */
+function normaliseActions(raw) {
+    const declared = Array.isArray(raw)
+        ? raw.filter(a => a && typeof a.type === 'string')
+        : [];
+    return [STORE_ACTION, ...declared.filter(a => a.type !== STORE_ACTION.type)];
+}
+
+/*
+ * @vectoriox/iox-ui/forms-core — the shared, FRAMEWORK-FREE core of the forms feature.
+ *
+ * ⚠️ Nothing in this entry point may import Angular, RxJS, the DOM, or Node. It is consumed by
+ * THREE runtimes: the builder canvas (Angular), the SSR engine (Angular), and `iox-cms` (NestJS,
+ * plain Node). The main `@vectoriox/iox-ui` entry pulls in `@angular/core`, which Nest must never
+ * load — that is the entire reason this secondary entry point exists.
+ *
+ * Client-side validation is UX; server-side validation is truth. Both run THIS code, so they cannot
+ * disagree. See iox-ai-guidance `architecture/builder/forms-and-inputs-plan.md` §5.
+ */
+
+let fieldSeq = 0;
+/**
+ * The compound Field: label + control + help + error + required mark, as ONE node (decision D2).
+ *
+ * This is the biggest divergence from Webflow, and it is deliberate. There, a form field is four
+ * loose elements an author can delete — and they do delete the label, which breaks the
+ * `for`/`id` pairing and with it screen-reader support. Here the structure is fixed and
+ * accessibility is guaranteed by construction: the label can be visually hidden, never removed.
+ *
+ * The PARTS are styled through the virtual-trait mechanism (`__labelStyles`, `__errorStyles`, …)
+ * that already compiles `::marker` rules for List — so per-part styling invents no new concept in
+ * the style engine. Each part carries a stable class the compiler targets.
+ *
+ * ⚠️ Control type is a TRAIT, not a component per type (decision D4) — one component, one config,
+ * and choosing `email` also chooses email validation.
+ */
+class IoxFieldComponent {
+    constructor() {
+        this.nodeId = '';
+        this.name = '';
+        this.label = '';
+        this.control = ControlType.Text;
+        this.placeholder = '';
+        this.help = '';
+        this.required = false;
+        this.disabled = false;
+        this.labelHidden = false;
+        this.requiredMark = '*';
+        this.rows = 4;
+        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;
+        /** Only after a successful check — never on an untouched field. */
+        this.showValid = false;
+        this.valueChange = new EventEmitter();
+        this.touched = new EventEmitter();
+        /** Stable per instance so `for`/`id` and `aria-describedby` always pair up. */
+        this.controlId = `iox-field-${++fieldSeq}`;
+    }
+    /** `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'];
+        return passthrough.includes(String(this.control)) ? String(this.control) : 'text';
+    }
+    /** Help and error are BOTH announced, in that order, when both are present. */
+    get describedBy() {
+        const ids = [];
+        if (this.help)
+            ids.push(`${this.controlId}-help`);
+        if (this.invalid && this.errorText)
+            ids.push(`${this.controlId}-error`);
+        return ids.length ? ids.join(' ') : null;
+    }
+    emit(value) {
+        this.value = value;
+        this.valueChange.emit(value);
+    }
+    touch() {
+        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: `
+        <label class="iox-field__label"
+               [class.iox-field__label--hidden]="labelHidden"
+               [attr.for]="controlId">
+            {{ label }}
+            @if (required) {
+                <span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>
+            }
+        </label>
+
+        @switch (control) {
+            @case ('textarea') {
+                <textarea class="iox-field__control"
+                          [id]="controlId"
+                          [name]="name"
+                          [rows]="rows"
+                          [attr.placeholder]="placeholder || null"
+                          [attr.required]="required ? '' : null"
+                          [attr.aria-invalid]="invalid ? 'true' : null"
+                          [attr.aria-describedby]="describedBy"
+                          [attr.disabled]="disabled ? '' : null"
+                          [value]="value ?? ''"
+                          (input)="emit($any($event.target).value)"
+                          (blur)="touch()"></textarea>
+            }
+            @case ('select') {
+                <select class="iox-field__control"
+                        [id]="controlId"
+                        [name]="name"
+                        [attr.required]="required ? '' : null"
+                        [attr.aria-invalid]="invalid ? 'true' : null"
+                        [attr.aria-describedby]="describedBy"
+                        [attr.disabled]="disabled ? '' : null"
+                        (change)="emit($any($event.target).value)"
+                        (blur)="touch()">
+                    <option value="" [selected]="!value">{{ placeholder || '' }}</option>
+                    @for (option of options; track option.value) {
+                        <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
+                    }
+                </select>
+            }
+            @case ('checkbox') {
+                <input class="iox-field__control iox-field__control--checkbox"
+                       type="checkbox"
+                       [id]="controlId"
+                       [name]="name"
+                       [attr.required]="required ? '' : null"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [checked]="value === true"
+                       (change)="emit($any($event.target).checked)"
+                       (blur)="touch()">
+            }
+            @case ('radio') {
+                <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
+                    @for (option of options; track option.value) {
+                        <label class="iox-field__option">
+                            <input type="radio"
+                                   [name]="name"
+                                   [value]="option.value"
+                                   [checked]="option.value === value"
+                                   [attr.disabled]="disabled ? '' : null"
+                                   (change)="emit(option.value)"
+                                   (blur)="touch()">
+                            <span>{{ option.label }}</span>
+                        </label>
+                    }
+                </div>
+            }
+            @default {
+                <input class="iox-field__control"
+                       [id]="controlId"
+                       [name]="name"
+                       [type]="inputType"
+                       [attr.placeholder]="placeholder || null"
+                       [attr.required]="required ? '' : null"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [attr.accept]="control === 'file' ? (accept || null) : null"
+                       [value]="control === 'file' ? '' : (value ?? '')"
+                       (input)="emit($any($event.target).value)"
+                       (blur)="touch()">
+            }
+        }
+
+        @if (help) {
+            <p class="iox-field__help" [id]="controlId + '-help'">{{ help }}</p>
+        }
+        @if (invalid && errorText) {
+            <p class="iox-field__error" [id]="controlId + '-error'" role="alert">{{ errorText }}</p>
+        }
+    `, isInline: true, 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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[iox-field]', template: `
+        <label class="iox-field__label"
+               [class.iox-field__label--hidden]="labelHidden"
+               [attr.for]="controlId">
+            {{ label }}
+            @if (required) {
+                <span class="iox-field__required" aria-hidden="true">{{ requiredMark }}</span>
+            }
+        </label>
+
+        @switch (control) {
+            @case ('textarea') {
+                <textarea class="iox-field__control"
+                          [id]="controlId"
+                          [name]="name"
+                          [rows]="rows"
+                          [attr.placeholder]="placeholder || null"
+                          [attr.required]="required ? '' : null"
+                          [attr.aria-invalid]="invalid ? 'true' : null"
+                          [attr.aria-describedby]="describedBy"
+                          [attr.disabled]="disabled ? '' : null"
+                          [value]="value ?? ''"
+                          (input)="emit($any($event.target).value)"
+                          (blur)="touch()"></textarea>
+            }
+            @case ('select') {
+                <select class="iox-field__control"
+                        [id]="controlId"
+                        [name]="name"
+                        [attr.required]="required ? '' : null"
+                        [attr.aria-invalid]="invalid ? 'true' : null"
+                        [attr.aria-describedby]="describedBy"
+                        [attr.disabled]="disabled ? '' : null"
+                        (change)="emit($any($event.target).value)"
+                        (blur)="touch()">
+                    <option value="" [selected]="!value">{{ placeholder || '' }}</option>
+                    @for (option of options; track option.value) {
+                        <option [value]="option.value" [selected]="option.value === value">{{ option.label }}</option>
+                    }
+                </select>
+            }
+            @case ('checkbox') {
+                <input class="iox-field__control iox-field__control--checkbox"
+                       type="checkbox"
+                       [id]="controlId"
+                       [name]="name"
+                       [attr.required]="required ? '' : null"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [checked]="value === true"
+                       (change)="emit($any($event.target).checked)"
+                       (blur)="touch()">
+            }
+            @case ('radio') {
+                <div class="iox-field__group" role="radiogroup" [attr.aria-labelledby]="controlId + '-label'">
+                    @for (option of options; track option.value) {
+                        <label class="iox-field__option">
+                            <input type="radio"
+                                   [name]="name"
+                                   [value]="option.value"
+                                   [checked]="option.value === value"
+                                   [attr.disabled]="disabled ? '' : null"
+                                   (change)="emit(option.value)"
+                                   (blur)="touch()">
+                            <span>{{ option.label }}</span>
+                        </label>
+                    }
+                </div>
+            }
+            @default {
+                <input class="iox-field__control"
+                       [id]="controlId"
+                       [name]="name"
+                       [type]="inputType"
+                       [attr.placeholder]="placeholder || null"
+                       [attr.required]="required ? '' : null"
+                       [attr.aria-invalid]="invalid ? 'true' : null"
+                       [attr.aria-describedby]="describedBy"
+                       [attr.disabled]="disabled ? '' : null"
+                       [attr.accept]="control === 'file' ? (accept || null) : null"
+                       [value]="control === 'file' ? '' : (value ?? '')"
+                       (input)="emit($any($event.target).value)"
+                       (blur)="touch()">
+            }
+        }
+
+        @if (help) {
+            <p class="iox-field__help" [id]="controlId + '-help'">{{ help }}</p>
+        }
+        @if (invalid && errorText) {
+            <p class="iox-field__error" [id]="controlId + '-error'" role="alert">{{ errorText }}</p>
+        }
+    `, host: {
+                        '[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",
+                    }, 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: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], help: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], labelHidden: [{
+                type: Input
+            }], requiredMark: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], errorText: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], showValid: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], touched: [{
+                type: Output
+            }] } });
+
+/**
+ * Directive-host SubmitButton: the real `<button type="submit">` IS the host.
+ *
+ * It carries no destination configuration of its own — "what happens with the data" is an ordered
+ * action list on the FORM (decision D9), so there is nothing here to wire and nothing to get out of
+ * sync. The button owns only its own appearance and its busy state.
+ *
+ * While submitting it shows `loadingLabel` and is disabled, which is the whole double-submit
+ * defence on the client side (the server's rate limit is the real one).
+ */
+class IoxSubmitButtonComponent {
+    constructor() {
+        this.nodeId = '';
+        this.label = 'Submit';
+        this.loadingLabel = 'Sending…';
+        this.disableWhileSubmitting = true;
+        /** Driven by the form's lifecycle, not by the author. */
+        this.submitting = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxSubmitButtonComponent, isStandalone: false, selector: "button[iox-submit]", inputs: { nodeId: "nodeId", label: "label", loadingLabel: "loadingLabel", disableWhileSubmitting: "disableWhileSubmitting", submitting: "submitting" }, host: { properties: { "class": "'iox-submit iox-node-' + nodeId", "attr.type": "'submit'", "attr.disabled": "submitting && disableWhileSubmitting ? \"\" : null", "attr.aria-busy": "submitting ? \"true\" : null" } }, ngImport: i0, template: `{{ submitting && loadingLabel ? loadingLabel : label }}`, isInline: true, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxSubmitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[iox-submit]', template: `{{ submitting && loadingLabel ? loadingLabel : label }}`, host: {
+                        '[class]': "'iox-submit iox-node-' + nodeId",
+                        '[attr.type]': "'submit'",
+                        '[attr.disabled]': 'submitting && disableWhileSubmitting ? "" : null',
+                        '[attr.aria-busy]': 'submitting ? "true" : null',
+                    }, standalone: false, styles: [":host{box-sizing:border-box;cursor:pointer}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], loadingLabel: [{
+                type: Input
+            }], disableWhileSubmitting: [{
+                type: Input
+            }], submitting: [{
+                type: Input
+            }] } });
+
+/**
+ * The Success and Error blocks — real, fully styleable container nodes that the Form auto-creates
+ * and the author cannot delete (decision D7). Hiding one is allowed; removing it is not, because
+ * "the author deleted the success block and the form went quiet" is Webflow's commonest form
+ * failure and we designed it out.
+ *
+ * ⚠️ VISIBILITY IS NOT AN INPUT. Which block shows is decided by CSS keyed on the parent form's
+ * `data-iox-state` attribute (see `iox-form-states.css` / the engine's `styles.scss`):
+ *
+ *     .iox-form-success { display: none }
+ *     .iox-form[data-iox-state="success"] .iox-form-success { display: block }
+ *
+ * That is deliberate. It means the builder's state switcher and the runtime's submit lifecycle
+ * drive the SAME mechanism through one attribute, with no input plumbing down the tree and no
+ * chance of the canvas and the live site disagreeing about what a visitor sees. The selector
+ * out-specifies `.iox-node-{id}`, so the state machine owns visibility and the author owns
+ * everything else about the block.
+ */
+class IoxFormSuccessComponent {
+    constructor() {
+        this.nodeId = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: IoxFormSuccessComponent, isStandalone: false, selector: "div[iox-form-success]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-form-success iox-node-' + nodeId", "attr.role": "'status'", "attr.aria-live": "'polite'" } }, 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}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormSuccessComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[iox-form-success]', template: `<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-form-success iox-node-' + nodeId",
+                        '[attr.role]': "'status'",
+                        '[attr.aria-live]': "'polite'",
+                    }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+/**
+ * The Error block. One design, five reasons: the renderer writes the resolved reason text into
+ * `message`, so an author designs the block once and every failure mode (network, rejected, spam,
+ * rate-limited, server) renders through it.
+ *
+ * `role="alert"` rather than `status`: a failed submit must interrupt, because the visitor is
+ * about to walk away believing they sent it.
+ */
+class IoxFormErrorComponent {
+    constructor() {
+        this.nodeId = '';
+        /** Already-translated reason. Resolving the key is the host's job. */
+        this.message = '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxFormErrorComponent, isStandalone: false, selector: "div[iox-form-error]", inputs: { nodeId: "nodeId", message: "message" }, host: { properties: { "class": "'iox-form-error iox-node-' + nodeId", "attr.role": "'alert'", "attr.aria-live": "'assertive'" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `
+        @if (message) {
+            <p class="iox-form-error__message">{{ message }}</p>
+        }
+        <ng-container #childrenHost></ng-container>
+    `, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxFormErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[iox-form-error]', template: `
+        @if (message) {
+            <p class="iox-form-error__message">{{ message }}</p>
+        }
+        <ng-container #childrenHost></ng-container>
+    `, host: {
+                        '[class]': "'iox-form-error iox-node-' + nodeId",
+                        '[attr.role]': "'alert'",
+                        '[attr.aria-live]': "'assertive'",
+                    }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
 const COMPONENTS = [
     BuilderImageComponent,
     BuilderSpacerComponent,
@@ -3143,6 +4113,11 @@ const COMPONENTS = [
     ClientListComponent,
     ClientListItemComponent,
     ClientGalleryComponent,
+    IoxFormComponent,
+    IoxFieldComponent,
+    IoxSubmitButtonComponent,
+    IoxFormSuccessComponent,
+    IoxFormErrorComponent,
 ];
 class IoxBuilderComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -3164,7 +4139,12 @@ class IoxBuilderComponentsModule {
             ClientSliderSlideComponent,
             ClientListComponent,
             ClientListItemComponent,
-            ClientGalleryComponent], imports: [CommonModule], exports: [BuilderImageComponent,
+            ClientGalleryComponent,
+            IoxFormComponent,
+            IoxFieldComponent,
+            IoxSubmitButtonComponent,
+            IoxFormSuccessComponent,
+            IoxFormErrorComponent], imports: [CommonModule], exports: [BuilderImageComponent,
             BuilderSpacerComponent,
             CardComponent,
             BuilderDividerComponent,
@@ -3182,7 +4162,12 @@ class IoxBuilderComponentsModule {
             ClientSliderSlideComponent,
             ClientListComponent,
             ClientListItemComponent,
-            ClientGalleryComponent] }); }
+            ClientGalleryComponent,
+            IoxFormComponent,
+            IoxFieldComponent,
+            IoxSubmitButtonComponent,
+            IoxFormSuccessComponent,
+            IoxFormErrorComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
@@ -3230,6 +4215,13 @@ class IoxComponentRegistryService {
             ['List', ClientListComponent],
             ['ListItem', ClientListItemComponent],
             ['Gallery', ClientGalleryComponent],
+            // Forms. FieldGroup is config-only (it reuses ContainerComponent), like List/ListItem.
+            ['Form', IoxFormComponent],
+            ['Field', IoxFieldComponent],
+            ['FieldGroup', ContainerComponent],
+            ['SubmitButton', IoxSubmitButtonComponent],
+            ['FormSuccess', IoxFormSuccessComponent],
+            ['FormError', IoxFormErrorComponent],
         ]);
     }
     getComponent(type) {
@@ -4586,5 +5578,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, FormRenderState, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map