@dynamic-field-kit/angular 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,171 @@
 # @dynamic-field-kit/angular
 
+## 1.5.0
+
+### Minor Changes
+
+- Form state hooks, schema adapters, wizard engine, DevTools and extended renderers across all four packages, with type declarations that now resolve correctly under node16 and nodenext.
+- d91c737: Add form state hooks, schema adapters, wizard engine, DevTools and extended renderers.
+
+  **Core**
+
+  - `zodValidator`, `yupValidator`, `valibotValidator` / `standardSchemaValidator`. Adapters parse **synchronously** so their result is usable by the synchronous `validateFields`; schemas with async refinements or async `.test()` rules return a Promise and must be validated through `validateFieldsAsync`.
+  - Adapters take an explicit `{ target: 'form' | 'field' }` option. `'form'` (the default) parses the form data object; `'field'` parses a single scalar value. The field-name shorthand — `zodValidator(schema, 'email')` — is unchanged.
+  - Wizard engine: `createWizardState`, `validateStep`, `canGoNext`, `canGoPrev`, plus the navigation the engine needs to be usable - `goNext`, `goPrev`, `goToStep`, `markStepCompleted`, `isStepCompleted`. `goNext` records the step it leaves, so `completedSteps` is actually maintained.
+  - Group array helpers: `moveGroupItem`, `swapGroupItems`, `insertGroupItem`, `focusFirstInvalidField`.
+  - `switch` is a first-class field type: it had a shipped renderer in react and vue but no `FieldTypeMap` entry, so `type: 'switch'` did not typecheck.
+
+  **React / Vue / Angular**
+
+  - `useDynamicForm` (React, Vue) and `createDynamicFormStore` (Angular Signals) now expose the same surface, including `isSubmitting` and `isSubmitted`.
+  - `handleSubmit(onValid, onInvalid)` returns a submit handler in every framework and calls `preventDefault` on the event it receives.
+  - Default HTML5 renderers for `radio`, `range`, `file`, `date`, `time`, `datetime-local` and `switch`.
+  - `DynamicFormDevTools` overlay for inspecting form data, errors, metadata and field descriptions, with an error-count badge in all three frameworks.
+  - `MultiFieldInput` reports blur through `onBlurField` (an `@Output` in Angular), so a form store's `handleBlur` / `touched` / `validateOnBlur` can be wired to it. Vue and Angular previously had no blur plumbing at all.
+
+### Patch Changes
+
+- c3faa51: Document the v1.5 APIs in each package README: form state, schema adapters, the wizard engine, default renderers, DevTools and blur wiring. README ships in the npm tarball, so this reaches package pages only through a release.
+- 75447a6: Close the remaining documentation gaps in each package README, so every public
+  export is described somewhere. README ships in the npm tarball, so this reaches
+  the package pages only through a release.
+
+  - **Sync vs async validation** is now spelled out in core, with the consequence
+    that was previously implicit: `validateField` / `validateFields` cannot await,
+    so a `validate` hook returning a Promise is treated as valid on the sync path.
+    `useDynamicForm` and `createDynamicFormStore` validate synchronously
+    (including on submit), so async rules have to run through
+    `validateFieldsAsync` explicitly. Each adapter README repeats the caveat and
+    links to the core section.
+  - Document `validateFieldAsync`, `validateFieldsAsync`, `resolveOptions` and
+    `validators` in the react, vue and angular export lists, separated from each
+    adapter's own exports so it is clear they are core re-exports.
+  - Document the core types that appear in every signature but had no definition
+    in the README: `Properties`, `ValidatorFn`, `FieldValidatorResult`,
+    `FieldValidatorFunction`, and `FormStep` alongside `WizardState`.
+  - Angular: document `layoutRegistry` / `LayoutRegistry`, the `ColumnLayout` /
+    `RowLayout` / `GridLayout` components and `BaseInputComponent`, with a custom
+    layout example. Its layout registry holds standalone components rather than
+    render functions, which is the one place the three adapters genuinely differ,
+    and it was the only adapter not documenting its registry at all.
+  - Rename angular's `## What it exports` to `## Exports` to match react and vue.
+  - Link the demo sub-routes: react's enterprise-features and wizard pages, and
+    from core the per-framework demos plus the wizard it documents.
+
+- e4f8dbd: Stop publishing the fesm2022 sourcemap, which is 70.7 KB of a 165.9 KB install.
+
+  When core, react and vue dropped their sourcemaps, angular was recorded as
+  unaffected on the grounds that "ng-packagr's published output does not carry
+  them". That was wrong. ng-packagr emits
+  `fesm2022/dynamic-field-kit-angular.mjs.map` with `sourcesContent` — 12 embedded
+  TypeScript files — and `files: ["dist"]` has been publishing it ever since.
+
+  |          | Before   | After          |
+  | -------- | -------- | -------------- |
+  | Unpacked | 165.9 KB | 97.1 KB (−41%) |
+  | Tarball  | 33.7 KB  | 18.2 KB (−46%) |
+  | Files    | 19       | 18             |
+
+  This is the same deliberate trade the other three packages made, not a free win:
+  the map worked, and dropping it costs the ability to step into this library's
+  TypeScript source while debugging a consuming app.
+
+  ng-packagr has no switch for it, so a `postbuild` step
+  (`scripts/strip-sourcemaps.js`) deletes the map and the
+  `//# sourceMappingURL=` comment that pointed at it. The comment has to go too —
+  excluding the map at publish time alone would leave every consumer's devtools
+  fetching a URL that 404s.
+
+  Nothing that reaches an application bundle changes: the fesm2022 bundle is
+  identical bar that one trailing comment line.
+
+- e4f8dbd: Correct the Angular peer range's lower bound from `>=13` to `>=14`.
+
+  The published `fesm2022` bundle is Angular partial-compilation output, and each
+  declaration in it carries the minimum Angular version able to link it. The
+  highest across this package is `minVersion: "14.0.0"`, so an Angular 13
+  application could never have consumed it — npm would install cleanly and the
+  linker would then fail. The upper bound `<22` is unchanged.
+
+  No runtime change: the bundle is byte-identical, and only the range in
+  `package.json` moves.
+
+- e10044b: Fix the type declarations consumers get under `moduleResolution: node16` /
+  `nodenext`, and fill in the npm metadata the package pages never had.
+
+  Every package declared a single `types` target for both module formats while
+  shipping two sets of declarations. `arethetypeswrong` on the built tarballs
+  reported core and react "masquerading as CJS" and vue "masquerading as ESM":
+  an ESM import resolved to the CommonJS declaration file, and vice versa. The
+  `exports` maps now declare `types` per condition, so each format resolves to
+  the declarations that describe it.
+
+  Angular was worse than a mismatch - it did not resolve at all. Its entry is an
+  `.mjs` bundle, so TypeScript reads its declarations in ESM mode, where the
+  extensionless `export * from './public-api'` that ng-packagr generates is error
+  TS2834. The failure is in `dist/index.d.ts`, the first file a consumer reaches,
+  so the package was unusable on node16 resolution. A `postbuild` step now adds
+  the explicit `.js` extension to relative specifiers in the emitted `.d.ts`
+  files, resolving each against the build output so a directory import becomes
+  `./layout/index.js` rather than a broken `./layout.js`. Angular also gains an
+  `exports` map and `"type": "module"`, which it needs to describe itself
+  honestly. All four packages are clean on all four resolution modes now, except
+  angular's `require()`, which is ESM-only by nature - as `@angular/core` is.
+
+  Also in the tarballs: `CHANGELOG.md` now ships, so the npm page has release
+  history, and angular no longer ships a second copy of its README and LICENSE
+  that ng-packagr had copied into `dist`. Every package gains `homepage`, `bugs`
+  and `repository.directory`, so npm links to the right README and issue tracker
+  instead of nothing, and `publishConfig.provenance`, so each published tarball
+  is signed and linked back to the workflow run that built it.
+
+- 244c3d4: Ship the MIT license text, and fix what the angular package tells npm.
+
+  Every package declared `"license": "MIT"` with no LICENSE file anywhere in the
+  repo, so the tarballs carried the claim and not the terms. npm includes a
+  LICENSE at the package root regardless of `files`, so all four now ship one.
+
+  The angular package's README was wrong in three places, all of them visible on
+  its npm page: the "pin versions explicitly" example named `core@^1.0.12` and
+  `angular@^1.2.3`, nine public exports (`FieldInputProps`, `DynamicFormOptions`,
+  `FieldTypeKey`, `LayoutConfig`, `ColumnLayoutConfig`, `RowLayoutConfig`,
+  `GridLayoutConfig`, `BaseLayoutConfig`, `ResponsiveLayoutConfig`) appeared
+  nowhere in it, and a section titled "Angular 14 and earlier" named versions the
+  package cannot run on — its peer floor is `>=14`.
+
+  Its `sideEffects: false` was also untrue: `defaultLayouts.ts` registers the
+  three layout components with a module-scope call, which is exactly the side
+  effect react and vue list their own layout modules for. The flag is now
+  `["**/fesm2022/*.mjs"]` — a glob because ng-packagr copies the field into
+  `dist/package.json`, where paths resolve one directory lower, and a bundler
+  reads whichever manifest is nearest the module. Nothing observable changes
+  today: bundling the published 1.4.0 with esbuild while importing only
+  `DynamicInput` already kept all three `register()` calls, because the fesm2022
+  bundle is a single module the app is using. The flag was a claim waiting to
+  break.
+
+- 5577177: Build with ng-packagr 19 instead of 17, which is what the package's Angular
+  version has needed all along — ng-packagr 17 declared peers of
+  `@angular/compiler-cli ^17` and `typescript >=5.2 <5.5` against an installed
+  19.2.25 and 5.6.3, so installing needed `--legacy-peer-deps`.
+
+  The bundle consumers actually load is unchanged: `fesm2022` is byte-identical,
+  as are `index.d.ts` and `public-api.d.ts`. What changes is the rest of the
+  tarball. ng-packagr stopped emitting the per-file `esm2022/` output in 18,
+  because the fesm2022 bundle is what the Angular linker consumes, and its
+  `esm2022` and `esm` export conditions go with it. The `.` export keeps `types`
+  and `default`, matching what every Angular 19+ library ships.
+
+  |          | Before   | After           |
+  | -------- | -------- | --------------- |
+  | Unpacked | 317.1 KB | 165.9 KB (−48%) |
+  | Tarball  | 75.8 KB  | 33.7 KB (−56%)  |
+  | Files    | 33       | 19              |
+
+  If you were resolving this package through the `esm` or `esm2022` condition
+  explicitly, resolution now falls through to `default`, which points at the same
+  fesm2022 file those conditions already resolved to.
+
 ## 1.4.0
 
 ### Minor Changes

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vannt-dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -4,7 +4,9 @@ Angular adapter for `@dynamic-field-kit/core`.
 
 This package provides Angular components and a convenience module that render field schemas defined with `@dynamic-field-kit/core`.
 
-Demo app: https://github.com/vannt-dev/dynamic-field-kit-demo
+Live demo: https://vannt-dev.github.io/dynamic-field-kit/angular/ — tabs for the
+basic schema, the enterprise features (`createDynamicFormStore`, HTML5 renderers,
+blur wiring, DevTools) and the multi-step wizard.
 
 ## Install
 
@@ -17,10 +19,10 @@ Note: `@dynamic-field-kit/core`, `@angular/core`, and `@angular/common` are **pe
 If you need to pin versions explicitly:
 
 ```bash
-npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
+npm install @dynamic-field-kit/core@^1.5.0 @dynamic-field-kit/angular@^1.5.0
 ```
 
-## What it exports
+## Exports
 
 - `DynamicInput`
 - `FieldInput`
@@ -29,7 +31,38 @@ npm install @dynamic-field-kit/core@^1.0.12 @dynamic-field-kit/angular@^1.2.3
 - `fieldRegistry`
 - `FieldRegistry` (class, for scoped registries)
 - `FIELD_REGISTRY` (injection token)
-- `validateField` / `validateFields` / `resolveDisabled` / `resolveReadOnly` / `ValidationResult`
+- `createDynamicFormStore` (signal-based form state)
+- `DynamicFormDevToolsComponent`
+- `layoutRegistry` / `LayoutRegistry` (class, for a scoped layout registry)
+- `ColumnLayout` / `RowLayout` / `GridLayout` (the standalone layout components, registered for you)
+- `BaseInputComponent` — the abstract base your custom renderers extend
+- `FieldInputProps` — the inputs `BaseInputComponent` declares; the Angular
+  mirror of core's `FieldRendererProps`
+- `DynamicFormOptions` — what `createDynamicFormStore` takes: `fields`,
+  `initialValues`, `validateOnBlur`, `validateOnChange`
+- `LayoutConfig` / `ColumnLayoutConfig` / `RowLayoutConfig` /
+  `GridLayoutConfig` — the layout config types, re-exported from core
+- `BaseLayoutConfig` / `ResponsiveLayoutConfig` — this adapter's historical
+  aliases for core's `BaseLayout` / `ResponsiveLayout`, kept so existing
+  imports keep resolving
+
+Re-exported from `@dynamic-field-kit/core` so a consumer app rarely has to import
+both packages:
+
+- `validateField` / `validateFieldAsync` — one field, returns `string[]`
+- `validateFields` / `validateFieldsAsync` — a whole schema, returns `ValidationResult`
+- `resolveDisabled` / `resolveReadOnly` / `resolveOptions` — resolve a field's dynamic conditions and options
+- `validators` — the built-in validator helpers (`required`, `email`, `minLength`, `compose`, …)
+- `FieldDescription` / `FieldTypeKey` / `FieldRendererProps` — the schema and
+  renderer contracts every adapter shares
+- `ValidationResult`
+
+`createDynamicFormStore` validates **synchronously** via `validateFields`,
+including on submit. Fields whose `validate` hook returns a Promise are treated
+as valid on that path, so run async rules through `validateFieldsAsync`
+yourself. See the
+[core README](https://github.com/vannt-dev/dynamic-field-kit/tree/develop/packages/core#sync-vs-async-validation)
+for the full rules.
 
 ## Basic setup (Angular 19+)
 
@@ -89,6 +122,89 @@ export class AppComponent {
 ></dfk-multi-field-input>
 ```
 
+## Form state (`createDynamicFormStore`)
+
+A signal-based store — the Angular counterpart of React and Vue's
+`useDynamicForm`, with the same members. Read them as signals.
+
+```ts
+import {
+  createDynamicFormStore,
+  MultiFieldInput,
+} from '@dynamic-field-kit/angular';
+
+@Component({
+  standalone: true,
+  imports: [MultiFieldInput],
+  template: `
+    <form (ngSubmit)="onSubmit($event)">
+      <dfk-multi-field-input
+        [fieldDescriptions]="fields"
+        [properties]="store.data()"
+        (onChange)="store.handleChange($event)"
+        (onBlurField)="store.handleBlur($event)"
+      ></dfk-multi-field-input>
+      <button [disabled]="store.isSubmitting()">Save</button>
+    </form>
+  `,
+})
+export class MyForm {
+  fields = fields;
+  store = createDynamicFormStore({
+    fields,
+    initialValues: { country: 'VN' },
+    validateOnBlur: true, // default
+  });
+
+  // handleSubmit returns a handler, exactly like React and Vue.
+  onSubmit = this.store.handleSubmit((data) => this.save(data));
+}
+```
+
+| Member                              | Description                                                                       |
+| ----------------------------------- | --------------------------------------------------------------------------------- |
+| `data()`                            | Current form data, with `computeValue` fields applied                             |
+| `errors()`                          | `Record<string, string[]>`, keyed like `validateFields`                           |
+| `isValid()` / `isDirty()`           | No errors recorded / any value has changed                                        |
+| `isSubmitting()` / `isSubmitted()`  | In-flight submit / at least one submit attempted                                  |
+| `touched()`                         | Fields that have been blurred                                                     |
+| `handleChange(data)`                | Replace the whole form data — bind to `(onChange)`                                |
+| `setFieldValue(name, value)`        | Change one field                                                                  |
+| `handleBlur(name)`                  | Mark touched, and validate when `validateOnBlur`                                  |
+| `setFieldTouched(name, value?)`     | Set touched explicitly                                                            |
+| `validate()`                        | Validate now, returns a boolean                                                   |
+| `reset(values?)`                    | Back to `initialValues` (or the values given), clearing errors/touched/submission |
+| `handleSubmit(onValid, onInvalid?)` | Returns an async handler; calls `preventDefault`, validates, then dispatches      |
+
+`MultiFieldInput` emits `(onBlurField)` with the field's name, driven by a
+`focusout` listener — so it works with any renderer, without the renderer
+needing a blur output of its own.
+
+## Default renderers
+
+`text` · `number` · `password` · `email` · `textarea` · `checkbox` · `select` ·
+`radio` · `range` · `file` · `date` · `time` · `datetime-local` · `switch`
+
+Any type you have not registered falls back to one of these. `file` emits a
+`File` (or `File[]` when `multiple` is set), `range` and `number` emit numbers,
+`checkbox` / `switch` emit booleans; everything else emits strings.
+
+## DevTools
+
+```html
+<dfk-dev-tools
+  [data]="store.data()"
+  [errors]="store.errors()"
+  [touched]="store.touched()"
+  [isDirty]="store.isDirty()"
+  [fields]="fields"
+></dfk-dev-tools>
+```
+
+Import `DynamicFormDevToolsComponent`. A floating overlay with data / errors /
+meta / fields tabs; the collapsed button carries a red badge with the number of
+fields in error.
+
 ## Layouts
 
 `MultiFieldInput` supports `column`, `row`, `grid`, and `responsive` (mobile/desktop with a custom breakpoint), matching the React and Vue adapters:
@@ -109,6 +225,29 @@ export class AppComponent {
 ></dfk-multi-field-input>
 ```
 
+Those four names resolve through `layoutRegistry`, which holds standalone
+components rather than render functions — the Angular equivalent of the React
+and Vue layout registries. `ColumnLayout`, `RowLayout` and `GridLayout` are
+registered for you when you import the package root; register your own the same
+way:
+
+```ts
+import { Component } from '@angular/core';
+import { layoutRegistry } from '@dynamic-field-kit/angular';
+
+@Component({
+  standalone: true,
+  selector: 'app-stack-tight',
+  template: `<div style="display: grid; gap: 8px"><ng-content /></div>`,
+})
+export class StackTightLayout {}
+
+layoutRegistry.register('stack-tight', StackTightLayout);
+```
+
+`LayoutRegistry` is the class behind that singleton, for when you want an
+isolated set of layouts instead of the shared one.
+
 ## Derived fields with `computeValue`
 
 Give a field a `computeValue` to derive its value from the rest of the form data whenever any field changes:
@@ -196,7 +335,7 @@ The generic adapter forwards only the shared `FieldRendererProps`. For inputs sp
 { name: 'avatar', type: 'file', props: { acceptFile: 'image/*' } }
 ```
 
-## Legacy setup (Angular 14 and earlier with NgModule)
+## Legacy setup (NgModule apps)
 
 ```ts
 import { BrowserModule } from '@angular/platform-browser';

package/dist/components/DynamicFormDevTools.d.ts

@@ -0,0 +1,16 @@
+import { FieldDescription, Properties } from '@dynamic-field-kit/core';
+import * as i0 from "@angular/core";
+export declare class DynamicFormDevToolsComponent {
+    data: Properties;
+    errors: Record<string, string[]>;
+    touched: Record<string, boolean>;
+    isDirty: boolean;
+    fields: FieldDescription[];
+    /** Number of fields carrying errors, mirroring the react and vue overlays. */
+    errorCount(): number;
+    isOpen: import("@angular/core").WritableSignal<boolean>;
+    activeTab: import("@angular/core").WritableSignal<"data" | "meta" | "errors" | "fields">;
+    tabs: Array<'data' | 'errors' | 'meta' | 'fields'>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicFormDevToolsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicFormDevToolsComponent, "dfk-dev-tools", never, { "data": { "alias": "data"; "required": false; }; "errors": { "alias": "errors"; "required": false; }; "touched": { "alias": "touched"; "required": false; }; "isDirty": { "alias": "isDirty"; "required": false; }; "fields": { "alias": "fields"; "required": false; }; }, {}, never, never, true, never>;
+}

package/dist/components/DynamicInput.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';
-import { BaseInputComponent } from './BaseInput';
+import { BaseInputComponent } from './BaseInput.js';
 import * as i0 from "@angular/core";
 export declare class DynamicInput extends BaseInputComponent implements OnChanges, AfterViewInit, OnDestroy {
     type: FieldTypeKey;
@@ -29,6 +29,7 @@ export declare class DynamicInput extends BaseInputComponent implements OnChange
     private applyExtraProps;
     private bindOutputs;
     private emitValue;
+    private renderDefaultFallbackHTML5;
     private renderError;
     static ɵfac: i0.ɵɵFactoryDeclaration<DynamicInput, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DynamicInput, "dfk-dynamic-input", never, { "type": { "alias": "type"; "required": false; }; "extraProps": { "alias": "extraProps"; "required": false; }; }, { "valueChange": "valueChange"; "onChange": "onChange"; }, never, never, true, never>;

package/dist/components/FieldInput.d.ts

@@ -13,10 +13,16 @@ export declare class FieldInput implements OnChanges {
         value: unknown;
         key: string;
     }>;
+    /**
+     * Emits this field's name when focus leaves it. Driven by `focusout`, which
+     * bubbles, so it works for any renderer without the renderer having to
+     * declare a blur output of its own.
+     */
+    onBlurField: EventEmitter<string>;
     shouldRender: boolean;
     get resolvedOptions(): Record<string, unknown>[] | undefined;
     constructor(cdr: ChangeDetectorRef);
     ngOnChanges(_changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FieldInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FieldInput, "dfk-field-input", never, { "fieldDescription": { "alias": "fieldDescription"; "required": false; }; "value": { "alias": "value"; "required": false; }; "options": { "alias": "options"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readOnly": { "alias": "readOnly"; "required": false; }; "error": { "alias": "error"; "required": false; }; }, { "onValueChangeField": "onValueChangeField"; "onBlurField": "onBlurField"; }, never, never, true, never>;
 }

package/dist/components/MultiFieldInput.d.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { FieldDescription, Properties } from '@dynamic-field-kit/core';
 import type { ValidationResult } from '@dynamic-field-kit/core';
-import { BaseLayoutConfig, LayoutConfig } from '../types/layout';
+import { BaseLayoutConfig, LayoutConfig } from '../types/layout.js';
 import * as i0 from "@angular/core";
 export declare class MultiFieldInput implements OnInit, OnChanges {
     private cdr;
@@ -9,6 +9,17 @@ export declare class MultiFieldInput implements OnInit, OnChanges {
     properties?: Properties;
     onChange: EventEmitter<Properties>;
     validityChange: EventEmitter<ValidationResult>;
+    /**
+     * Emits a field's name when it loses focus. Touched state is tracked
+     * internally either way; this is the hook for driving an external form store
+     * - pass `createDynamicFormStore`'s `handleBlur` to get its `touched` map and
+     * `validateOnBlur` behaviour.
+     */
+    onBlurField: EventEmitter<string>;
+    private touchedFields;
+    handleBlurField(fieldName: string): void;
+    /** Whether this field has been blurred at least once. */
+    isTouched(fieldName: string): boolean;
     layout: LayoutConfig;
     rootData?: Properties;
     data: Properties;
@@ -45,5 +56,5 @@ export declare class MultiFieldInput implements OnInit, OnChanges {
     onGroupItemChange(field: FieldDescription, index: number, next: Properties): void;
     private commitData;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiFieldInput, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiFieldInput, "dfk-multi-field-input", never, { "fieldDescriptions": { "alias": "fieldDescriptions"; "required": false; }; "properties": { "alias": "properties"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "rootData": { "alias": "rootData"; "required": false; }; }, { "onChange": "onChange"; "validityChange": "validityChange"; "onBlurField": "onBlurField"; }, never, never, true, never>;
 }