@3kles/kles-material-dynamicforms 22.0.3 → 22.1.0

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -3,7 +3,7 @@ import { signal, InjectionToken, inject, Component, Injector, Input, Directive,
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormArray, UntypedFormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
+import { Validators, FormControl, ReactiveFormsModule, FormsModule, UntypedFormGroup, FormArray, NG_VALUE_ACCESSOR, FormGroup } from '@angular/forms';
 import { concat, of, combineLatest, startWith, map as map$1, switchMap, Subject, Observable, defer, ReplaySubject, isObservable, takeUntil as takeUntil$1, timer, distinctUntilChanged as distinctUntilChanged$1, shareReplay as shareReplay$1 } from 'rxjs';
 import { tap, take, catchError, map, takeUntil, distinctUntilChanged, filter, switchMap as switchMap$1, startWith as startWith$1, shareReplay, debounceTime, debounce } from 'rxjs/operators';
 import * as i3 from '@angular/material/form-field';
@@ -11,7 +11,7 @@ import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel, MatSuffi
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption as MatOption$1 } from '@angular/material/core';
 import * as i2$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i4$2 from '@angular/material/button';
+import * as i2$2 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton } from '@angular/material/button';
 import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatSliderModule } from '@angular/material/slider';
@@ -64,7 +64,7 @@ import { parseColor, toCssRgba, readableTextColor, MaterialColorPickerTriggerCom
 import * as i3$3 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
-import * as i4$3 from '@3kles/kles-material-datepicker';
+import * as i4$2 from '@3kles/kles-material-datepicker';
 import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import { MatDividerModule } from '@angular/material/divider';
@@ -534,9 +534,9 @@ class MatErrorFormDirective {
         ...(ngDevMode ? [{ debugName: "validations" }] : /* istanbul ignore next */ []));
         this.asyncValidations = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asyncValidations" }] : /* istanbul ignore next */ []));
-        this.validationsKeys = computed(() => flattenValidators(this.validations()), /* @ts-ignore */
+        this.validationsKeys = computed(() => flattenValidators(this.validations() ?? []), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "validationsKeys" }] : /* istanbul ignore next */ []));
-        this.asyncValidationsKeys = computed(() => flattenValidators(this.asyncValidations()), /* @ts-ignore */
+        this.asyncValidationsKeys = computed(() => flattenValidators(this.asyncValidations() ?? []), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "asyncValidationsKeys" }] : /* istanbul ignore next */ []));
         this.formErrors = toSignal(toObservable(this.form).pipe(switchMap((form) => form.statusChanges.pipe(startWith(form.status), map$1(() => form.errors)))), { initialValue: null });
     }
@@ -555,13 +555,11 @@ class MatErrorFormDirective {
                 }
             }
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] }); }
+    `, isInline: true, styles: [":host{overflow-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MatErrorFormDirective, decorators: [{
             type: Component,
-            args: [{
-                    selector: '[matErrorForm]',
-                    template: `
+            args: [{ selector: '[matErrorForm]', template: `
         @if (formErrors()) {
             @for (validation of validationsKeys(); track validation.name) {
                 @if (form().hasError(validation.name) && validation.message) {
@@ -575,10 +573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }
             }
         }
-    `,
-                    standalone: true,
-                    imports: [ReactiveFormsModule, FormsModule],
-                }]
+    `, standalone: true, imports: [ReactiveFormsModule, FormsModule], styles: [":host{overflow-wrap:break-word}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], validations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validations", required: false }] }], asyncValidations: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncValidations", required: false }] }] } });
 
 class KlesFormErrorStateMatcher {
@@ -1622,13 +1617,11 @@ class MatErrorMessageDirective {
                 }
             }
         }
-    `, isInline: true }); }
+    `, isInline: true, styles: [":host{overflow-wrap:break-word}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MatErrorMessageDirective, decorators: [{
             type: Component,
-            args: [{
-                    selector: '[matErrorMessage]',
-                    template: `
+            args: [{ selector: '[matErrorMessage]', template: `
         @if (errors(); as errors) {
             @for (validation of validationsKeys(); track validation.name) {
                 @if (errors[validation.name] && validation.message) {
@@ -1642,9 +1635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                 }
             }
         }
-    `,
-                    standalone: true,
-                }]
+    `, standalone: true, styles: [":host{overflow-wrap:break-word}\n"] }]
         }], propDecorators: { validations: [{ type: i0.Input, args: [{ isSignal: true, alias: "validations", required: false }] }], asyncValidations: [{ type: i0.Input, args: [{ isSignal: true, alias: "asyncValidations", required: false }] }] } });
 
 class KlesDynamicFormIntl {
@@ -1653,7 +1644,10 @@ class KlesDynamicFormIntl {
         this.selectAll = 'Select all';
         this.clearSearch = 'Clear';
         this.search = 'Search';
+        this.add = 'Add';
+        this.delete = 'Delete';
         this.copy = 'Copied value';
+        this.empty = 'No items';
         this.imageUploadChange = 'Change image';
         this.imageUploadDelete = 'Delete';
         this.imageUploadInvalidType = 'Unsupported image format.';
@@ -2089,50 +2083,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckbox, MatTooltip, KlesFocusTargetDirective] }]
         }], propDecorators: { checkbox: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatCheckbox), { isSignal: true }] }] } });
 
+function createKlesFormArrayGroup(field, ref, value) {
+    const line = {
+        ...(value ?? {}),
+        _id: value?._id ?? v4(),
+    };
+    const group = new UntypedFormGroup({
+        _id: new FormControl(line._id),
+    });
+    for (const subfield of field.collections ?? []) {
+        const data = line[subfield.name];
+        const childField = {
+            ...subfield,
+            ...(data !== undefined ? { value: data } : {}),
+        };
+        let control;
+        if (subfield.type) {
+            control = componentMapper.find((c) => c.type === subfield.type)?.factory(childField, ref) ?? klesFieldControlFactory(childField, ref);
+        }
+        else {
+            control = componentMapper.find((c) => c.component === subfield.component)?.factory(childField, ref) ?? klesFieldControlFactory(childField, ref);
+        }
+        group.addControl(subfield.name, control);
+    }
+    return group;
+}
+
 class KlesFormArray extends KlesFormControl {
     create() {
         const array = new FormArray([], {
             validators: this.bindValidations(this.field.validations || []),
             asyncValidators: this.bindAsyncValidations(this.field.asyncValidations || []),
-            updateOn: this.field.updateOn || 'change'
+            updateOn: this.field.updateOn || 'change',
         });
-        if (this.field.value && Array.isArray(this.field.value)) {
-            if (this.field.collections && Array.isArray(this.field.collections)) {
-                this.field.value.forEach(val => {
-                    const line = { ...val, _id: val?._id || v4() };
-                    const group = new UntypedFormGroup({ _id: new FormControl(line._id) });
-                    this.field.collections?.forEach(subfield => {
-                        const data = line[subfield.name] || null;
-                        let control;
-                        if (subfield.type) {
-                            control = componentMapper.find(c => c.type === subfield.type)?.factory({ ...subfield, ...(data && { value: data }) }, this.ref)
-                                || klesFieldControlFactory({ ...subfield, ...(data && { value: data }) }, this.ref);
-                        }
-                        else {
-                            control = componentMapper.find(c => c.component === subfield.component)?.factory({ ...subfield, ...(data && { value: data }) }, this.ref)
-                                || klesFieldControlFactory({ ...subfield, ...(data && { value: data }) }, this.ref);
-                        }
-                        group.addControl(subfield.name, control);
-                    });
-                    array.push(group);
-                });
+        if (Array.isArray(this.field.value)) {
+            for (const value of this.field.value) {
+                array.push(createKlesFormArrayGroup(this.field, this.ref, value));
             }
         }
         else {
-            const group = new UntypedFormGroup({ _id: new FormControl(v4()) });
-            this.field.collections?.forEach(subfield => {
-                let control;
-                if (subfield.type) {
-                    control = componentMapper.find(c => c.type === subfield.type)?.factory({ ...subfield }, this.ref)
-                        || klesFieldControlFactory({ ...subfield }, this.ref);
-                }
-                else {
-                    control = componentMapper.find(c => c.component === subfield.component)?.factory({ ...subfield }, this.ref)
-                        || klesFieldControlFactory({ ...subfield }, this.ref);
-                }
-                group.addControl(subfield.name, control);
-            });
-            array.push(group);
+            array.push(createKlesFormArrayGroup(this.field, this.ref));
         }
         if (this.field.disabled) {
             array.disable();
@@ -2143,98 +2133,112 @@ class KlesFormArray extends KlesFormControl {
 
 let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFieldAbstract {
     constructor() {
-        super(...arguments);
+        super();
+        this.intl = inject(KlesDynamicFormIntl);
         this.collections = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "collections" }] : /* istanbul ignore next */ []));
-        this.fb = inject(UntypedFormBuilder);
-    }
-    ngOnInit() {
         this.formArray = this.group.controls[this.field.name];
         this.collections.set(this.formArray.controls.map(() => {
-            return this.field.collections ? cloneDeep(this.field.collections) : [];
+            return cloneDeep(this.field.collections ?? []);
         }));
+    }
+    ngOnInit() {
         super.ngOnInit();
     }
-    createFormGroup() {
-        const group = this.fb.group({});
-        this.field.collections?.forEach((item) => {
-            const control = this.fb.control(null, this.bindValidations(item.validations || []), this.bindAsyncValidations(item.asyncValidations || []));
-            group.addControl(item.name, control);
-        });
-        return group;
+    get hasLayout() {
+        return (this.field.collections ?? []).some((subfield) => subfield.layout != null);
+    }
+    get fieldsDirection() {
+        if (this.hasLayout) {
+            return this.field.direction === 'inline-grid' ? 'inline-grid' : 'grid';
+        }
+        return this.field.direction ?? 'row';
     }
     deleteField(index) {
-        this.collections.update((collections) => collections.filter((_, currentIndex) => currentIndex !== index));
         this.formArray.removeAt(index);
+        this.collections.update((collections) => collections.filter((_, currentIndex) => currentIndex !== index));
     }
     addField() {
-        const collection = this.field.collections ? cloneDeep(this.field.collections) : [];
-        this.collections.update((collections) => [...collections, collection]);
-        this.formArray.push(this.createFormGroup());
+        this.formArray.push(createKlesFormArrayGroup(this.field));
+        this.collections.update((collections) => [...collections, cloneDeep(this.field.collections ?? [])]);
     }
-    bindValidations(validations) {
-        if (validations.length > 0) {
-            const validList = [];
-            validations.forEach((valid) => {
-                validList.push(valid.validator);
-            });
-            return Validators.compose(validList);
-        }
-        return null;
+    ngOnDestroy() {
+        super.ngOnDestroy();
     }
-    bindAsyncValidations(validations) {
-        if (validations.length > 0) {
-            const validList = [];
-            validations.forEach((valid) => {
-                validList.push(valid.validator);
-            });
-            return Validators.composeAsync(validList);
+    getGridColumn(field) {
+        const colSpan = field.layout?.colSpan ?? 12;
+        const colStart = field.layout?.colStart;
+        if (colStart) {
+            return `${colStart} / span ${colSpan}`;
         }
-        return null;
+        return `span ${colSpan}`;
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    getGridRow(field) {
+        const rowSpan = field.layout?.rowSpan;
+        const rowStart = field.layout?.rowStart;
+        if (rowStart && rowSpan) {
+            return `${rowStart} / span ${rowSpan}`;
+        }
+        if (rowStart) {
+            return `${rowStart}`;
+        }
+        if (rowSpan) {
+            return `span ${rowSpan}`;
+        }
+        return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesFormListFieldComponent, isStandalone: true, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
-        <div [formGroup]="group" class="form-element">
-            <div class="label">
-                {{ label() }}
-                <button matIconButton color="primary" (click)="addField()">
+        <div [formGroup]="group" class="form-element list-field">
+            <div class="list-field__header">
+                @if (label()) {
+                    <span class="list-field__label">
+                        {{ label() }}
+                    </span>
+                }
+
+                <button type="button" matButton class="list-field__add" (click)="addField()">
                     <mat-icon>add</mat-icon>
+                    {{ intl.add }}
                 </button>
             </div>
 
-            <div class="dynamic-form" [formGroupName]="field.name">
-                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
-                    <div class="subfields">
-                        @for (subfield of collections()[idx]; track subfield.name) {
-                            <ng-container klesDynamicField [field]="subfield" [group]="$any(subGroup)" [siblingFields]="collections()[idx]" [context]="context"> </ng-container>
-                        }
-                        @if (collections()[idx]) {
-                            <button matIconButton (click)="deleteField(idx)" color="primary">
-                                <mat-icon>delete_outlined</mat-icon>
-                            </button>
-                        }
+            <div class="list-field__content" [formArrayName]="field.name">
+                @for (subGroup of formArray.controls; track subGroup; let idx = $index) {
+                    <div class="list-field__row">
+                        <div
+                            class="list-field__fields"
+                            [class.list-field__fields--column]="fieldsDirection === 'column'"
+                            [class.list-field__fields--row]="fieldsDirection === 'row'"
+                            [class.list-field__fields--grid]="fieldsDirection === 'grid'"
+                            [class.list-field__fields--inline-grid]="fieldsDirection === 'inline-grid'"
+                            [class.list-field__fields--nowrap]="fieldsDirection === 'row' && field.wrap === false"
+                        >
+                            @for (subfield of collections()[idx]; track subfield.name) {
+                                <div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
+                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
+                                </div>
+                            }
+                        </div>
+
+                        <button type="button" matIconButton class="list-field__delete" [attr.aria-label]="intl.delete" (click)="deleteField(idx)">
+                            <mat-icon>delete_outline</mat-icon>
+                        </button>
                     </div>
                 }
-                @for (validation of field.validations; track validation.name) {
-                    <ng-container ngProjectAs="mat-error">
-                        @if (validation.name && group.controls[field.name].hasError(validation.name)) {
-                            <mat-error>{{ validation.message }}</mat-error>
-                        }
-                    </ng-container>
-                }
-                @for (validation of field.asyncValidations; track validation.name) {
-                    <ng-container ngProjectAs="mat-error">
-                        @if (validation.name && group.controls[field.name].hasError(validation.name)) {
-                            <mat-error>{{ validation.message }}</mat-error>
-                        }
-                    </ng-container>
+
+                @if (formArray.length === 0) {
+                    <div class="list-field__empty">
+                        {{ intl.empty }}
+                    </div>
                 }
             </div>
+
+            <div class="list-field__errors">
+                <mat-error matErrorForm [form]="formArray" [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
+            </div>
         </div>
-    `, isInline: true, styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: [":host{display:block;width:100%;min-width:0}.list-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.list-field__header{display:flex;align-items:center;gap:8px;min-height:36px}.list-field__label{min-width:0;font-weight:500}.list-field__add{margin-left:auto;flex-shrink:0}.list-field__content{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.list-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;width:100%;min-width:0}.list-field__fields{width:100%;min-width:0}.list-field__fields--column{display:flex;flex-direction:column;gap:10px}.list-field__fields--column>.list-field__field{width:100%}.list-field__fields--row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px}.list-field__fields--row>.list-field__field{flex:1 1 0;width:auto;min-width:0}.list-field__fields--row.list-field__fields--nowrap{flex-wrap:nowrap}.list-field__fields--grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__fields--inline-grid{display:inline-grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__field{width:100%;min-width:0}.list-field__delete{align-self:start;margin-top:4px;flex-shrink:0}.list-field__empty{padding:16px;text-align:center;opacity:.7}.list-field__errors{display:flex;flex-direction:column;gap:4px;min-width:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "ui", "siblingFields", "context"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatErrorFormDirective, selector: "[matErrorForm]", inputs: ["form", "validations", "asyncValidations"] }] }); }
 };
 KlesFormListFieldComponent = __decorate([
     FieldMapper({ type: 'listfield', factory: (field) => new KlesFormArray(field).create() })
@@ -2242,45 +2246,57 @@ KlesFormListFieldComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-listfield', template: `
-        <div [formGroup]="group" class="form-element">
-            <div class="label">
-                {{ label() }}
-                <button matIconButton color="primary" (click)="addField()">
+        <div [formGroup]="group" class="form-element list-field">
+            <div class="list-field__header">
+                @if (label()) {
+                    <span class="list-field__label">
+                        {{ label() }}
+                    </span>
+                }
+
+                <button type="button" matButton class="list-field__add" (click)="addField()">
                     <mat-icon>add</mat-icon>
+                    {{ intl.add }}
                 </button>
             </div>
 
-            <div class="dynamic-form" [formGroupName]="field.name">
-                @for (subGroup of formArray.controls; track subGroup.value._id; let idx = $index) {
-                    <div class="subfields">
-                        @for (subfield of collections()[idx]; track subfield.name) {
-                            <ng-container klesDynamicField [field]="subfield" [group]="$any(subGroup)" [siblingFields]="collections()[idx]" [context]="context"> </ng-container>
-                        }
-                        @if (collections()[idx]) {
-                            <button matIconButton (click)="deleteField(idx)" color="primary">
-                                <mat-icon>delete_outlined</mat-icon>
-                            </button>
-                        }
+            <div class="list-field__content" [formArrayName]="field.name">
+                @for (subGroup of formArray.controls; track subGroup; let idx = $index) {
+                    <div class="list-field__row">
+                        <div
+                            class="list-field__fields"
+                            [class.list-field__fields--column]="fieldsDirection === 'column'"
+                            [class.list-field__fields--row]="fieldsDirection === 'row'"
+                            [class.list-field__fields--grid]="fieldsDirection === 'grid'"
+                            [class.list-field__fields--inline-grid]="fieldsDirection === 'inline-grid'"
+                            [class.list-field__fields--nowrap]="fieldsDirection === 'row' && field.wrap === false"
+                        >
+                            @for (subfield of collections()[idx]; track subfield.name) {
+                                <div class="list-field__field" [style.grid-column]="getGridColumn(subfield)" [style.grid-row]="getGridRow(subfield)">
+                                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections()[idx]" [context]="context" />
+                                </div>
+                            }
+                        </div>
+
+                        <button type="button" matIconButton class="list-field__delete" [attr.aria-label]="intl.delete" (click)="deleteField(idx)">
+                            <mat-icon>delete_outline</mat-icon>
+                        </button>
                     </div>
                 }
-                @for (validation of field.validations; track validation.name) {
-                    <ng-container ngProjectAs="mat-error">
-                        @if (validation.name && group.controls[field.name].hasError(validation.name)) {
-                            <mat-error>{{ validation.message }}</mat-error>
-                        }
-                    </ng-container>
-                }
-                @for (validation of field.asyncValidations; track validation.name) {
-                    <ng-container ngProjectAs="mat-error">
-                        @if (validation.name && group.controls[field.name].hasError(validation.name)) {
-                            <mat-error>{{ validation.message }}</mat-error>
-                        }
-                    </ng-container>
+
+                @if (formArray.length === 0) {
+                    <div class="list-field__empty">
+                        {{ intl.empty }}
+                    </div>
                 }
             </div>
+
+            <div class="list-field__errors">
+                <mat-error matErrorForm [form]="formArray" [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
+            </div>
         </div>
-    `, standalone: true, imports: [MatError, MatIcon, MatIconButton, KlesDynamicFieldDirective, ReactiveFormsModule], styles: [".subfields{display:flex;flex-direction:row;gap:5px}\n", ".label{display:flex;align-items:center;flex-direction:row;gap:5px}\n"] }]
-        }] });
+    `, standalone: true, imports: [MatError, MatIcon, MatIconButton, KlesDynamicFieldDirective, ReactiveFormsModule, MatButtonModule, MatErrorFormDirective], styles: [":host{display:block;width:100%;min-width:0}.list-field{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}.list-field__header{display:flex;align-items:center;gap:8px;min-height:36px}.list-field__label{min-width:0;font-weight:500}.list-field__add{margin-left:auto;flex-shrink:0}.list-field__content{display:flex;flex-direction:column;gap:10px;width:100%;min-width:0}.list-field__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;width:100%;min-width:0}.list-field__fields{width:100%;min-width:0}.list-field__fields--column{display:flex;flex-direction:column;gap:10px}.list-field__fields--column>.list-field__field{width:100%}.list-field__fields--row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:10px}.list-field__fields--row>.list-field__field{flex:1 1 0;width:auto;min-width:0}.list-field__fields--row.list-field__fields--nowrap{flex-wrap:nowrap}.list-field__fields--grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__fields--inline-grid{display:inline-grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.list-field__field{width:100%;min-width:0}.list-field__delete{align-self:start;margin-top:4px;flex-shrink:0}.list-field__empty{padding:16px;text-align:center;opacity:.7}.list-field__errors{display:flex;flex-direction:column;gap:4px;min-width:0}\n"] }]
+        }], ctorParameters: () => [] });
 
 class KlesFormColorComponent extends KlesFieldAbstract {
     constructor() {
@@ -4253,7 +4269,7 @@ class KlesFabComponent extends KlesButtonBase {
                     <mat-icon [svgIcon]="iconSvg"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFabComponent, decorators: [{
             type: Component,
@@ -4357,7 +4373,7 @@ class KlesMiniFabComponent extends KlesButtonBase {
                     <mat-icon [svgIcon]="iconSvg"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesMiniFabComponent, decorators: [{
             type: Component,
@@ -4450,7 +4466,7 @@ class KlesIconButtonComponent extends KlesButtonBase {
             <mat-icon [svgIcon]="iconSvg"></mat-icon>
             }
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesIconButtonComponent, decorators: [{
             type: Component,
@@ -4647,7 +4663,7 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
                 }
             </mat-selection-list>
         </div>
-    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormSelectionListSearchComponent, decorators: [{
             type: Component,
@@ -4831,7 +4847,7 @@ class KlesFormDateTimeComponent extends KlesFieldAbstract {
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$3.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$2.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
             type: Component,
@@ -4900,7 +4916,7 @@ class KlesFormCopyComponent {
         <button #tooltip="matTooltip" matIconButton color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
             <mat-icon>content_copy</mat-icon>
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
             type: Component,
@@ -5017,7 +5033,7 @@ let KlesFormActionMenuComponent = class KlesFormActionMenuComponent extends Kles
                 </button>
             }
         </mat-menu>
-    `, isInline: true, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 KlesFormActionMenuComponent = __decorate([
     FieldMapper({