@dynamic-field-kit/angular 1.4.0 → 1.5.1

package/dist/fesm2022/dynamic-field-kit-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, signal, computed, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
+import { CommonModule, NgIf, NgClass, NgFor, JsonPipe } from '@angular/common';
 import { fieldRegistry, applyComputedValues, validateFields, resolveOptions, resolveDisabled, resolveReadOnly, validateField, canAddGroupItem, canRemoveGroupItem, createGroupItem } from '@dynamic-field-kit/core';
 export { FieldRegistry, fieldRegistry, resolveDisabled, resolveOptions, resolveReadOnly, validateField, validateFieldAsync, validateFields, validateFieldsAsync, validators } from '@dynamic-field-kit/core';
 
@@ -30,10 +30,10 @@ class BaseInputComponent {
     hasChanges(changes, prop) {
         return changes[prop] !== undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", error: "error", options: "options", className: "className", description: "description" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: BaseInputComponent, isStandalone: true, selector: "ng-component", inputs: { value: "value", label: "label", placeholder: "placeholder", required: "required", disabled: "disabled", readOnly: "readOnly", error: "error", options: "options", className: "className", description: "description" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -155,6 +155,9 @@ class DynamicInput extends BaseInputComponent {
         this.cleanup();
         this.host.clear();
         if (!Renderer) {
+            if (this.renderDefaultFallbackHTML5(this.type)) {
+                return;
+            }
             this.renderError(`Unknown field type: ${this.type}`);
             return;
         }
@@ -280,16 +283,128 @@ class DynamicInput extends BaseInputComponent {
         this.valueChange.emit(value);
         this.onChange.emit(value);
     }
+    renderDefaultFallbackHTML5(type) {
+        const nativeEl = this.host.element.nativeElement;
+        if (type === 'text' ||
+            type === 'password' ||
+            type === 'email' ||
+            type === 'number') {
+            const input = document.createElement('input');
+            input.type = type;
+            if (this.className) {
+                input.className = this.className;
+            }
+            if (this.placeholder) {
+                input.placeholder = this.placeholder;
+            }
+            if (this.disabled) {
+                input.disabled = true;
+            }
+            if (this.readOnly) {
+                input.readOnly = true;
+            }
+            if (this.required) {
+                input.required = true;
+            }
+            input.value = (this.value ?? '').toString();
+            input.addEventListener('input', (e) => {
+                const raw = e.target.value;
+                const val = type === 'number' ? (raw === '' ? undefined : Number(raw)) : raw;
+                this.emitValue(val);
+            });
+            nativeEl.appendChild(input);
+            return true;
+        }
+        if (type === 'textarea') {
+            const textarea = document.createElement('textarea');
+            if (this.className) {
+                textarea.className = this.className;
+            }
+            if (this.placeholder) {
+                textarea.placeholder = this.placeholder;
+            }
+            if (this.disabled) {
+                textarea.disabled = true;
+            }
+            if (this.readOnly) {
+                textarea.readOnly = true;
+            }
+            if (this.required) {
+                textarea.required = true;
+            }
+            textarea.value = this.value ?? '';
+            textarea.addEventListener('input', (e) => {
+                this.emitValue(e.target.value);
+            });
+            nativeEl.appendChild(textarea);
+            return true;
+        }
+        if (type === 'checkbox') {
+            const checkbox = document.createElement('input');
+            checkbox.type = 'checkbox';
+            if (this.className) {
+                checkbox.className = this.className;
+            }
+            if (this.disabled || this.readOnly) {
+                checkbox.disabled = true;
+            }
+            if (this.required) {
+                checkbox.required = true;
+            }
+            checkbox.checked = Boolean(this.value);
+            checkbox.addEventListener('change', (e) => {
+                this.emitValue(e.target.checked);
+            });
+            nativeEl.appendChild(checkbox);
+            return true;
+        }
+        if (type === 'select') {
+            const select = document.createElement('select');
+            if (this.className) {
+                select.className = this.className;
+            }
+            if (this.disabled || this.readOnly) {
+                select.disabled = true;
+            }
+            if (this.required) {
+                select.required = true;
+            }
+            const defaultOpt = document.createElement('option');
+            defaultOpt.value = '';
+            defaultOpt.disabled = true;
+            defaultOpt.textContent = '-- Select --';
+            select.appendChild(defaultOpt);
+            const options = this.options || [];
+            options.forEach((opt) => {
+                const optObj = opt;
+                const optVal = optObj['value'] ?? optObj['id'] ?? opt;
+                const optLabel = optObj['label'] ?? optObj['name'] ?? String(optVal);
+                const optionEl = document.createElement('option');
+                optionEl.value = String(optVal);
+                optionEl.textContent = String(optLabel);
+                if (String(optVal) === String(this.value)) {
+                    optionEl.selected = true;
+                }
+                select.appendChild(optionEl);
+            });
+            select.addEventListener('change', (e) => {
+                this.emitValue(e.target.value);
+            });
+            nativeEl.appendChild(select);
+            return true;
+        }
+        return false;
+    }
     renderError(message) {
         const el = document.createElement('div');
         el.textContent = message;
         el.style.color = 'red';
         this.host.element.nativeElement.appendChild(el);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: DynamicInput, isStandalone: true, selector: "dfk-dynamic-input", inputs: { type: "type", extraProps: "extraProps" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<div #host style="display: contents;"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicInput, isStandalone: true, selector: "dfk-dynamic-input", inputs: { type: "type", extraProps: "extraProps" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<div #host style="display: contents;"></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-dynamic-input',
@@ -320,6 +435,12 @@ class FieldInput {
     readOnly;
     error;
     onValueChangeField = new EventEmitter();
+    /**
+     * 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 = new EventEmitter();
     shouldRender = false;
     get resolvedOptions() {
         if (this.options) {
@@ -340,8 +461,8 @@ class FieldInput {
         this.shouldRender = !!this.fieldDescription;
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FieldInput, isStandalone: true, selector: "dfk-field-input", inputs: { fieldDescription: "fieldDescription", value: "value", options: "options", disabled: "disabled", readOnly: "readOnly", error: "error" }, outputs: { onValueChangeField: "onValueChangeField" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: FieldInput, isStandalone: true, selector: "dfk-field-input", inputs: { fieldDescription: "fieldDescription", value: "value", options: "options", disabled: "disabled", readOnly: "readOnly", error: "error" }, outputs: { onValueChangeField: "onValueChangeField", onBlurField: "onBlurField" }, usesOnChanges: true, ngImport: i0, template: `
     <dfk-dynamic-input
       *ngIf="shouldRender"
       [type]="fieldDescription!.type"
@@ -355,6 +476,7 @@ class FieldInput {
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
+      (focusout)="onBlurField.emit(fieldDescription!.name)"
       [disabled]="disabled"
       [readOnly]="readOnly"
       [error]="$any(error)"
@@ -362,7 +484,7 @@ class FieldInput {
     ></dfk-dynamic-input>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DynamicInput, selector: "dfk-dynamic-input", inputs: ["type", "extraProps"], outputs: ["valueChange", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-field-input',
@@ -383,6 +505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
+      (focusout)="onBlurField.emit(fieldDescription!.name)"
       [disabled]="disabled"
       [readOnly]="readOnly"
       [error]="$any(error)"
@@ -404,6 +527,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], onValueChangeField: [{
                 type: Output
+            }], onBlurField: [{
+                type: Output
             }] } });
 
 const DEFAULT_BREAKPOINT = 768;
@@ -413,6 +538,22 @@ class MultiFieldInput {
     properties;
     onChange = new EventEmitter();
     validityChange = new EventEmitter();
+    /**
+     * 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 = new EventEmitter();
+    touchedFields = {};
+    handleBlurField(fieldName) {
+        this.touchedFields = { ...this.touchedFields, [fieldName]: true };
+        this.onBlurField.emit(fieldName);
+    }
+    /** Whether this field has been blurred at least once. */
+    isTouched(fieldName) {
+        return Boolean(this.touchedFields[fieldName]);
+    }
     layout = 'column';
     // Top-level form data, threaded down through repeatable groups so a nested
     // field's appearCondition/computeValue can read the root form. Omitted at
@@ -468,7 +609,7 @@ class MultiFieldInput {
     groupTrackBy(field) {
         let fn = this.groupTrackByCache.get(field);
         if (!fn) {
-            fn = (index, item) => field.keyField ? item[field.keyField] ?? index : index;
+            fn = (index, item) => field.keyField ? (item[field.keyField] ?? index) : index;
             this.groupTrackByCache.set(field, fn);
         }
         return fn;
@@ -482,7 +623,7 @@ class MultiFieldInput {
     }
     updateIsMobile() {
         const breakpoint = typeof this.layout === 'object' && this.layout.type === 'responsive'
-            ? this.layout.breakpoint ?? DEFAULT_BREAKPOINT
+            ? (this.layout.breakpoint ?? DEFAULT_BREAKPOINT)
             : DEFAULT_BREAKPOINT;
         if (typeof window !== 'undefined' &&
             typeof window.matchMedia === 'function') {
@@ -562,14 +703,14 @@ class MultiFieldInput {
         this.validityChange.emit(validateFields(this.fieldDescriptions, this.data, this.rootData));
         this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiFieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", layout: "layout", rootData: "rootData" }, outputs: { onChange: "onChange", validityChange: "validityChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiFieldInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", layout: "layout", rootData: "rootData" }, outputs: { onChange: "onChange", validityChange: "validityChange", onBlurField: "onBlurField" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
         'flex flex-col': resolvedLayoutType === 'column',
         'flex flex-row': resolvedLayoutType === 'row',
-        grid: resolvedLayoutType === 'grid'
+        grid: resolvedLayoutType === 'grid',
       }"
       [style.gap.px]="gap"
       [style.gridTemplateColumns]="
@@ -586,6 +727,7 @@ class MultiFieldInput {
           [readOnly]="getReadOnly(field)"
           [error]="getError(field)"
           (onValueChangeField)="onFieldChange($event)"
+          (onBlurField)="handleBlurField($event)"
         ></dfk-field-input>
 
         <div *ngIf="field.fields" [class]="field.className">
@@ -634,9 +776,9 @@ class MultiFieldInput {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "layout", "rootData"], outputs: ["onChange", "validityChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldInput, selector: "dfk-field-input", inputs: ["fieldDescription", "value", "options", "disabled", "readOnly", "error"], outputs: ["onValueChangeField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "layout", "rootData"], outputs: ["onChange", "validityChange", "onBlurField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldInput, selector: "dfk-field-input", inputs: ["fieldDescription", "value", "options", "disabled", "readOnly", "error"], outputs: ["onValueChangeField", "onBlurField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiFieldInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiFieldInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-multi-field-input',
@@ -655,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
       [ngClass]="{
         'flex flex-col': resolvedLayoutType === 'column',
         'flex flex-row': resolvedLayoutType === 'row',
-        grid: resolvedLayoutType === 'grid'
+        grid: resolvedLayoutType === 'grid',
       }"
       [style.gap.px]="gap"
       [style.gridTemplateColumns]="
@@ -672,6 +814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           [readOnly]="getReadOnly(field)"
           [error]="getError(field)"
           (onValueChangeField)="onFieldChange($event)"
+          (onBlurField)="handleBlurField($event)"
         ></dfk-field-input>
 
         <div *ngIf="field.fields" [class]="field.className">
@@ -730,6 +873,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], validityChange: [{
                 type: Output
+            }], onBlurField: [{
+                type: Output
             }], layout: [{
                 type: Input
             }], rootData: [{
@@ -739,6 +884,406 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 args: ['window:resize']
             }] } });
 
+class DynamicFormDevToolsComponent {
+    data = {};
+    errors = {};
+    touched = {};
+    isDirty = false;
+    fields = [];
+    /** Number of fields carrying errors, mirroring the react and vue overlays. */
+    errorCount() {
+        return Object.keys(this.errors || {}).length;
+    }
+    isOpen = signal(false);
+    activeTab = signal('data');
+    tabs = [
+        'data',
+        'errors',
+        'meta',
+        'fields',
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormDevToolsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: DynamicFormDevToolsComponent, isStandalone: true, selector: "dfk-dev-tools", inputs: { data: "data", errors: "errors", touched: "touched", isDirty: "isDirty", fields: "fields" }, ngImport: i0, template: `
+    <button
+      *ngIf="!isOpen()"
+      type="button"
+      (click)="isOpen.set(true)"
+      style="
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 99999;
+        background: #1e293b;
+        color: #f8fafc;
+        border: 1px solid #334155;
+        border-radius: 20px;
+        padding: 8px 14px;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      "
+    >
+      <span>🔍 DevTools</span>
+      <span
+        *ngIf="errorCount() > 0"
+        class="dfk-devtools-badge"
+        style="
+          background: #ef4444;
+          color: #fff;
+          border-radius: 10px;
+          padding: 2px 6px;
+          font-size: 10px;
+        "
+        >{{ errorCount() }}</span
+      >
+    </button>
+
+    <div
+      *ngIf="isOpen()"
+      style="
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 99999;
+        width: 360px;
+        max-height: 420px;
+        background: #0f172a;
+        color: #f8fafc;
+        border: 1px solid #334155;
+        border-radius: 12px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        font-family: monospace, sans-serif;
+        font-size: 12px;
+        overflow: hidden;
+      "
+    >
+      <div
+        style="
+          padding: 10px 14px;
+          background: #1e293b;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #334155;
+        "
+      >
+        <span style="font-weight: bold; color: #38bdf8;">🛠️ Form DevTools</span>
+        <button
+          type="button"
+          (click)="isOpen.set(false)"
+          style="background: transparent; border: none; color: #94a3b8; font-size: 14px; cursor: pointer;"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div
+        style="display: flex; background: #1e293b; border-bottom: 1px solid #334155;"
+      >
+        <button
+          type="button"
+          *ngFor="let tab of tabs"
+          (click)="activeTab.set(tab)"
+          [style.background]="activeTab() === tab ? '#0f172a' : 'transparent'"
+          [style.color]="activeTab() === tab ? '#38bdf8' : '#94a3b8'"
+          style="flex: 1; padding: 6px 0; border: none; cursor: pointer; text-transform: capitalize; font-size: 11px;"
+        >
+          {{ tab
+          }}{{
+            tab === 'errors' && errorCount() > 0
+              ? ' (' + errorCount() + ')'
+              : ''
+          }}
+        </button>
+      </div>
+
+      <div style="padding: 12px; overflow-y: auto; flex: 1;">
+        <pre
+          *ngIf="activeTab() === 'data'"
+          style="margin: 0; white-space: pre-wrap; word-break: break-all; color: #a7f3d0;"
+        >
+          {{ data | json }}
+        </pre>
+        <pre
+          *ngIf="activeTab() === 'errors'"
+          style="margin: 0; white-space: pre-wrap; word-break: break-all; color: #f87171;"
+        >
+          {{ errors | json }}
+        </pre>
+        <div *ngIf="activeTab() === 'meta'">
+          <div>isDirty: {{ isDirty }}</div>
+          <pre style="margin: 4px 0 0 0; color: #cbd5e1;">{{
+            touched | json
+          }}</pre>
+        </div>
+        <div *ngIf="activeTab() === 'fields'">
+          <div
+            *ngFor="let f of fields"
+            style="padding: 6px; margin-bottom: 6px; background: #1e293b; border-radius: 4px;"
+          >
+            <div style="color: #38bdf8; font-weight: bold;">{{ f.name }}</div>
+            <div style="color: #94a3b8; font-size: 10px;">
+              type: {{ f.type }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFormDevToolsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-dev-tools',
+                    standalone: true,
+                    imports: [NgIf, NgFor, JsonPipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <button
+      *ngIf="!isOpen()"
+      type="button"
+      (click)="isOpen.set(true)"
+      style="
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 99999;
+        background: #1e293b;
+        color: #f8fafc;
+        border: 1px solid #334155;
+        border-radius: 20px;
+        padding: 8px 14px;
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      "
+    >
+      <span>🔍 DevTools</span>
+      <span
+        *ngIf="errorCount() > 0"
+        class="dfk-devtools-badge"
+        style="
+          background: #ef4444;
+          color: #fff;
+          border-radius: 10px;
+          padding: 2px 6px;
+          font-size: 10px;
+        "
+        >{{ errorCount() }}</span
+      >
+    </button>
+
+    <div
+      *ngIf="isOpen()"
+      style="
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+        z-index: 99999;
+        width: 360px;
+        max-height: 420px;
+        background: #0f172a;
+        color: #f8fafc;
+        border: 1px solid #334155;
+        border-radius: 12px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        font-family: monospace, sans-serif;
+        font-size: 12px;
+        overflow: hidden;
+      "
+    >
+      <div
+        style="
+          padding: 10px 14px;
+          background: #1e293b;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #334155;
+        "
+      >
+        <span style="font-weight: bold; color: #38bdf8;">🛠️ Form DevTools</span>
+        <button
+          type="button"
+          (click)="isOpen.set(false)"
+          style="background: transparent; border: none; color: #94a3b8; font-size: 14px; cursor: pointer;"
+        >
+          ✕
+        </button>
+      </div>
+
+      <div
+        style="display: flex; background: #1e293b; border-bottom: 1px solid #334155;"
+      >
+        <button
+          type="button"
+          *ngFor="let tab of tabs"
+          (click)="activeTab.set(tab)"
+          [style.background]="activeTab() === tab ? '#0f172a' : 'transparent'"
+          [style.color]="activeTab() === tab ? '#38bdf8' : '#94a3b8'"
+          style="flex: 1; padding: 6px 0; border: none; cursor: pointer; text-transform: capitalize; font-size: 11px;"
+        >
+          {{ tab
+          }}{{
+            tab === 'errors' && errorCount() > 0
+              ? ' (' + errorCount() + ')'
+              : ''
+          }}
+        </button>
+      </div>
+
+      <div style="padding: 12px; overflow-y: auto; flex: 1;">
+        <pre
+          *ngIf="activeTab() === 'data'"
+          style="margin: 0; white-space: pre-wrap; word-break: break-all; color: #a7f3d0;"
+        >
+          {{ data | json }}
+        </pre>
+        <pre
+          *ngIf="activeTab() === 'errors'"
+          style="margin: 0; white-space: pre-wrap; word-break: break-all; color: #f87171;"
+        >
+          {{ errors | json }}
+        </pre>
+        <div *ngIf="activeTab() === 'meta'">
+          <div>isDirty: {{ isDirty }}</div>
+          <pre style="margin: 4px 0 0 0; color: #cbd5e1;">{{
+            touched | json
+          }}</pre>
+        </div>
+        <div *ngIf="activeTab() === 'fields'">
+          <div
+            *ngFor="let f of fields"
+            style="padding: 6px; margin-bottom: 6px; background: #1e293b; border-radius: 4px;"
+          >
+            <div style="color: #38bdf8; font-weight: bold;">{{ f.name }}</div>
+            <div style="color: #94a3b8; font-size: 10px;">
+              type: {{ f.type }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], touched: [{
+                type: Input
+            }], isDirty: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }] } });
+
+function createDynamicFormStore(options) {
+    const fields = options.fields;
+    const initialValues = options.initialValues || {};
+    const validateOnBlur = options.validateOnBlur ?? true;
+    const validateOnChange = options.validateOnChange ?? false;
+    const data = signal(applyComputedValues(fields, initialValues));
+    const errors = signal({});
+    const isDirty = signal(false);
+    const touched = signal({});
+    const isSubmitting = signal(false);
+    const isSubmitted = signal(false);
+    const isValid = computed(() => Object.keys(errors()).length === 0);
+    function validate() {
+        const res = validateFields(fields, data());
+        errors.set(res.errors);
+        return res.valid;
+    }
+    function handleChange(newData) {
+        const next = applyComputedValues(fields, newData);
+        data.set(next);
+        isDirty.set(true);
+        if (validateOnChange) {
+            const res = validateFields(fields, next);
+            errors.set(res.errors);
+        }
+    }
+    function setFieldValue(name, value) {
+        handleChange({ ...data(), [name]: value });
+    }
+    function setFieldTouched(name, isTouched = true) {
+        touched.set({ ...touched(), [name]: isTouched });
+    }
+    function handleBlur(fieldName) {
+        setFieldTouched(fieldName, true);
+        if (validateOnBlur) {
+            const res = validateFields(fields, data());
+            errors.set(res.errors);
+        }
+    }
+    function reset(newValues) {
+        const seed = newValues ?? initialValues;
+        const next = applyComputedValues(fields, seed);
+        data.set(next);
+        errors.set({});
+        isDirty.set(false);
+        touched.set({});
+        isSubmitting.set(false);
+        isSubmitted.set(false);
+    }
+    /**
+     * Returns a submit handler, mirroring the React and Vue `useDynamicForm`
+     * hooks. Bind it once and use it as the `(ngSubmit)` handler:
+     * `onSubmit = this.store.handleSubmit(data => ...)`.
+     */
+    function handleSubmit(onValid, onInvalid) {
+        return async (e) => {
+            if (e && typeof e.preventDefault === 'function') {
+                e.preventDefault();
+            }
+            isSubmitting.set(true);
+            try {
+                const res = validateFields(fields, data());
+                errors.set(res.errors);
+                isSubmitted.set(true);
+                if (res.valid) {
+                    await onValid(data());
+                }
+                else if (onInvalid) {
+                    onInvalid(res.errors);
+                }
+            }
+            finally {
+                isSubmitting.set(false);
+            }
+        };
+    }
+    return {
+        data,
+        errors,
+        isValid,
+        isDirty,
+        touched,
+        isSubmitting,
+        isSubmitted,
+        setFieldValue,
+        setFieldTouched,
+        handleChange,
+        handleBlur,
+        reset,
+        validate,
+        handleSubmit,
+    };
+}
+
 class LayoutRegistry {
     layouts = new Map();
     register(type, component) {
@@ -759,8 +1304,8 @@ class ColumnLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: ColumnLayout, isStandalone: true, selector: "dfk-column-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ColumnLayout, isStandalone: true, selector: "dfk-column-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'flex'"
     [style.flexDirection]="'column'"
     [style.gap]="gap + 'px'"
@@ -768,7 +1313,7 @@ class ColumnLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColumnLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColumnLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-column-layout',
@@ -793,8 +1338,8 @@ class RowLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RowLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: RowLayout, isStandalone: true, selector: "dfk-row-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RowLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: RowLayout, isStandalone: true, selector: "dfk-row-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'flex'"
     [style.flexDirection]="'row'"
     [style.gap]="gap + 'px'"
@@ -802,7 +1347,7 @@ class RowLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RowLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RowLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-row-layout',
@@ -830,8 +1375,8 @@ class GridLayout {
     get gap() {
         return this.config?.gap ?? 12;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: GridLayout, isStandalone: true, selector: "dfk-grid-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: GridLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: GridLayout, isStandalone: true, selector: "dfk-grid-layout", inputs: { config: "config", template: "template" }, ngImport: i0, template: `<div
     [style.display]="'grid'"
     [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
     [style.gap]="gap + 'px'"
@@ -839,7 +1384,7 @@ class GridLayout {
     <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridLayout, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: GridLayout, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-grid-layout',
@@ -863,8 +1408,8 @@ layoutRegistry.register('row', RowLayout);
 layoutRegistry.register('grid', GridLayout);
 
 class DynamicFieldKitModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
             DynamicInput,
             FieldInput,
             MultiFieldInput,
@@ -876,7 +1421,7 @@ class DynamicFieldKitModule {
             ColumnLayout,
             RowLayout,
             GridLayout] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
             DynamicInput,
             FieldInput,
             MultiFieldInput,
@@ -884,7 +1429,7 @@ class DynamicFieldKitModule {
             RowLayout,
             GridLayout] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -914,5 +1459,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicInput, FIELD_REGISTRY, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, layoutRegistry };
-//# sourceMappingURL=dynamic-field-kit-angular.mjs.map
+export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicFormDevToolsComponent, DynamicInput, FIELD_REGISTRY, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, createDynamicFormStore, layoutRegistry };