@dynamic-field-kit/angular 1.3.3 → 1.4.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
-import { fieldRegistry, applyComputedValues, canAddGroupItem, canRemoveGroupItem, createGroupItem } from '@dynamic-field-kit/core';
-export { fieldRegistry } from '@dynamic-field-kit/core';
+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';
 
 class BaseInputComponent {
     cdr;
@@ -12,14 +12,11 @@ class BaseInputComponent {
     placeholder;
     required;
     disabled;
+    readOnly;
+    error;
     options;
     className;
     description;
-    errorMessage;
-    acceptFile;
-    maxLength;
-    minNumber;
-    maxNumber;
     valueChange = new EventEmitter();
     constructor(cdr) {
         this.cdr = cdr;
@@ -34,7 +31,7 @@ class BaseInputComponent {
         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", options: "options", className: "className", description: "description", errorMessage: "errorMessage", acceptFile: "acceptFile", maxLength: "maxLength", minNumber: "minNumber", maxNumber: "maxNumber" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
@@ -51,51 +48,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
+            }], error: [{
+                type: Input
             }], options: [{
                 type: Input
             }], className: [{
                 type: Input
             }], description: [{
                 type: Input
-            }], errorMessage: [{
-                type: Input
-            }], acceptFile: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], minNumber: [{
-                type: Input
-            }], maxNumber: [{
-                type: Input
             }], valueChange: [{
                 type: Output
             }] } });
 
+// Injecting this token yields the process-wide singleton by default, so code
+// that never provides it keeps working. Provide it on a component/route to give
+// that subtree an isolated set of renderers:
+//
+//   providers: [{ provide: FIELD_REGISTRY, useValue: myScopedRegistry }]
+const FIELD_REGISTRY = new InjectionToken('dfk.FieldRegistry', {
+    providedIn: 'root',
+    factory: () => fieldRegistry,
+});
+
+// Only the framework-agnostic FieldRendererProps keys. Domain-specific props
+// reach the renderer through `extraProps` (FieldDescription.props) instead.
 const KNOWN_PROPS = [
     'value',
     'label',
     'placeholder',
     'required',
     'disabled',
+    'readOnly',
+    'error',
     'options',
     'className',
     'description',
-    'errorMessage',
-    'acceptFile',
-    'maxLength',
-    'minNumber',
-    'maxNumber',
 ];
 class DynamicInput extends BaseInputComponent {
     type;
+    // Extra, framework-agnostic props forwarded verbatim to the renderer.
+    extraProps;
     valueChange = new EventEmitter();
     onChange = new EventEmitter();
+    registry = inject(FIELD_REGISTRY);
     host;
     compRef;
     inputInstance;
     subscriptions = [];
+    // Tracks which KNOWN_PROPS were actually supplied to DynamicInput (via
+    // SimpleChanges), independent of TS class-field emit. See applyProps.
+    supplied = new Set();
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
+        for (const prop of KNOWN_PROPS) {
+            if (changes[prop]) {
+                this.supplied.add(prop);
+            }
+        }
         if (this.inputInstance) {
             this.syncPropsToInstance(changes);
         }
@@ -121,6 +132,9 @@ class DynamicInput extends BaseInputComponent {
                 this.inputInstance[prop] = this[prop];
             }
         }
+        if (changes['extraProps']) {
+            this.applyExtraProps(this.inputInstance);
+        }
         this.compRef?.changeDetectorRef?.detectChanges();
     }
     cleanup() {
@@ -137,7 +151,7 @@ class DynamicInput extends BaseInputComponent {
         this.inputInstance = undefined;
     }
     render() {
-        const Renderer = fieldRegistry.get(this.type);
+        const Renderer = this.registry.get(this.type);
         this.cleanup();
         this.host.clear();
         if (!Renderer) {
@@ -154,8 +168,16 @@ class DynamicInput extends BaseInputComponent {
             this.renderError(`Invalid renderer for type: ${this.type}`);
         }
     }
+    // Angular component classes carry a static ɵcmp. Checked instead of
+    // reflectComponentType() because the peer range starts at Angular 13 and
+    // reflectComponentType is v14+. Plain function renderers have no ɵcmp and
+    // fall through to renderFallback. Uses hasOwnProperty (not `in`) so a
+    // class that merely extends a component without its own @Component
+    // decorator - and would otherwise inherit the parent's static ɵcmp via the
+    // prototype chain - is not mistaken for a component in its own right.
     isComponentType(renderer) {
-        return (typeof renderer === 'object' && renderer !== null && 'cmp' in renderer);
+        return (typeof renderer === 'function' &&
+            Object.prototype.hasOwnProperty.call(renderer, 'ɵcmp'));
     }
     renderComponent(compType) {
         try {
@@ -191,25 +213,55 @@ class DynamicInput extends BaseInputComponent {
     }
     getFallbackProps() {
         return {
+            ...this.extraProps,
             value: this.value,
             onValueChange: (v) => this.emitValue(v),
             label: this.label ?? '',
             placeholder: this.placeholder ?? '',
             required: this.required ?? false,
+            disabled: this.disabled ?? false,
+            readOnly: this.readOnly ?? false,
+            error: this.error,
             options: this.options ?? [],
             className: this.className ?? '',
             description: this.description ?? '',
-            disabled: this.disabled ?? false,
-            errorMessage: this.errorMessage ?? '',
         };
     }
+    // Gates on `this.supplied` (populated from SimpleChanges in ngOnChanges),
+    // not on `prop in instanceObj` or `prop in this`. Both `in` checks test a
+    // TypeScript class-field emit artifact rather than intent: whether a
+    // property slot exists at runtime depends on the compile target
+    // (useDefineForClassFields is false below ES2022, true at ES2022+), so the
+    // same source can behave oppositely between this package's test build and
+    // its shipped ES2022 bundle, where every declared field is always an own
+    // property. `this.supplied` instead reflects only whether Angular ever
+    // fired a SimpleChange for that input, i.e. whether the prop was *bound*
+    // at all - it skips only props DynamicInput was never given a binding
+    // for. It is NOT a general "renderer defaults survive" guarantee: Angular
+    // fires a firstChange SimpleChange for every bound input even when the
+    // bound value is undefined, and FieldInput's template binds all
+    // KNOWN_PROPS unconditionally, so on the real
+    // MultiFieldInput -> FieldInput -> DynamicInput path every prop counts as
+    // supplied and renderer-side defaults (e.g. `@Input() label = 'None'`)
+    // are still overwritten with undefined. This only helps when DynamicInput
+    // is mounted directly with some inputs left unbound.
     applyProps(instance) {
         const instanceObj = instance;
         for (const prop of KNOWN_PROPS) {
-            if (prop in this && prop in instanceObj) {
+            if (this.supplied.has(prop)) {
                 instanceObj[prop] = this[prop];
             }
         }
+        this.applyExtraProps(instance);
+    }
+    applyExtraProps(instance) {
+        if (!instance || !this.extraProps) {
+            return;
+        }
+        const instanceObj = instance;
+        for (const [key, value] of Object.entries(this.extraProps)) {
+            instanceObj[key] = value;
+        }
     }
     bindOutputs(instance) {
         const outputNames = [
@@ -235,7 +287,7 @@ class DynamicInput extends BaseInputComponent {
         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" }, 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 ɵ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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicInput, decorators: [{
             type: Component,
@@ -248,6 +300,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 }]
         }], propDecorators: { type: [{
                 type: Input
+            }], extraProps: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onChange: [{
@@ -261,8 +315,24 @@ class FieldInput {
     cdr;
     fieldDescription;
     value;
+    options;
+    disabled;
+    readOnly;
+    error;
     onValueChangeField = new EventEmitter();
     shouldRender = false;
+    get resolvedOptions() {
+        if (this.options) {
+            return this.options;
+        }
+        if (!this.fieldDescription?.options) {
+            return undefined;
+        }
+        if (typeof this.fieldDescription.options === 'function') {
+            return undefined;
+        }
+        return this.fieldDescription.options;
+    }
     constructor(cdr) {
         this.cdr = cdr;
     }
@@ -270,34 +340,27 @@ class FieldInput {
         this.shouldRender = !!this.fieldDescription;
         this.cdr.markForCheck();
     }
-    getFieldValue() {
-        if (!this.fieldDescription) {
-            return undefined;
-        }
-        if (this.value === undefined && this.fieldDescription.type === 'text') {
-            return '';
-        }
-        return this.value;
-    }
     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" }, outputs: { onValueChangeField: "onValueChangeField" }, usesOnChanges: true, ngImport: i0, template: `
+    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: `
     <dfk-dynamic-input
       *ngIf="shouldRender"
       [type]="fieldDescription!.type"
-      [value]="getFieldValue()"
+      [value]="value"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
       [description]="$any(fieldDescription!.description)"
-      [options]="fieldDescription!.options"
+      [options]="resolvedOptions"
       [className]="fieldDescription!.className"
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
-      [disabled]="false"
-      [errorMessage]="''"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [error]="$any(error)"
+      [extraProps]="fieldDescription!.props"
     ></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"], outputs: ["valueChange", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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: [{
             type: Component,
@@ -310,18 +373,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     <dfk-dynamic-input
       *ngIf="shouldRender"
       [type]="fieldDescription!.type"
-      [value]="getFieldValue()"
+      [value]="value"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
       [description]="$any(fieldDescription!.description)"
-      [options]="fieldDescription!.options"
+      [options]="resolvedOptions"
       [className]="fieldDescription!.className"
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
-      [disabled]="false"
-      [errorMessage]="''"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [error]="$any(error)"
+      [extraProps]="fieldDescription!.props"
     ></dfk-dynamic-input>
   `,
                 }]
@@ -329,6 +394,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], value: [{
                 type: Input
+            }], options: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readOnly: [{
+                type: Input
+            }], error: [{
+                type: Input
             }], onValueChangeField: [{
                 type: Output
             }] } });
@@ -339,7 +412,12 @@ class MultiFieldInput {
     fieldDescriptions = [];
     properties;
     onChange = new EventEmitter();
+    validityChange = new EventEmitter();
     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
+    // the top level, where the form's own data is the root.
+    rootData;
     data = {};
     visibleFields = [];
     isMobile = false;
@@ -383,6 +461,18 @@ class MultiFieldInput {
     trackByIndex(index) {
         return index;
     }
+    groupTrackByCache = new WeakMap();
+    // Returns a stable trackBy per group field: item[keyField] when configured,
+    // else the index. Cached by field reference so the template hands Angular the
+    // same function each change-detection pass.
+    groupTrackBy(field) {
+        let fn = this.groupTrackByCache.get(field);
+        if (!fn) {
+            fn = (index, item) => field.keyField ? item[field.keyField] ?? index : index;
+            this.groupTrackByCache.set(field, fn);
+        }
+        return fn;
+    }
     ngOnInit() {
         this.updateIsMobile();
         this.init();
@@ -394,19 +484,25 @@ class MultiFieldInput {
         const breakpoint = typeof this.layout === 'object' && this.layout.type === 'responsive'
             ? this.layout.breakpoint ?? DEFAULT_BREAKPOINT
             : DEFAULT_BREAKPOINT;
-        this.isMobile =
-            typeof window !== 'undefined' && window.innerWidth < breakpoint;
+        if (typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function') {
+            this.isMobile = window.matchMedia(`(max-width: ${breakpoint - 1}px)`).matches;
+        }
+        else {
+            this.isMobile =
+                typeof window !== 'undefined' && window.innerWidth < breakpoint;
+        }
     }
     init() {
         if (this.properties) {
-            this.data = applyComputedValues(this.fieldDescriptions, {
-                ...this.properties,
-            });
+            this.data = applyComputedValues(this.fieldDescriptions, { ...this.properties }, this.rootData);
         }
         this.updateVisibleFields();
+        this.validityChange.emit(validateFields(this.fieldDescriptions, this.data, this.rootData));
     }
     updateVisibleFields() {
-        this.visibleFields = this.fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(this.data));
+        const root = this.rootData ?? this.data;
+        this.visibleFields = this.fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(this.data, root));
     }
     onFieldChange(event) {
         this.commitData({ ...this.data, [event.key]: event.value });
@@ -415,6 +511,22 @@ class MultiFieldInput {
         const value = this.data[field.name];
         return Array.isArray(value) ? value : [];
     }
+    getResolvedOptions(field) {
+        return resolveOptions(field, this.data, this.rootData);
+    }
+    getDisabled(field) {
+        return resolveDisabled(field, this.data, this.rootData);
+    }
+    getReadOnly(field) {
+        return resolveReadOnly(field, this.data, this.rootData);
+    }
+    getError(field) {
+        if (this.getDisabled(field)) {
+            return undefined;
+        }
+        const errors = validateField(field, this.data[field.name], this.data, this.rootData);
+        return errors.length > 0 ? errors : undefined;
+    }
     canAddItem(field) {
         return canAddGroupItem(field, this.getItems(field));
     }
@@ -444,13 +556,14 @@ class MultiFieldInput {
         this.commitData({ ...this.data, [field.name]: items });
     }
     commitData(nextData) {
-        this.data = applyComputedValues(this.fieldDescriptions, nextData);
+        this.data = applyComputedValues(this.fieldDescriptions, nextData, this.rootData);
         this.updateVisibleFields();
         this.onChange.emit(this.data);
+        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" }, outputs: { onChange: "onChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, usesOnChanges: true, ngImport: i0, template: `
+    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: `
     <div
       class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
@@ -468,6 +581,10 @@ class MultiFieldInput {
           *ngIf="!field.fields"
           [fieldDescription]="field"
           [value]="data[field.name]"
+          [options]="getResolvedOptions(field)"
+          [disabled]="getDisabled(field)"
+          [readOnly]="getReadOnly(field)"
+          [error]="getError(field)"
           (onValueChangeField)="onFieldChange($event)"
         ></dfk-field-input>
 
@@ -477,7 +594,7 @@ class MultiFieldInput {
             *ngFor="
               let item of getItems(field);
               let i = index;
-              trackBy: trackByIndex
+              trackBy: groupTrackBy(field)
             "
             style="display: flex; align-items: flex-start; gap: 8px;"
           >
@@ -485,11 +602,19 @@ class MultiFieldInput {
               <dfk-multi-field-input
                 [fieldDescriptions]="field.fields"
                 [properties]="item"
+                [rootData]="rootData ?? data"
                 (onChange)="onGroupItemChange(field, i, $event)"
               ></dfk-multi-field-input>
             </div>
             <button
               type="button"
+              [attr.aria-label]="
+                (field.removeLabel || 'Remove') +
+                ' ' +
+                (field.label || field.name) +
+                ' ' +
+                (i + 1)
+              "
               (click)="onGroupItemRemove(field, i)"
               [disabled]="!canRemoveItem(field)"
             >
@@ -498,6 +623,9 @@ class MultiFieldInput {
           </div>
           <button
             type="button"
+            [attr.aria-label]="
+              (field.addLabel || 'Add') + ' ' + (field.label || field.name)
+            "
             (click)="onGroupItemAdd(field)"
             [disabled]="!canAddItem(field)"
           >
@@ -506,7 +634,7 @@ class MultiFieldInput {
         </div>
       </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: MultiFieldInput, selector: "dfk-multi-field-input", inputs: ["fieldDescriptions", "properties", "layout"], outputs: ["onChange"] }, { 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"], 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"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiFieldInput, decorators: [{
             type: Component,
@@ -539,6 +667,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           *ngIf="!field.fields"
           [fieldDescription]="field"
           [value]="data[field.name]"
+          [options]="getResolvedOptions(field)"
+          [disabled]="getDisabled(field)"
+          [readOnly]="getReadOnly(field)"
+          [error]="getError(field)"
           (onValueChangeField)="onFieldChange($event)"
         ></dfk-field-input>
 
@@ -548,7 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             *ngFor="
               let item of getItems(field);
               let i = index;
-              trackBy: trackByIndex
+              trackBy: groupTrackBy(field)
             "
             style="display: flex; align-items: flex-start; gap: 8px;"
           >
@@ -556,11 +688,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
               <dfk-multi-field-input
                 [fieldDescriptions]="field.fields"
                 [properties]="item"
+                [rootData]="rootData ?? data"
                 (onChange)="onGroupItemChange(field, i, $event)"
               ></dfk-multi-field-input>
             </div>
             <button
               type="button"
+              [attr.aria-label]="
+                (field.removeLabel || 'Remove') +
+                ' ' +
+                (field.label || field.name) +
+                ' ' +
+                (i + 1)
+              "
               (click)="onGroupItemRemove(field, i)"
               [disabled]="!canRemoveItem(field)"
             >
@@ -569,6 +709,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
           </div>
           <button
             type="button"
+            [attr.aria-label]="
+              (field.addLabel || 'Add') + ' ' + (field.label || field.name)
+            "
             (click)="onGroupItemAdd(field)"
             [disabled]="!canAddItem(field)"
           >
@@ -585,8 +728,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Input
             }], onChange: [{
                 type: Output
+            }], validityChange: [{
+                type: Output
             }], layout: [{
                 type: Input
+            }], rootData: [{
+                type: Input
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -767,5 +914,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicInput, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, layoutRegistry };
+export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicInput, FIELD_REGISTRY, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, layoutRegistry };
 //# sourceMappingURL=dynamic-field-kit-angular.mjs.map