@dynamic-field-kit/angular 1.2.10 → 1.3.3

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

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, SimpleChange, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, ViewContainerRef, ViewChild, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
-import { fieldRegistry } from '@dynamic-field-kit/core';
+import { fieldRegistry, applyComputedValues, canAddGroupItem, canRemoveGroupItem, createGroupItem } from '@dynamic-field-kit/core';
 export { fieldRegistry } from '@dynamic-field-kit/core';
 
 class BaseInputComponent {
@@ -19,13 +20,21 @@ class BaseInputComponent {
     maxLength;
     minNumber;
     maxNumber;
-    // Add more from mplis as needed
     valueChange = new EventEmitter();
     constructor(cdr) {
         this.cdr = cdr;
     }
+    ngOnChanges(_changes) {
+        this.detectChanges();
+    }
+    detectChanges() {
+        this.cdr.markForCheck();
+    }
+    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", options: "options", className: "className", description: "description", errorMessage: "errorMessage", acceptFile: "acceptFile", maxLength: "maxLength", minNumber: "minNumber", maxNumber: "maxNumber" }, outputs: { valueChange: "valueChange" }, 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", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
             type: Component,
@@ -62,29 +71,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }] } });
 
+const KNOWN_PROPS = [
+    'value',
+    'label',
+    'placeholder',
+    'required',
+    'disabled',
+    'options',
+    'className',
+    'description',
+    'errorMessage',
+    'acceptFile',
+    'maxLength',
+    'minNumber',
+    'maxNumber',
+];
 class DynamicInput extends BaseInputComponent {
     type;
     valueChange = new EventEmitter();
-    onChange = new EventEmitter(); // backward compat
+    onChange = new EventEmitter();
     host;
     compRef;
     inputInstance;
     subscriptions = [];
     ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (this.inputInstance) {
+            this.syncPropsToInstance(changes);
+        }
         if (changes['type'] && !changes['type'].firstChange && this.host) {
             this.render();
-            return;
-        }
-        if (this.inputInstance) {
-            this.applyKnownProps(this.inputInstance);
-            const childChanges = {};
-            for (const prop in changes) {
-                childChanges[prop] = new SimpleChange(changes[prop].previousValue, changes[prop].currentValue, changes[prop].firstChange);
-            }
-            this.inputInstance.ngOnChanges?.(childChanges);
-            this.compRef?.changeDetectorRef.detectChanges();
         }
-        else if (this.host) {
+        else if (!this.inputInstance && this.host) {
             this.render();
         }
     }
@@ -92,6 +110,20 @@ class DynamicInput extends BaseInputComponent {
         this.render();
     }
     ngOnDestroy() {
+        this.cleanup();
+    }
+    syncPropsToInstance(changes) {
+        if (!this.inputInstance) {
+            return;
+        }
+        for (const prop of KNOWN_PROPS) {
+            if (changes[prop] && this.inputInstance) {
+                this.inputInstance[prop] = this[prop];
+            }
+        }
+        this.compRef?.changeDetectorRef?.detectChanges();
+    }
+    cleanup() {
         this.cleanupSubscriptions();
         this.cleanupRenderedComponent();
     }
@@ -99,106 +131,111 @@ class DynamicInput extends BaseInputComponent {
         this.subscriptions.forEach((s) => s.unsubscribe());
         this.subscriptions = [];
     }
+    cleanupRenderedComponent() {
+        this.compRef?.destroy();
+        this.compRef = undefined;
+        this.inputInstance = undefined;
+    }
     render() {
         const Renderer = fieldRegistry.get(this.type);
-        this.cleanupRenderedComponent();
-        this.cleanupSubscriptions();
+        this.cleanup();
         this.host.clear();
         if (!Renderer) {
-            const el = document.createElement('div');
-            el.textContent = `Unknown field type: ${this.type}`;
-            this.host.element.nativeElement.appendChild(el);
+            this.renderError(`Unknown field type: ${this.type}`);
             return;
         }
+        if (this.isComponentType(Renderer)) {
+            this.renderComponent(Renderer);
+        }
+        else if (typeof Renderer === 'function') {
+            this.renderFallback(Renderer);
+        }
+        else {
+            this.renderError(`Invalid renderer for type: ${this.type}`);
+        }
+    }
+    isComponentType(renderer) {
+        return (typeof renderer === 'object' && renderer !== null && 'cmp' in renderer);
+    }
+    renderComponent(compType) {
         try {
-            const compType = Renderer;
             const compRef = this.host.createComponent(compType);
             const instance = compRef.instance;
             if (!instance) {
-                throw new Error(`Failed to create instance for ${this.type}`);
-            }
-            this.applyKnownProps(instance);
-            const subA = this.bindOutput(instance, 'valueChange');
-            if (subA) {
-                this.subscriptions.push(subA);
-            }
-            const subB = this.bindOutput(instance, 'onValueChange');
-            if (subB) {
-                this.subscriptions.push(subB);
+                this.renderError(`Failed to create instance for ${this.type}`);
+                return;
             }
-            instance.changeDetectorRef?.detectChanges();
+            this.applyProps(instance);
+            this.bindOutputs(instance);
             this.compRef = compRef;
             this.inputInstance = instance;
             compRef.changeDetectorRef.detectChanges();
         }
-        catch (err) {
-            // Fallback to function renderer
-            try {
-                const props = {
-                    value: this.value,
-                    onValueChange: (v) => this.emitValue(v),
-                    label: this.label,
-                    placeholder: this.placeholder,
-                    required: this.required,
-                    options: this.options,
-                    className: this.className,
-                    description: this.description,
-                    disabled: this.disabled,
-                    errorMessage: this.errorMessage,
-                };
-                const out = Renderer(props);
-                if (typeof out === 'string') {
-                    const el = document.createElement('div');
-                    el.innerHTML = out;
-                    this.host.element.nativeElement.appendChild(el);
-                }
-            }
-            catch (e) {
+        catch {
+            this.renderError(`Failed to render field: ${this.type}`);
+        }
+    }
+    renderFallback(renderer) {
+        try {
+            const props = this.getFallbackProps();
+            const result = renderer(props);
+            if (typeof result === 'string') {
                 const el = document.createElement('div');
-                el.textContent = `Failed to render field: ${this.type}`;
+                el.innerHTML = result;
                 this.host.element.nativeElement.appendChild(el);
             }
         }
+        catch {
+            this.renderError(`Failed to render field: ${this.type}`);
+        }
     }
-    applyKnownProps(instance) {
-        const knownProps = [
-            'value',
-            'label',
-            'placeholder',
-            'required',
-            'disabled',
-            'options',
-            'className',
-            'description',
-            'errorMessage',
-        ];
-        for (const prop of knownProps) {
-            if (prop in this && prop in instance) {
-                instance[prop] = this[prop];
+    getFallbackProps() {
+        return {
+            value: this.value,
+            onValueChange: (v) => this.emitValue(v),
+            label: this.label ?? '',
+            placeholder: this.placeholder ?? '',
+            required: this.required ?? false,
+            options: this.options ?? [],
+            className: this.className ?? '',
+            description: this.description ?? '',
+            disabled: this.disabled ?? false,
+            errorMessage: this.errorMessage ?? '',
+        };
+    }
+    applyProps(instance) {
+        const instanceObj = instance;
+        for (const prop of KNOWN_PROPS) {
+            if (prop in this && prop in instanceObj) {
+                instanceObj[prop] = this[prop];
             }
         }
     }
-    bindOutput(instance, outputName) {
-        const output = instance?.[outputName];
-        if (!output || typeof output.subscribe !== 'function') {
-            return;
+    bindOutputs(instance) {
+        const outputNames = [
+            'valueChange',
+            'onValueChange',
+        ];
+        for (const outputName of outputNames) {
+            const output = instance[outputName];
+            if (output && typeof output === 'object' && 'subscribe' in output) {
+                const sub = output.subscribe((value) => this.emitValue(value));
+                this.subscriptions.push(sub);
+            }
         }
-        const sub = output.subscribe((value) => {
-            this.emitValue(value);
-        });
-        return sub;
     }
     emitValue(value) {
         this.valueChange.emit(value);
         this.onChange.emit(value);
     }
-    cleanupRenderedComponent() {
-        this.compRef?.destroy();
-        this.compRef = undefined;
-        this.inputInstance = undefined;
+    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" }, 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 }] });
+    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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicInput, decorators: [{
             type: Component,
@@ -206,6 +243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     selector: 'dfk-dynamic-input',
                     standalone: true,
                     imports: [CommonModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<div #host style="display: contents;"></div>`,
                 }]
         }], propDecorators: { type: [{
@@ -220,29 +258,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             }] } });
 
 class FieldInput {
+    cdr;
     fieldDescription;
-    renderInfos;
+    value;
     onValueChangeField = new EventEmitter();
+    shouldRender = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnChanges(_changes) {
+        this.shouldRender = !!this.fieldDescription;
+        this.cdr.markForCheck();
+    }
     getFieldValue() {
-        if (!this.fieldDescription || !this.renderInfos) {
+        if (!this.fieldDescription) {
             return undefined;
         }
-        const value = this.renderInfos[this.fieldDescription.name];
-        if (value === undefined && this.fieldDescription.type === 'text') {
+        if (this.value === undefined && this.fieldDescription.type === 'text') {
             return '';
         }
-        return value;
+        return this.value;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldInput, deps: [], 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", renderInfos: "renderInfos" }, outputs: { onValueChangeField: "onValueChangeField" }, ngImport: i0, template: `
+    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: `
     <dfk-dynamic-input
-      *ngIf="fieldDescription && renderInfos"
+      *ngIf="shouldRender"
       [type]="fieldDescription!.type"
       [value]="getFieldValue()"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
+      [description]="$any(fieldDescription!.description)"
       [options]="fieldDescription!.options"
       [className]="fieldDescription!.className"
       (valueChange)="
@@ -251,7 +297,7 @@ class FieldInput {
       [disabled]="false"
       [errorMessage]="''"
     ></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"] }] });
+  `, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldInput, decorators: [{
             type: Component,
@@ -259,15 +305,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     selector: 'dfk-field-input',
                     standalone: true,
                     imports: [NgIf, DynamicInput],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <dfk-dynamic-input
-      *ngIf="fieldDescription && renderInfos"
+      *ngIf="shouldRender"
       [type]="fieldDescription!.type"
       [value]="getFieldValue()"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
+      [description]="$any(fieldDescription!.description)"
       [options]="fieldDescription!.options"
       [className]="fieldDescription!.className"
       (valueChange)="
@@ -278,33 +325,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
     ></dfk-dynamic-input>
   `,
                 }]
-        }], propDecorators: { fieldDescription: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fieldDescription: [{
                 type: Input
-            }], renderInfos: [{
+            }], value: [{
                 type: Input
             }], onValueChangeField: [{
                 type: Output
             }] } });
 
+const DEFAULT_BREAKPOINT = 768;
 class MultiFieldInput {
+    cdr;
     fieldDescriptions = [];
     properties;
     onChange = new EventEmitter();
     layout = 'column';
     data = {};
     visibleFields = [];
+    isMobile = false;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    onWindowResize() {
+        const wasMobile = this.isMobile;
+        this.updateIsMobile();
+        if (wasMobile !== this.isMobile) {
+            this.cdr.markForCheck();
+        }
+    }
+    get resolvedLayout() {
+        if (typeof this.layout === 'object' && this.layout.type === 'responsive') {
+            return this.isMobile ? this.layout.mobile : this.layout.desktop;
+        }
+        return this.layout;
+    }
+    get resolvedLayoutType() {
+        const resolved = this.resolvedLayout;
+        return typeof resolved === 'string' ? resolved : resolved.type;
+    }
+    get gap() {
+        const resolved = this.resolvedLayout;
+        if (typeof resolved === 'object' && resolved.gap !== undefined) {
+            return resolved.gap;
+        }
+        return 12;
+    }
+    get columns() {
+        const resolved = this.resolvedLayout;
+        if (typeof resolved === 'object' && resolved.type === 'grid') {
+            return resolved.columns ?? 2;
+        }
+        return 2;
+    }
     trackByFn(index, field) {
         return field.name || index;
     }
+    trackByIndex(index) {
+        return index;
+    }
     ngOnInit() {
+        this.updateIsMobile();
         this.init();
     }
     ngOnChanges(_changes) {
         this.init();
     }
+    updateIsMobile() {
+        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;
+    }
     init() {
         if (this.properties) {
-            this.data = { ...this.properties };
+            this.data = applyComputedValues(this.fieldDescriptions, {
+                ...this.properties,
+            });
         }
         this.updateVisibleFields();
     }
@@ -312,52 +409,177 @@ class MultiFieldInput {
         this.visibleFields = this.fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(this.data));
     }
     onFieldChange(event) {
-        this.data = { ...this.data, [event.key]: event.value };
+        this.commitData({ ...this.data, [event.key]: event.value });
+    }
+    getItems(field) {
+        const value = this.data[field.name];
+        return Array.isArray(value) ? value : [];
+    }
+    canAddItem(field) {
+        return canAddGroupItem(field, this.getItems(field));
+    }
+    canRemoveItem(field) {
+        return canRemoveGroupItem(field, this.getItems(field));
+    }
+    onGroupItemAdd(field) {
+        if (!this.canAddItem(field)) {
+            return;
+        }
+        const items = this.getItems(field);
+        this.commitData({
+            ...this.data,
+            [field.name]: [...items, createGroupItem(field)],
+        });
+    }
+    onGroupItemRemove(field, index) {
+        if (!this.canRemoveItem(field)) {
+            return;
+        }
+        const items = this.getItems(field).filter((_, i) => i !== index);
+        this.commitData({ ...this.data, [field.name]: items });
+    }
+    onGroupItemChange(field, index, next) {
+        const items = this.getItems(field).slice();
+        items[index] = next;
+        this.commitData({ ...this.data, [field.name]: items });
+    }
+    commitData(nextData) {
+        this.data = applyComputedValues(this.fieldDescriptions, nextData);
         this.updateVisibleFields();
         this.onChange.emit(this.data);
+        this.cdr.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiFieldInput, deps: [], 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" }, usesOnChanges: true, ngImport: i0, template: `
+    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: `
     <div
-      class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50"
+      class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
-        'flex-row gap-3': layout === 'row',
-        'grid grid-cols-2 gap-3': layout === 'grid'
+        'flex flex-col': resolvedLayoutType === 'column',
+        'flex flex-row': resolvedLayoutType === 'row',
+        grid: resolvedLayoutType === 'grid'
       }"
+      [style.gap.px]="gap"
+      [style.gridTemplateColumns]="
+        resolvedLayoutType === 'grid' ? 'repeat(' + columns + ', 1fr)' : null
+      "
     >
-      <dfk-field-input
-        *ngFor="let field of visibleFields; trackBy: trackByFn"
-        [fieldDescription]="field"
-        [renderInfos]="data"
-        (onValueChangeField)="onFieldChange($event)"
-      ></dfk-field-input>
+      <ng-container *ngFor="let field of visibleFields; trackBy: trackByFn">
+        <dfk-field-input
+          *ngIf="!field.fields"
+          [fieldDescription]="field"
+          [value]="data[field.name]"
+          (onValueChangeField)="onFieldChange($event)"
+        ></dfk-field-input>
+
+        <div *ngIf="field.fields" [class]="field.className">
+          <div *ngIf="field.label">{{ field.label }}</div>
+          <div
+            *ngFor="
+              let item of getItems(field);
+              let i = index;
+              trackBy: trackByIndex
+            "
+            style="display: flex; align-items: flex-start; gap: 8px;"
+          >
+            <div style="flex: 1">
+              <dfk-multi-field-input
+                [fieldDescriptions]="field.fields"
+                [properties]="item"
+                (onChange)="onGroupItemChange(field, i, $event)"
+              ></dfk-multi-field-input>
+            </div>
+            <button
+              type="button"
+              (click)="onGroupItemRemove(field, i)"
+              [disabled]="!canRemoveItem(field)"
+            >
+              {{ field.removeLabel || 'Remove' }}
+            </button>
+          </div>
+          <button
+            type="button"
+            (click)="onGroupItemAdd(field)"
+            [disabled]="!canAddItem(field)"
+          >
+            {{ field.addLabel || 'Add' }}
+          </button>
+        </div>
+      </ng-container>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FieldInput, selector: "dfk-field-input", inputs: ["fieldDescription", "renderInfos"], outputs: ["onValueChangeField"] }] });
+  `, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MultiFieldInput, decorators: [{
             type: Component,
             args: [{
                     selector: 'dfk-multi-field-input',
                     standalone: true,
-                    imports: [NgClass, NgFor, FieldInput],
+                    // Repeatable field groups render a nested <dfk-multi-field-input> per item
+                    // (see the #groupTpl below), so this component imports itself. That's the
+                    // supported way to give a standalone component recursive template usage
+                    // without a cross-file circular import between FieldInput and a separate
+                    // group component (whose `imports` arrays are evaluated eagerly at module
+                    // load time and would deadlock on an actual circular module reference).
+                    imports: [NgClass, NgFor, NgIf, FieldInput, MultiFieldInput],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div
-      class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50"
+      class="p-4 border rounded-lg bg-gray-50"
       [ngClass]="{
-        'flex-row gap-3': layout === 'row',
-        'grid grid-cols-2 gap-3': layout === 'grid'
+        'flex flex-col': resolvedLayoutType === 'column',
+        'flex flex-row': resolvedLayoutType === 'row',
+        grid: resolvedLayoutType === 'grid'
       }"
+      [style.gap.px]="gap"
+      [style.gridTemplateColumns]="
+        resolvedLayoutType === 'grid' ? 'repeat(' + columns + ', 1fr)' : null
+      "
     >
-      <dfk-field-input
-        *ngFor="let field of visibleFields; trackBy: trackByFn"
-        [fieldDescription]="field"
-        [renderInfos]="data"
-        (onValueChangeField)="onFieldChange($event)"
-      ></dfk-field-input>
+      <ng-container *ngFor="let field of visibleFields; trackBy: trackByFn">
+        <dfk-field-input
+          *ngIf="!field.fields"
+          [fieldDescription]="field"
+          [value]="data[field.name]"
+          (onValueChangeField)="onFieldChange($event)"
+        ></dfk-field-input>
+
+        <div *ngIf="field.fields" [class]="field.className">
+          <div *ngIf="field.label">{{ field.label }}</div>
+          <div
+            *ngFor="
+              let item of getItems(field);
+              let i = index;
+              trackBy: trackByIndex
+            "
+            style="display: flex; align-items: flex-start; gap: 8px;"
+          >
+            <div style="flex: 1">
+              <dfk-multi-field-input
+                [fieldDescriptions]="field.fields"
+                [properties]="item"
+                (onChange)="onGroupItemChange(field, i, $event)"
+              ></dfk-multi-field-input>
+            </div>
+            <button
+              type="button"
+              (click)="onGroupItemRemove(field, i)"
+              [disabled]="!canRemoveItem(field)"
+            >
+              {{ field.removeLabel || 'Remove' }}
+            </button>
+          </div>
+          <button
+            type="button"
+            (click)="onGroupItemAdd(field)"
+            [disabled]="!canAddItem(field)"
+          >
+            {{ field.addLabel || 'Add' }}
+          </button>
+        </div>
+      </ng-container>
     </div>
   `,
                 }]
-        }], propDecorators: { fieldDescriptions: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fieldDescriptions: [{
                 type: Input
             }], properties: [{
                 type: Input
@@ -365,15 +587,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 type: Output
             }], layout: [{
                 type: Input
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 
+class LayoutRegistry {
+    layouts = new Map();
+    register(type, component) {
+        if (this.layouts.has(type)) {
+            console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
+        }
+        this.layouts.set(type, component);
+    }
+    get(type) {
+        return this.layouts.get(type);
+    }
+}
+const layoutRegistry = new LayoutRegistry();
+
 class ColumnLayout {
+    config;
+    template;
+    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", ngImport: i0, template: `<div
-    style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"
+    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
+    [style.display]="'flex'"
+    [style.flexDirection]="'column'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    <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: [{
             type: Component,
@@ -382,19 +628,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     template: `<div
-    style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"
+    [style.display]="'flex'"
+    [style.flexDirection]="'column'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
                 }]
-        }] });
+        }], propDecorators: { config: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
 class RowLayout {
+    config;
+    template;
+    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", ngImport: i0, template: `<div
-    style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"
+    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
+    [style.display]="'flex'"
+    [style.flexDirection]="'row'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    <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: [{
             type: Component,
@@ -403,19 +662,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     template: `<div
-    style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"
+    [style.display]="'flex'"
+    [style.flexDirection]="'row'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
                 }]
-        }] });
+        }], propDecorators: { config: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
 class GridLayout {
+    config;
+    template;
+    get columns() {
+        return this.config?.columns ?? 2;
+    }
+    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", ngImport: i0, template: `<div
-    style="display:grid;grid-template-columns:repeat(var(--dfk-columns,2),1fr);gap:var(--dfk-gap,12px)"
+    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
+    [style.display]="'grid'"
+    [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    <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: [{
             type: Component,
@@ -424,12 +699,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                     standalone: true,
                     imports: [CommonModule],
                     template: `<div
-    style="display:grid;grid-template-columns:repeat(var(--dfk-columns,2),1fr);gap:var(--dfk-gap,12px)"
+    [style.display]="'grid'"
+    [style.gridTemplateColumns]="'repeat(' + columns + ', 1fr)'"
+    [style.gap]="gap + 'px'"
   >
-    <ng-content></ng-content>
+    <ng-container *ngTemplateOutlet="template"></ng-container>
   </div>`,
                 }]
-        }] });
+        }], propDecorators: { config: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }] } });
+layoutRegistry.register('column', ColumnLayout);
+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 });
@@ -483,5 +767,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, MultiFieldInput, RowLayout };
+export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicInput, FieldInput, GridLayout, LayoutRegistry, MultiFieldInput, RowLayout, layoutRegistry };
 //# sourceMappingURL=dynamic-field-kit-angular.mjs.map