@formancy/angular 0.1.0

package/fesm2022/formancy-angular.mjs

@@ -0,0 +1,1047 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, signal, DestroyRef, computed, input, ChangeDetectionStrategy, Component, ViewContainerRef, Directive, Injector, runInInjectionContext, effect, output, viewChild, afterRenderEffect } from '@angular/core';
+import { parsePath } from '@formancy/core';
+
+/**
+ * The engine reaches components through DI, never through inputs drilling: a
+ * form is one engine instance, and every inject* helper resolves against it.
+ */
+const FORMANCY_ENGINE = new InjectionToken('formancy.engine');
+function provideFormancy(engine) {
+    return [{ provide: FORMANCY_ENGINE, useValue: engine }];
+}
+function injectEngine() {
+    const engine = inject(FORMANCY_ENGINE, { optional: true });
+    if (engine === null) {
+        throw new Error('formancy needs provideFormancy(engine) in the injector tree above this component');
+    }
+    return engine;
+}
+
+/**
+ * One field's live state as a signal — the Angular half of the same protocol
+ * React binds with useSyncExternalStore. The engine's snapshots are
+ * identity-stable, so `set` is a real change exactly when the field changed,
+ * which is what zoneless OnPush change detection needs: no zone, no
+ * ChangeDetectorRef, no whole-form re-render.
+ *
+ * Call from an injection context (field member initialiser or constructor).
+ */
+function injectField(path) {
+    const engine = injectEngine();
+    const parsed = typeof path === 'string' ? parsePath(path) : path;
+    const snapshot = signal(engine.getFieldSnapshot(parsed), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    const unsubscribe = engine.subscribeField(parsed, () => {
+        snapshot.set(engine.getFieldSnapshot(parsed));
+    });
+    inject(DestroyRef).onDestroy(unsubscribe);
+    return {
+        snapshot: snapshot.asReadonly(),
+        setValue: (value) => engine.setValue(parsed, value),
+        touch: () => engine.touch(parsed),
+    };
+}
+
+/**
+ * A repeater's live row count as a signal — the Angular half of React's
+ * useRepeater. Reading rowCount eagerly doubles as validation: the engine
+ * throws on a non-repeater path here, at wiring time, not at first render.
+ *
+ * Call from an injection context (field member initialiser or constructor).
+ */
+function injectRepeater(path) {
+    const engine = injectEngine();
+    const parsed = typeof path === 'string' ? parsePath(path) : path;
+    const rowCount = signal(engine.rowCount(parsed), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rowCount" }] : /* istanbul ignore next */ []));
+    const unsubscribe = engine.subscribeField(parsed, () => {
+        rowCount.set(engine.rowCount(parsed));
+    });
+    inject(DestroyRef).onDestroy(unsubscribe);
+    return {
+        rowCount: rowCount.asReadonly(),
+        // Computed from rowCount: the engine mints an id when a row is created, so
+        // the count changing is exactly when the ids change.
+        rowIds: computed(() => Array.from({ length: rowCount() }, (_, index) => engine.rowId(parsed, index))),
+        addRow: () => engine.addRow(parsed),
+        removeRow: (index) => engine.removeRow(parsed, index),
+    };
+}
+
+/**
+ * The wizard's live position as a signal. Throws on an unpaged form rather
+ * than degrading to a one-page pseudo-wizard: a stepper rendered over a flat
+ * form is a bug in the caller, and a loud error at wiring beats a mute
+ * component. Same words as React's useWizard, because it is the same policy.
+ *
+ * Call from an injection context (field member initialiser or constructor).
+ */
+function injectWizard() {
+    const engine = injectEngine();
+    const wizard = engine.wizard();
+    if (wizard === undefined) {
+        throw new Error('injectWizard needs a schema with pages; this form has none');
+    }
+    const page = signal(wizard.page(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    const unsubscribe = wizard.subscribe(() => page.set(wizard.page()));
+    inject(DestroyRef).onDestroy(unsubscribe);
+    return {
+        page: page.asReadonly(),
+        pageCount: wizard.pageCount,
+        next: () => wizard.next(),
+        back: () => wizard.back(),
+        goTo: (pageIndex) => wizard.goTo(pageIndex),
+    };
+}
+
+/**
+ * Submit the form: touch everything, validate everything, and on failure move
+ * focus to the first invalid control — the WCAG-required behaviour that every
+ * consumer would otherwise have to hand-roll, and most would forget.
+ *
+ * Focus lives in the binding, not the engine, because it needs the DOM after
+ * the commit; the engine only names the field (firstInvalid) and mints the id.
+ * Same policy, word for word, as React's useSubmit — the fixtures hold both
+ * renderers to it.
+ */
+function injectSubmit() {
+    const engine = injectEngine();
+    return () => {
+        const outcome = engine.submit();
+        if (!outcome.ok && typeof document !== 'undefined') {
+            // An ErrorSummary takes precedence: it lists every problem, and focusing
+            // it announces the situation once. It focuses ITSELF when errors appear,
+            // so nothing to do here. Without one, fall back to the first control.
+            const summary = document.querySelector('[data-formancy-part="error-summary"]');
+            if (summary === null) {
+                const firstInvalid = engine.firstInvalid();
+                if (firstInvalid !== null) {
+                    const ids = engine.getFieldSnapshot(parsePath(firstInvalid)).ids;
+                    document.getElementById(ids.control)?.focus();
+                }
+            }
+        }
+        return outcome;
+    };
+}
+
+const FORMANCY_FIELD_CONTEXT = new InjectionToken('formancy.field-context');
+function injectFieldContext() {
+    const context = inject(FORMANCY_FIELD_CONTEXT, { optional: true });
+    if (context === null) {
+        throw new Error('formancy field components render inside a formancy-field slot, which provides FORMANCY_FIELD_CONTEXT for the path and label');
+    }
+    return context;
+}
+const FORMANCY_REGISTRY = new InjectionToken('formancy.registry');
+function provideFormancyRegistry(registry) {
+    return [{ provide: FORMANCY_REGISTRY, useValue: registry }];
+}
+
+/**
+ * The built-in unstyled field components — the Angular rendering of the same
+ * decisions React's defaults made. Zero CSS; `data-formancy-part` is the
+ * styling hook; every id and ARIA attribute comes from the engine's prop
+ * getters so the wiring is byte-identical across renderers.
+ *
+ * The interpolations that become accessible text (labels, error codes) sit on
+ * one template line on purpose: element-internal whitespace would leak into
+ * textContent, and the conformance driver reads error codes verbatim.
+ */
+/** Shared unstyled shell: real label, projected control, error text as the
+ *  describedby target. */
+class FormancyFieldShell {
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    showError = computed(() => {
+        const snapshot = this.field().snapshot();
+        return snapshot.touched && snapshot.errors.length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.field().snapshot().errors.join(', '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFieldShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyFieldShell, isStandalone: true, selector: "formancy-field-shell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div data-formancy-part="field" [attr.data-state]="showError() ? 'invalid' : 'valid'">
+      <label data-formancy-part="label" [id]="field().snapshot().props.label.id" [attr.for]="field().snapshot().props.label.for">{{ label() }}</label>
+      <ng-content />
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field().snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFieldShell, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-field-shell',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div data-formancy-part="field" [attr.data-state]="showError() ? 'invalid' : 'valid'">
+      <label data-formancy-part="label" [id]="field().snapshot().props.label.id" [attr.for]="field().snapshot().props.label.for">{{ label() }}</label>
+      <ng-content />
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field().snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+/** The state every leaf control shares; components extend it so the templates
+ *  stay the only per-type code. Context comes through DI (see registry.ts). */
+class FieldComponentBase {
+    context = injectFieldContext();
+    field = injectField(this.context.path);
+    control = computed(() => this.field.snapshot().props.control, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+    engine = injectEngine();
+    /**
+     * Option labels resolved to strings, since a label may be a reference into
+     * the message catalogue. Falling back to the stored value keeps an
+     * untranslated option selectable rather than blank.
+     */
+    options = computed(() => (this.field.snapshot().def.options ?? []).map((option) => ({
+        value: option.value,
+        label: this.engine.text(option.label) ?? option.value,
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+}
+class FormancyTextField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        this.field.setValue(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyTextField, isStandalone: true, selector: "formancy-text-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="text"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-text-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="text"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancyTextareaField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        this.field.setValue(event.target.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextareaField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyTextareaField, isStandalone: true, selector: "formancy-textarea-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <textarea
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      ></textarea>
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyTextareaField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-textarea-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <textarea
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      ></textarea>
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancyNumberField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'number' ? String(value) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const raw = event.target.value;
+        this.field.setValue(raw === '' ? null : Number(raw));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyNumberField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyNumberField, isStandalone: true, selector: "formancy-number-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="number"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyNumberField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-number-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="number"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancyCheckboxField extends FieldComponentBase {
+    checked = computed(() => this.field.snapshot().value === true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.field.setValue(event.target.checked);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCheckboxField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyCheckboxField, isStandalone: true, selector: "formancy-checkbox-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="checkbox"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [checked]="checked()"
+        (change)="onChange($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyCheckboxField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-checkbox-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="checkbox"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [checked]="checked()"
+        (change)="onChange($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancyDateField extends FieldComponentBase {
+    text = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    onInput(event) {
+        const raw = event.target.value;
+        this.field.setValue(raw === '' ? null : raw);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: FormancyDateField, isStandalone: true, selector: "formancy-date-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="date"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyDateField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-date-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <input
+        type="date"
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        [value]="text()"
+        (input)="onInput($event)"
+        (blur)="field.touch()"
+      />
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancySelectField extends FieldComponentBase {
+    selected = computed(() => {
+        const value = this.field.snapshot().value;
+        return typeof value === 'string' ? value : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        const raw = event.target.value;
+        this.field.setValue(raw === '' ? null : raw);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancySelectField, isStandalone: true, selector: "formancy-select-field", usesInheritance: true, ngImport: i0, template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <select
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        (change)="onChange($event)"
+        (blur)="field.touch()"
+      >
+        <!-- The empty option is the unanswered state; without it the browser
+             silently pre-selects the first real option, which the engine never
+             heard about. Selectedness is bound per option because a select's
+             value property is only settable once its options exist. -->
+        <option value="" [selected]="selected() === ''"></option>
+        @for (option of options(); track option.value) {
+          <option [value]="option.value" [selected]="selected() === option.value">{{ option.label }}</option>
+        }
+      </select>
+    </formancy-field-shell>
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldShell, selector: "formancy-field-shell", inputs: ["field", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancySelectField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-select-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldShell],
+                    template: `
+    <formancy-field-shell [field]="field" [label]="context.label">
+      <select
+        [id]="control().id"
+        [attr.name]="control().name"
+        [attr.aria-invalid]="control()['aria-invalid']"
+        [attr.aria-required]="control()['aria-required']"
+        [attr.aria-describedby]="control()['aria-describedby']"
+        [disabled]="control().disabled === true"
+        (change)="onChange($event)"
+        (blur)="field.touch()"
+      >
+        <!-- The empty option is the unanswered state; without it the browser
+             silently pre-selects the first real option, which the engine never
+             heard about. Selectedness is bound per option because a select's
+             value property is only settable once its options exist. -->
+        <option value="" [selected]="selected() === ''"></option>
+        @for (option of options(); track option.value) {
+          <option [value]="option.value" [selected]="selected() === option.value">{{ option.label }}</option>
+        }
+      </select>
+    </formancy-field-shell>
+  `,
+                }]
+        }] });
+class FormancyRadioGroupField extends FieldComponentBase {
+    showError = computed(() => {
+        const snapshot = this.field.snapshot();
+        return snapshot.touched && snapshot.errors.length > 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    errorText = computed(() => this.field.snapshot().errors.join(', '), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []));
+    optionId(option) {
+        return `${this.field.snapshot().ids.control}:${option.value}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRadioGroupField, isStandalone: true, selector: "formancy-radio-group-field", usesInheritance: true, ngImport: i0, template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="radio-option">
+          <input
+            type="radio"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="field.snapshot().value === option.value"
+            (change)="field.setValue(option.value)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRadioGroupField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-radio-group-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <fieldset
+      data-formancy-part="field"
+      [attr.data-state]="showError() ? 'invalid' : 'valid'"
+      [attr.aria-describedby]="control()['aria-describedby']"
+    >
+      <legend data-formancy-part="label">{{ context.label }}</legend>
+      @for (option of options(); track option.value) {
+        <span data-formancy-part="radio-option">
+          <input
+            type="radio"
+            [id]="optionId(option)"
+            [attr.name]="control().name"
+            [value]="option.value"
+            [checked]="field.snapshot().value === option.value"
+            (change)="field.setValue(option.value)"
+            (blur)="field.touch()"
+          />
+          <label [attr.for]="optionId(option)">{{ option.label }}</label>
+        </span>
+      }
+      @if (showError()) {
+        <p data-formancy-part="error" [id]="field.snapshot().props.error.id">{{ errorText() }}</p>
+      }
+    </fieldset>
+  `,
+                }]
+        }] });
+/**
+ * The built-in unstyled components. `null` means the type renders nothing here:
+ * hidden and static are non-inputs, and the container types are laid out by
+ * their own machinery, not by a leaf slot.
+ */
+const DEFAULT_FIELD_COMPONENTS = {
+    text: FormancyTextField,
+    textarea: FormancyTextareaField,
+    number: FormancyNumberField,
+    checkbox: FormancyCheckboxField,
+    date: FormancyDateField,
+    select: FormancySelectField,
+    radio: FormancyRadioGroupField,
+    hidden: null,
+    static: null,
+    group: null,
+    page: null,
+    repeater: null,
+};
+
+/**
+ * A minimal dynamic-component outlet: NgComponentOutlet's job without pulling
+ * @angular/common into the library's runtime dependencies for one directive.
+ * Creation happens in ngOnChanges — the framework-blessed moment for view
+ * manipulation — and the injector input is how the slot hands each component
+ * its FORMANCY_FIELD_CONTEXT.
+ */
+class FormancyComponentOutlet {
+    container = inject(ViewContainerRef);
+    formancyOutlet = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formancyOutlet" }] : /* istanbul ignore next */ []));
+    formancyOutletInjector = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formancyOutletInjector" }] : /* istanbul ignore next */ []));
+    ref;
+    ngOnChanges() {
+        this.ref?.destroy();
+        this.ref = this.container.createComponent(this.formancyOutlet(), {
+            injector: this.formancyOutletInjector(),
+        });
+    }
+    ngOnDestroy() {
+        this.ref?.destroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyComponentOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: FormancyComponentOutlet, isStandalone: true, selector: "[formancyOutlet]", inputs: { formancyOutlet: { classPropertyName: "formancyOutlet", publicName: "formancyOutlet", isSignal: true, isRequired: true, transformFunction: null }, formancyOutletInjector: { classPropertyName: "formancyOutletInjector", publicName: "formancyOutletInjector", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyComponentOutlet, decorators: [{
+            type: Directive,
+            args: [{ selector: '[formancyOutlet]' }]
+        }], propDecorators: { formancyOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "formancyOutlet", required: true }] }], formancyOutletInjector: [{ type: i0.Input, args: [{ isSignal: true, alias: "formancyOutletInjector", required: true }] }] } });
+/**
+ * One field's slot: resolve the component through the registry (per-path beats
+ * per-type beats the defaults) and mount it while the field is visible.
+ *
+ * A hidden field leaves the DOM entirely: display:none would still ship the
+ * markup, keep it in the accessibility tree's shadow, and leak its labels to
+ * screen-reader "read all" passes.
+ *
+ * The binding is wired in ngOnInit rather than a field initialiser because the
+ * path arrives as an input, which does not exist yet at construction time.
+ */
+class FormancyFieldSlot {
+    registry = inject(FORMANCY_REGISTRY, { optional: true });
+    injector = inject(Injector);
+    path = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
+    fallbackLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fallbackLabel" }] : /* istanbul ignore next */ []));
+    state;
+    ngOnInit() {
+        const path = this.path();
+        const binding = runInInjectionContext(this.injector, () => injectField(path));
+        const snapshot = binding.snapshot;
+        const component = this.registry?.byPath?.[path] ??
+            this.registry?.byType?.[snapshot().type] ??
+            DEFAULT_FIELD_COMPONENTS[snapshot().type];
+        // Labels ride on the model definition (version-0 presentation-lite); the
+        // labels input is the fallback, and the wire path is at least honest.
+        const label = snapshot().label ?? this.fallbackLabel() ?? path;
+        this.state = {
+            snapshot,
+            component,
+            injector: Injector.create({
+                providers: [{ provide: FORMANCY_FIELD_CONTEXT, useValue: { path, label } }],
+                parent: this.injector,
+            }),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFieldSlot, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyFieldSlot, isStandalone: true, selector: "formancy-field", inputs: { path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: true, transformFunction: null }, fallbackLabel: { classPropertyName: "fallbackLabel", publicName: "fallbackLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (state; as s) {
+      @if (s.component !== null && s.snapshot().visible) {
+        <ng-container [formancyOutlet]="s.component" [formancyOutletInjector]="s.injector" />
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: FormancyComponentOutlet, selector: "[formancyOutlet]", inputs: ["formancyOutlet", "formancyOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyFieldSlot, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-field',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyComponentOutlet],
+                    template: `
+    @if (state; as s) {
+      @if (s.component !== null && s.snapshot().visible) {
+        <ng-container [formancyOutlet]="s.component" [formancyOutletInjector]="s.injector" />
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { path: [{ type: i0.Input, args: [{ isSignal: true, alias: "path", required: true }] }], fallbackLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fallbackLabel", required: false }] }] } });
+/**
+ * A repeater's own chrome: a named fieldset, one row div per item with the row
+ * fields and a remove control, and an add control. Row fields render here,
+ * never in the flat list — a row needs its remove button and its position
+ * context.
+ */
+class FormancyRepeaterSection {
+    engine = injectEngine();
+    injector = inject(Injector);
+    wire = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "wire" }] : /* istanbul ignore next */ []));
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    state;
+    ngOnInit() {
+        const wire = this.wire();
+        const def = this.engine.repeaters().find((candidate) => candidate.wire === wire)?.def;
+        const label = this.engine.text(def?.label) ?? this.labels()?.[wire] ?? wire;
+        const minItems = def?.minItems ?? 0;
+        const repeater = runInInjectionContext(this.injector, () => {
+            const binding = injectRepeater(wire);
+            // Seed to minItems: a repeater that promises one row must show one empty
+            // row, not an add button and a shrug. An effect rather than a one-shot,
+            // so dropping below the floor later re-seeds exactly as React's does.
+            effect(() => {
+                const shortfall = minItems - binding.rowCount();
+                for (let i = 0; i < shortfall; i++)
+                    binding.addRow();
+            });
+            return binding;
+        });
+        this.state = {
+            repeater,
+            label,
+            addLabel: def?.addLabel ?? `Add ${label}`,
+            removeLabel: def?.removeLabel ?? `Remove ${label}`,
+            rows: computed(() => Array.from({ length: repeater.rowCount() }, (_, index) => ({
+                index,
+                // Identity, not position: removing a row renumbers everything after
+                // it, and tracking by index would make Angular reuse the wrong DOM
+                // nodes — moving focus and animating the wrong element.
+                id: repeater.rowIds()[index] ?? String(index),
+                wires: this.engine.fieldPaths().filter((candidate) => candidate.startsWith(`${wire}[${index}]`)),
+            }))),
+        };
+    }
+    fallbackFor(instanceWire) {
+        const template = instanceWire.replace(/\[\d+\]/, '[]');
+        return this.labels()?.[template] ?? this.labels()?.[instanceWire];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRepeaterSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyRepeaterSection, isStandalone: true, selector: "formancy-repeater", inputs: { wire: { classPropertyName: "wire", publicName: "wire", isSignal: true, isRequired: true, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (state; as s) {
+      <fieldset data-formancy-part="repeater">
+        <legend data-formancy-part="repeater-legend">{{ s.label }}</legend>
+        @for (row of s.rows(); track row.id) {
+          <div data-formancy-part="row">
+            @for (instanceWire of row.wires; track instanceWire) {
+              <formancy-field [path]="instanceWire" [fallbackLabel]="fallbackFor(instanceWire)" />
+            }
+            <!-- Position context in the NAME, so a screen-reader user knows
+                 which row this button kills without walking the tree. -->
+            <button type="button" (click)="s.repeater.removeRow(row.index)">{{ s.removeLabel }} {{ row.index + 1 }} of {{ s.rows().length }}</button>
+          </div>
+        }
+        <button type="button" (click)="s.repeater.addRow()">{{ s.addLabel }}</button>
+      </fieldset>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyRepeaterSection, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-repeater',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldSlot],
+                    template: `
+    @if (state; as s) {
+      <fieldset data-formancy-part="repeater">
+        <legend data-formancy-part="repeater-legend">{{ s.label }}</legend>
+        @for (row of s.rows(); track row.id) {
+          <div data-formancy-part="row">
+            @for (instanceWire of row.wires; track instanceWire) {
+              <formancy-field [path]="instanceWire" [fallbackLabel]="fallbackFor(instanceWire)" />
+            }
+            <!-- Position context in the NAME, so a screen-reader user knows
+                 which row this button kills without walking the tree. -->
+            <button type="button" (click)="s.repeater.removeRow(row.index)">{{ s.removeLabel }} {{ row.index + 1 }} of {{ s.rows().length }}</button>
+          </div>
+        }
+        <button type="button" (click)="s.repeater.addRow()">{{ s.addLabel }}</button>
+      </fieldset>
+    }
+  `,
+                }]
+        }], propDecorators: { wire: [{ type: i0.Input, args: [{ isSignal: true, alias: "wire", required: true }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }] } });
+/**
+ * Renders the whole form from the engine: one slot per field, resolved through
+ * the registry. Slots subscribe individually, so a keystroke re-renders one
+ * field and a visibility flip mounts or unmounts exactly the fields it hit.
+ * A paged schema renders a stepper, one page at a time, navigation, and the
+ * submit control on the last page — a failed submit navigates to the first
+ * page with a problem instead of leaving the user on a clean review page
+ * staring at a rejection.
+ */
+class FormancyForm {
+    engine = injectEngine();
+    submit = injectSubmit();
+    wizard = this.engine.wizard() === undefined ? undefined : injectWizard();
+    /**
+     * Display text per wire path (row fields by their template wire,
+     * `items[].name`). A `label` on the model definition wins — that is how
+     * fixture schemas carry text until the spec's i18n section lands.
+     */
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    submitLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    submitted = output();
+    pages = this.engine.pages();
+    repeaterWires = this.engine.repeaterPaths();
+    // Row fields render inside their repeater's own section, never in the flat
+    // list — a row needs its remove button and its position context. The static
+    // wires never change: visibility is per-slot metadata, not list membership.
+    staticWires = this.engine
+        .fieldPaths()
+        .filter((wire) => !this.repeaterWires.some((repeater) => wire.startsWith(`${repeater}[`)));
+    staticOnPage = computed(() => {
+        const wizard = this.wizard;
+        if (wizard === undefined)
+            return this.staticWires;
+        return this.staticWires.filter((wire) => this.engine.pageOf(parsePath(wire)) === wizard.page());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "staticOnPage" }] : /* istanbul ignore next */ []));
+    repeatersOnPage = computed(() => {
+        const wizard = this.wizard;
+        if (wizard === undefined)
+            return this.repeaterWires;
+        return this.repeaterWires.filter((wire) => this.engine.pageOf(parsePath(wire)) === wizard.page());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "repeatersOnPage" }] : /* istanbul ignore next */ []));
+    fallbackFor(wire) {
+        return this.labels()?.[wire];
+    }
+    pageLabel(page) {
+        return this.engine.text(page.def.label) ?? page.key;
+    }
+    onNext() {
+        void this.wizard?.next();
+    }
+    onSubmit() {
+        const outcome = this.submit();
+        if (!outcome.ok && this.wizard !== undefined) {
+            // Take the user TO the problem: a rejection on a clean review page
+            // explains nothing.
+            const firstInvalid = this.engine.firstInvalid();
+            if (firstInvalid !== null)
+                this.wizard.goTo(this.engine.pageOf(parsePath(firstInvalid)));
+        }
+        this.submitted.emit(outcome.ok
+            ? { ok: true, errors: outcome.errors, data: this.engine.value() }
+            : { ok: false, errors: outcome.errors });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyForm, isStandalone: true, selector: "formancy-form", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: `
+    @if (wizard; as w) {
+      <nav data-formancy-part="stepper" aria-label="Progress">
+        <ol>
+          @for (page of pages; track page.key; let i = $index) {
+            <li [attr.aria-current]="i === w.page() ? 'step' : null">{{ pageLabel(page) }}</li>
+          }
+        </ol>
+      </nav>
+      @for (wire of staticOnPage(); track wire) {
+        <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
+      }
+      @for (wire of repeatersOnPage(); track wire) {
+        <formancy-repeater [wire]="wire" [labels]="labels()" />
+      }
+      <div data-formancy-part="wizard-nav">
+        @if (w.page() > 0) {
+          <button type="button" (click)="w.back()">Back</button>
+        }
+        @if (w.page() < w.pageCount - 1) {
+          <button type="button" (click)="onNext()">Next</button>
+        } @else {
+          <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
+        }
+      </div>
+    } @else {
+      @for (wire of staticWires; track wire) {
+        <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
+      }
+      @for (wire of repeaterWires; track wire) {
+        <formancy-repeater [wire]="wire" [labels]="labels()" />
+      }
+      <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: FormancyFieldSlot, selector: "formancy-field", inputs: ["path", "fallbackLabel"] }, { kind: "component", type: FormancyRepeaterSection, selector: "formancy-repeater", inputs: ["wire", "labels"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyForm, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-form',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormancyFieldSlot, FormancyRepeaterSection],
+                    template: `
+    @if (wizard; as w) {
+      <nav data-formancy-part="stepper" aria-label="Progress">
+        <ol>
+          @for (page of pages; track page.key; let i = $index) {
+            <li [attr.aria-current]="i === w.page() ? 'step' : null">{{ pageLabel(page) }}</li>
+          }
+        </ol>
+      </nav>
+      @for (wire of staticOnPage(); track wire) {
+        <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
+      }
+      @for (wire of repeatersOnPage(); track wire) {
+        <formancy-repeater [wire]="wire" [labels]="labels()" />
+      }
+      <div data-formancy-part="wizard-nav">
+        @if (w.page() > 0) {
+          <button type="button" (click)="w.back()">Back</button>
+        }
+        @if (w.page() < w.pageCount - 1) {
+          <button type="button" (click)="onNext()">Next</button>
+        } @else {
+          <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
+        }
+      </div>
+    } @else {
+      @for (wire of staticWires; track wire) {
+        <formancy-field [path]="wire" [fallbackLabel]="fallbackFor(wire)" />
+      }
+      @for (wire of repeaterWires; track wire) {
+        <formancy-repeater [wire]="wire" [labels]="labels()" />
+      }
+      <button type="button" data-formancy-part="submit" (click)="onSubmit()">{{ submitLabel() ?? 'Submit' }}</button>
+    }
+  `,
+                }]
+        }], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+
+/**
+ * The error summary a failed submit focuses.
+ *
+ * The semantics are deliberate and easy to get wrong: the container takes
+ * focus via tabindex="-1" — focusing it already makes screen readers announce
+ * it, so role="alert" would announce it TWICE. Each entry is a real in-page
+ * link to the offending control, because links are what "take me to the
+ * problem" already means to assistive tech.
+ */
+class FormancyErrorSummary {
+    labels = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "labels" }] : /* istanbul ignore next */ []));
+    engine = injectEngine();
+    region = viewChild('region', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "region" }] : /* istanbul ignore next */ []));
+    errors;
+    constructor() {
+        const errors = signal(this.engine.visibleErrors(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        const unsubscribe = this.engine.subscribe(() => errors.set(this.engine.visibleErrors()));
+        inject(DestroyRef).onDestroy(unsubscribe);
+        this.errors = errors.asReadonly();
+        // Focus when errors APPEAR (a submit surfaced them), not on every
+        // keystroke that edits an already-broken field. afterRenderEffect, because
+        // the container only exists in the DOM once the render that shows it ran.
+        let previousCount = 0;
+        afterRenderEffect(() => {
+            const count = this.errors().length;
+            if (count > 0 && previousCount === 0)
+                this.region()?.nativeElement.focus();
+            previousCount = count;
+        });
+    }
+    heading = computed(() => {
+        const count = this.errors().length;
+        return count === 1 ? 'There is 1 problem to fix' : `There are ${count} problems to fix`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    labelFor(path) {
+        return this.labels()?.[path] ?? this.labels()?.[path.replace(/\[\d+\]/, '[]')] ?? path;
+    }
+    controlIdOf(path) {
+        return this.engine.getFieldSnapshot(parsePath(path)).ids.control;
+    }
+    focusControl(event, path) {
+        // The hash alone scrolls but does not focus; do both.
+        event.preventDefault();
+        document.getElementById(this.controlIdOf(path))?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyErrorSummary, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: FormancyErrorSummary, isStandalone: true, selector: "formancy-error-summary", inputs: { labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "region", first: true, predicate: ["region"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (errors().length > 0) {
+      <div data-formancy-part="error-summary" tabindex="-1" #region>
+        <h2 data-formancy-part="error-summary-heading">{{ heading() }}</h2>
+        <ul>
+          @for (entry of errors(); track entry.path) {
+            <li><a [attr.href]="'#' + controlIdOf(entry.path)" (click)="focusControl($event, entry.path)">{{ labelFor(entry.path) }}: {{ entry.codes.join(', ') }}</a></li>
+          }
+        </ul>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: FormancyErrorSummary, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'formancy-error-summary',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (errors().length > 0) {
+      <div data-formancy-part="error-summary" tabindex="-1" #region>
+        <h2 data-formancy-part="error-summary-heading">{{ heading() }}</h2>
+        <ul>
+          @for (entry of errors(); track entry.path) {
+            <li><a [attr.href]="'#' + controlIdOf(entry.path)" (click)="focusControl($event, entry.path)">{{ labelFor(entry.path) }}: {{ entry.codes.join(', ') }}</a></li>
+          }
+        </ul>
+      </div>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], region: [{ type: i0.ViewChild, args: ['region', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_FIELD_COMPONENTS, FORMANCY_ENGINE, FORMANCY_FIELD_CONTEXT, FORMANCY_REGISTRY, FormancyCheckboxField, FormancyComponentOutlet, FormancyDateField, FormancyErrorSummary, FormancyFieldShell, FormancyFieldSlot, FormancyForm, FormancyNumberField, FormancyRadioGroupField, FormancyRepeaterSection, FormancySelectField, FormancyTextField, FormancyTextareaField, injectEngine, injectField, injectFieldContext, injectRepeater, injectSubmit, injectWizard, provideFormancy, provideFormancyRegistry };
+//# sourceMappingURL=formancy-angular.mjs.map