@dynamic-field-kit/angular 1.2.4 → 1.2.10

package/{fesm2020 → dist/fesm2022}/dynamic-field-kit-angular.mjs

@@ -1,210 +1,240 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, SimpleChange, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, SimpleChange, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
 import { CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
 import { fieldRegistry } from '@dynamic-field-kit/core';
 export { fieldRegistry } from '@dynamic-field-kit/core';
 
-class BaseInputComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        // Add more from mplis as needed
-        this.valueChange = new EventEmitter();
-    }
-}
-BaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BaseInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BaseInputComponent, 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: ''
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                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
+class BaseInputComponent {
+    cdr;
+    value;
+    label;
+    placeholder;
+    required;
+    disabled;
+    options;
+    className;
+    description;
+    errorMessage;
+    acceptFile;
+    maxLength;
+    minNumber;
+    maxNumber;
+    // Add more from mplis as needed
+    valueChange = new EventEmitter();
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: BaseInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: '',
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                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
             }] } });
 
-class DynamicInput extends BaseInputComponent {
-    constructor() {
-        super(...arguments);
-        this.valueChange = new EventEmitter();
-        this.onChange = new EventEmitter(); // backward compat
-    }
-    ngOnChanges(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) {
-            this.render();
-        }
-    }
-    ngAfterViewInit() {
-        this.render();
-    }
-    render() {
-        const Renderer = fieldRegistry.get(this.type);
-        this.cleanupRenderedComponent();
-        this.host.clear();
-        if (!Renderer) {
-            const el = document.createElement("div");
-            el.textContent = `Unknown field type: ${this.type}`;
-            this.host.element.nativeElement.appendChild(el);
-            return;
-        }
-        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);
-            this.bindOutput(instance, "valueChange");
-            this.bindOutput(instance, "onValueChange");
-            instance.changeDetectorRef?.detectChanges();
-            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) {
-                const el = document.createElement('div');
-                el.textContent = `Failed to render field: ${this.type}`;
-                this.host.element.nativeElement.appendChild(el);
-            }
-        }
-    }
-    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];
-            }
-        }
-    }
-    bindOutput(instance, outputName) {
-        const output = instance?.[outputName];
-        if (!output || typeof output.subscribe !== "function")
-            return;
-        output.subscribe((value) => {
-            this.emitValue(value);
-        });
-    }
-    emitValue(value) {
-        this.valueChange.emit(value);
-        this.onChange.emit(value);
-    }
-    cleanupRenderedComponent() {
-        this.compRef?.destroy();
-        this.compRef = undefined;
-        this.inputInstance = undefined;
-    }
-}
-DynamicInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DynamicInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DynamicInput, isStandalone: true, selector: "dfk-dynamic-input", inputs: { type: "type", value: "value", label: "label", placeholder: "placeholder", required: "required", options: "options", className: "className", description: "description" }, 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 }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-dynamic-input",
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `<div #host style="display: contents;"></div>`,
-                }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], valueChange: [{
-                type: Output
-            }], onChange: [{
-                type: Output
-            }], host: [{
-                type: ViewChild,
-                args: ["host", { read: ViewContainerRef, static: false }]
+class DynamicInput extends BaseInputComponent {
+    type;
+    valueChange = new EventEmitter();
+    onChange = new EventEmitter(); // backward compat
+    host;
+    compRef;
+    inputInstance;
+    subscriptions = [];
+    ngOnChanges(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) {
+            this.render();
+        }
+    }
+    ngAfterViewInit() {
+        this.render();
+    }
+    ngOnDestroy() {
+        this.cleanupSubscriptions();
+        this.cleanupRenderedComponent();
+    }
+    cleanupSubscriptions() {
+        this.subscriptions.forEach((s) => s.unsubscribe());
+        this.subscriptions = [];
+    }
+    render() {
+        const Renderer = fieldRegistry.get(this.type);
+        this.cleanupRenderedComponent();
+        this.cleanupSubscriptions();
+        this.host.clear();
+        if (!Renderer) {
+            const el = document.createElement('div');
+            el.textContent = `Unknown field type: ${this.type}`;
+            this.host.element.nativeElement.appendChild(el);
+            return;
+        }
+        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);
+            }
+            instance.changeDetectorRef?.detectChanges();
+            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) {
+                const el = document.createElement('div');
+                el.textContent = `Failed to render field: ${this.type}`;
+                this.host.element.nativeElement.appendChild(el);
+            }
+        }
+    }
+    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];
+            }
+        }
+    }
+    bindOutput(instance, outputName) {
+        const output = instance?.[outputName];
+        if (!output || typeof output.subscribe !== 'function') {
+            return;
+        }
+        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;
+    }
+    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 }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-dynamic-input',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<div #host style="display: contents;"></div>`,
+                }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], host: [{
+                type: ViewChild,
+                args: ['host', { read: ViewContainerRef, static: false }]
             }] } });
 
-class FieldInput {
-    constructor() {
-        this.onValueChangeField = new EventEmitter();
-    }
-    getFieldValue() {
-        if (!this.fieldDescription || !this.renderInfos)
-            return undefined;
-        const value = this.renderInfos[this.fieldDescription.name];
-        if (value === undefined && this.fieldDescription.type === "text") {
-            return "";
-        }
-        return value;
-    }
-}
-FieldInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FieldInput, isStandalone: true, selector: "dfk-field-input", inputs: { fieldDescription: "fieldDescription", renderInfos: "renderInfos" }, outputs: { onValueChangeField: "onValueChangeField" }, ngImport: i0, template: `
+class FieldInput {
+    fieldDescription;
+    renderInfos;
+    onValueChangeField = new EventEmitter();
+    getFieldValue() {
+        if (!this.fieldDescription || !this.renderInfos) {
+            return undefined;
+        }
+        const value = this.renderInfos[this.fieldDescription.name];
+        if (value === undefined && this.fieldDescription.type === 'text') {
+            return '';
+        }
+        return 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: `
     <dfk-dynamic-input
       *ngIf="fieldDescription && renderInfos"
       [type]="fieldDescription!.type"
@@ -212,20 +242,23 @@ FieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "1
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
-      [options]="fieldDescription!.options"
-      [className]="fieldDescription!.className"
-      (valueChange)="onValueChangeField.emit({ value: $event, key: fieldDescription!.name })"
-      [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", "value", "label", "placeholder", "required", "options", "className", "description"], outputs: ["valueChange", "onChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FieldInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-field-input",
-                    standalone: true,
-                    imports: [NgIf, DynamicInput],
+      [description]="fieldDescription!.description"
+      [options]="fieldDescription!.options"
+      [className]="fieldDescription!.className"
+      (valueChange)="
+        onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
+      "
+      [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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FieldInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-field-input',
+                    standalone: true,
+                    imports: [NgIf, DynamicInput],
                     template: `
     <dfk-dynamic-input
       *ngIf="fieldDescription && renderInfos"
@@ -234,60 +267,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
-      [options]="fieldDescription!.options"
-      [className]="fieldDescription!.className"
-      (valueChange)="onValueChangeField.emit({ value: $event, key: fieldDescription!.name })"
-      [disabled]="false"
-      [errorMessage]="''"
-    ></dfk-dynamic-input>
-  `,
-                }]
-        }], propDecorators: { fieldDescription: [{
-                type: Input
-            }], renderInfos: [{
-                type: Input
-            }], onValueChangeField: [{
-                type: Output
+      [description]="fieldDescription!.description"
+      [options]="fieldDescription!.options"
+      [className]="fieldDescription!.className"
+      (valueChange)="
+        onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
+      "
+      [disabled]="false"
+      [errorMessage]="''"
+    ></dfk-dynamic-input>
+  `,
+                }]
+        }], propDecorators: { fieldDescription: [{
+                type: Input
+            }], renderInfos: [{
+                type: Input
+            }], onValueChangeField: [{
+                type: Output
             }] } });
 
-class MultiFieldInput {
-    constructor() {
-        this.fieldDescriptions = [];
-        this.onChange = new EventEmitter();
-        this.layout = "column";
-        this.data = {};
-        this.visibleFields = [];
-    }
-    trackByFn(index, field) {
-        return field.name || index;
-    }
-    ngOnInit() {
-        this.init();
-    }
-    ngOnChanges(_changes) {
-        this.init();
-    }
-    init() {
-        if (this.properties)
-            this.data = { ...this.properties };
-        this.updateVisibleFields();
-    }
-    updateVisibleFields() {
-        this.visibleFields = this.fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(this.data));
-    }
-    onFieldChange(event) {
-        this.data = { ...this.data, [event.key]: event.value };
-        this.updateVisibleFields();
-        this.onChange.emit(this.data);
-    }
-}
-MultiFieldInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiFieldInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiFieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MultiFieldInput, isStandalone: true, selector: "dfk-multi-field-input", inputs: { fieldDescriptions: "fieldDescriptions", properties: "properties", layout: "layout" }, outputs: { onChange: "onChange" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50" [ngClass]="{
-      'flex-row gap-3': layout === 'row',
-      'grid grid-cols-2 gap-3': layout === 'grid'
-    }">
+class MultiFieldInput {
+    fieldDescriptions = [];
+    properties;
+    onChange = new EventEmitter();
+    layout = 'column';
+    data = {};
+    visibleFields = [];
+    trackByFn(index, field) {
+        return field.name || index;
+    }
+    ngOnInit() {
+        this.init();
+    }
+    ngOnChanges(_changes) {
+        this.init();
+    }
+    init() {
+        if (this.properties) {
+            this.data = { ...this.properties };
+        }
+        this.updateVisibleFields();
+    }
+    updateVisibleFields() {
+        this.visibleFields = this.fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(this.data));
+    }
+    onFieldChange(event) {
+        this.data = { ...this.data, [event.key]: event.value };
+        this.updateVisibleFields();
+        this.onChange.emit(this.data);
+    }
+    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: `
+    <div
+      class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50"
+      [ngClass]="{
+        'flex-row gap-3': layout === 'row',
+        'grid grid-cols-2 gap-3': layout === 'grid'
+      }"
+    >
       <dfk-field-input
         *ngFor="let field of visibleFields; trackBy: trackByFn"
         [fieldDescription]="field"
@@ -295,18 +332,22 @@ MultiFieldInput.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versio
         (onValueChangeField)="onFieldChange($event)"
       ></dfk-field-input>
     </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiFieldInput, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-multi-field-input",
-                    standalone: true,
-                    imports: [NgClass, NgFor, FieldInput],
+  `, 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"] }] });
+}
+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],
                     template: `
-    <div class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50" [ngClass]="{
-      'flex-row gap-3': layout === 'row',
-      'grid grid-cols-2 gap-3': layout === 'grid'
-    }">
+    <div
+      class="flex flex-col gap-3 p-4 border rounded-lg bg-gray-50"
+      [ngClass]="{
+        'flex-row gap-3': layout === 'row',
+        'grid grid-cols-2 gap-3': layout === 'grid'
+      }"
+    >
       <dfk-field-input
         *ngFor="let field of visibleFields; trackBy: trackByFn"
         [fieldDescription]="field"
@@ -314,76 +355,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         (onValueChangeField)="onFieldChange($event)"
       ></dfk-field-input>
     </div>
-  `,
-                }]
-        }], propDecorators: { fieldDescriptions: [{
-                type: Input
-            }], properties: [{
-                type: Input
-            }], onChange: [{
-                type: Output
-            }], layout: [{
-                type: Input
+  `,
+                }]
+        }], propDecorators: { fieldDescriptions: [{
+                type: Input
+            }], properties: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], layout: [{
+                type: Input
             }] } });
 
-class ColumnLayout {
-}
-ColumnLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnLayout, isStandalone: true, selector: "dfk-column-layout", ngImport: i0, template: `<div style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"><ng-content></ng-content></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-column-layout",
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `<div style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"><ng-content></ng-content></div>`,
-                }]
-        }] });
-class RowLayout {
-}
-RowLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RowLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RowLayout, isStandalone: true, selector: "dfk-row-layout", ngImport: i0, template: `<div style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"><ng-content></ng-content></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RowLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-row-layout",
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `<div style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"><ng-content></ng-content></div>`,
-                }]
-        }] });
-class GridLayout {
-}
-GridLayout.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GridLayout.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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)"><ng-content></ng-content></div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GridLayout, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "dfk-grid-layout",
-                    standalone: true,
-                    imports: [CommonModule],
-                    template: `<div style="display:grid;grid-template-columns:repeat(var(--dfk-columns,2),1fr);gap:var(--dfk-gap,12px)"><ng-content></ng-content></div>`,
-                }]
+class ColumnLayout {
+    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)"
+  >
+    <ng-content></ng-content>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ColumnLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-column-layout',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<div
+    style="display:flex;flex-direction:column;gap:var(--dfk-gap,12px)"
+  >
+    <ng-content></ng-content>
+  </div>`,
+                }]
+        }] });
+class RowLayout {
+    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)"
+  >
+    <ng-content></ng-content>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: RowLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-row-layout',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<div
+    style="display:flex;flex-direction:row;gap:var(--dfk-gap,12px)"
+  >
+    <ng-content></ng-content>
+  </div>`,
+                }]
+        }] });
+class GridLayout {
+    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)"
+  >
+    <ng-content></ng-content>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: GridLayout, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dfk-grid-layout',
+                    standalone: true,
+                    imports: [CommonModule],
+                    template: `<div
+    style="display:grid;grid-template-columns:repeat(var(--dfk-columns,2),1fr);gap:var(--dfk-gap,12px)"
+  >
+    <ng-content></ng-content>
+  </div>`,
+                }]
         }] });
 
-class DynamicFieldKitModule {
-}
-DynamicFieldKitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DynamicFieldKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule, DynamicInput, FieldInput, MultiFieldInput, ColumnLayout, RowLayout, GridLayout], exports: [DynamicInput, FieldInput, MultiFieldInput, ColumnLayout, RowLayout, GridLayout] });
-DynamicFieldKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule, DynamicInput, FieldInput, MultiFieldInput, ColumnLayout, RowLayout, GridLayout] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, DynamicInput, FieldInput, MultiFieldInput, ColumnLayout, RowLayout, GridLayout],
-                    exports: [DynamicInput, FieldInput, MultiFieldInput, ColumnLayout, RowLayout, 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,
+            DynamicInput,
+            FieldInput,
+            MultiFieldInput,
+            ColumnLayout,
+            RowLayout,
+            GridLayout], exports: [DynamicInput,
+            FieldInput,
+            MultiFieldInput,
+            ColumnLayout,
+            RowLayout,
+            GridLayout] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, imports: [CommonModule,
+            DynamicInput,
+            FieldInput,
+            MultiFieldInput,
+            ColumnLayout,
+            RowLayout,
+            GridLayout] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DynamicFieldKitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        DynamicInput,
+                        FieldInput,
+                        MultiFieldInput,
+                        ColumnLayout,
+                        RowLayout,
+                        GridLayout,
+                    ],
+                    exports: [
+                        DynamicInput,
+                        FieldInput,
+                        MultiFieldInput,
+                        ColumnLayout,
+                        RowLayout,
+                        GridLayout,
+                    ],
+                }]
         }] });
 
-// public-api.ts
+// public-api.ts
 // Components
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { BaseInputComponent, ColumnLayout, DynamicFieldKitModule, DynamicInput, FieldInput, GridLayout, MultiFieldInput, RowLayout };