@3kles/kles-material-dynamicforms 17.4.3 → 17.6.0

package/esm2022/lib/fields/clear.component.mjs

@@ -7,15 +7,15 @@ export class KlesFormClearComponent {
         event.stopPropagation();
         this.group.controls[this.field.name].reset();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: KlesFormClearComponent, selector: "kles-form-clear", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KlesFormClearComponent, selector: "kles-form-clear", ngImport: i0, template: `
     <button [disabled]="!group.get(field.name).value || group.get(field.name).disabled" mat-icon-button aria-label="Clear" type="button"
         (click)="clear($event)">
         <mat-icon>close</mat-icon>
     </button>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormClearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormClearComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kles-form-clear',

package/esm2022/lib/fields/color.component.mjs

@@ -73,8 +73,8 @@ export class KlesFormColorComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormColorComponent, selector: "kles-form-color", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormColorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormColorComponent, selector: "kles-form-color", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" class="form-element"
     [colorPicker]="group.get(field.name).value"
     (colorPickerChange)="group.get(field.name).setValue($event)"
@@ -114,7 +114,7 @@ export class KlesFormColorComponent extends KlesFieldAbstract {
     </mat-form-field>
     `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormColorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-color', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" class="form-element"

package/esm2022/lib/fields/date-time.component.mjs

@@ -14,8 +14,8 @@ export class KlesFormDateTimeComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormDateTimeComponent, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormDateTimeComponent, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -48,7 +48,7 @@ export class KlesFormDateTimeComponent extends KlesFieldAbstract {
         </mat-form-field>
     `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-datetimepicker", template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">

package/esm2022/lib/fields/date.component.mjs

@@ -13,8 +13,8 @@ export class KlesFormDateComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormDateComponent, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormDateComponent, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -47,7 +47,7 @@ export class KlesFormDateComponent extends KlesFieldAbstract {
         </mat-form-field>
     `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormDateComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-datepicker", template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">

package/esm2022/lib/fields/field.abstract.mjs

@@ -63,10 +63,10 @@ export class KlesFieldAbstract {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: KlesFieldAbstract, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: KlesFieldAbstract, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFieldAbstract, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFieldAbstract, decorators: [{
             type: Directive
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { directive: [{
                 type: HostBinding,

package/esm2022/lib/fields/group.component.mjs

@@ -1,56 +1,72 @@
 import { __decorate } from "tslib";
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { KlesFormGroup } from '../controls/group.control';
 import { FieldMapper } from '../decorators/component.decorator';
 import { EnumType } from '../enums/type.enum';
 import { KlesFieldAbstract } from './field.abstract';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "../directive/dynamic-field.directive";
+import * as i1 from "../directive/dynamic-field.directive";
 let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.orientationClass = 'group-container';
+    }
+    get className() {
+        return this.orientationClass;
+    }
     ngOnInit() {
+        console.log(this.field.ngClass);
         this.subGroup = this.group.controls[this.field.name];
         super.ngOnInit();
+        this.setOrientationClass();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormGroupComponent, selector: "kles-group", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group" class="group-container">
-        <div [formGroupName]="field.name" class="group-container" 
-        [ngClass]="{'row': field.direction ==='row'}"
-        [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.direction ==='row' ? (field.ngClass+' '+ 'row'): field.ngClass">
-            @for (subfield of field.collections; track subfield.name) {
-                @if (subfield.visible !== false) {
-                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                    </ng-container>
-                }
+    setOrientationClass() {
+        if (this.field.direction) {
+            switch (this.field.direction) {
+                case 'column':
+                    this.orientationClass = 'group-container-column';
+                    break;
+                case 'row':
+                    this.orientationClass = 'group-container-row';
+                    break;
+                case 'grid':
+                    this.orientationClass = 'group-container-grid';
+                    break;
+                case 'inline-grid':
+                    this.orientationClass = 'group-container-inline-grid';
+                    break;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormGroupComponent, selector: "kles-group", host: { properties: { "formGroup": "group", "formGroupName": "field.name", "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+        @for (subfield of field.collections; track subfield.name) {
+            @if (subfield.visible !== false) {
+                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
+                </ng-container>
             }
-        </div>
-    </div>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".row{align-items:baseline}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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"] }, { kind: "directive", type: i3.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] }); }
+        }
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"], dependencies: [{ kind: "directive", type: i1.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] }); }
 };
 KlesFormGroupComponent = __decorate([
     FieldMapper({ type: EnumType.group, factory: (field) => (new KlesFormGroup(field).create()) })
 ], KlesFormGroupComponent);
 export { KlesFormGroupComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kles-group', template: `
-    <div [formGroup]="group" class="group-container">
-        <div [formGroupName]="field.name" class="group-container" 
-        [ngClass]="{'row': field.direction ==='row'}"
-        [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.direction ==='row' ? (field.ngClass+' '+ 'row'): field.ngClass">
-            @for (subfield of field.collections; track subfield.name) {
-                @if (subfield.visible !== false) {
-                    <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
-                    </ng-container>
-                }
+            args: [{ host: { '[formGroup]': 'group', '[formGroupName]': 'field.name' }, selector: 'kles-group', template: `
+        @for (subfield of field.collections; track subfield.name) {
+            @if (subfield.visible !== false) {
+                <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">
+                </ng-container>
             }
-        </div>
-    </div>
-`, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".row{align-items:baseline}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
-        }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7QUEwQjlDLElBQU0sc0JBQXNCLEdBQTVCLE1BQU0sc0JBQXVCLFNBQVEsaUJBQWlCO0lBSXpELFFBQVE7UUFDSixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFxQixDQUFDO1FBQ3pFLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOzhHQVhRLHNCQUFzQjtrR0FBdEIsc0JBQXNCLHlFQXJCckI7Ozs7Ozs7Ozs7Ozs7Q0FhYjs7QUFRWSxzQkFBc0I7SUF4QmxDLFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7R0F3QmxGLHNCQUFzQixDQVlsQzs7MkZBWlksc0JBQXNCO2tCQXZCbEMsU0FBUzsrQkFDSSxZQUFZLFlBQ1o7Ozs7Ozs7Ozs7Ozs7Q0FhYiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVudHlwZWRGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBLbGVzRm9ybUdyb3VwIH0gZnJvbSAnLi4vY29udHJvbHMvZ3JvdXAuY29udHJvbCc7XG5pbXBvcnQgeyBGaWVsZE1hcHBlciB9IGZyb20gJy4uL2RlY29yYXRvcnMvY29tcG9uZW50LmRlY29yYXRvcic7XG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBLbGVzRmllbGRBYnN0cmFjdCB9IGZyb20gJy4vZmllbGQuYWJzdHJhY3QnO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5ncm91cCwgZmFjdG9yeTogKGZpZWxkKSA9PiAobmV3IEtsZXNGb3JtR3JvdXAoZmllbGQpLmNyZWF0ZSgpKSB9KVxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrbGVzLWdyb3VwJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2Zvcm1Hcm91cF09XCJncm91cFwiIGNsYXNzPVwiZ3JvdXAtY29udGFpbmVyXCI+XG4gICAgICAgIDxkaXYgW2Zvcm1Hcm91cE5hbWVdPVwiZmllbGQubmFtZVwiIGNsYXNzPVwiZ3JvdXAtY29udGFpbmVyXCIgXG4gICAgICAgIFtuZ0NsYXNzXT1cInsncm93JzogZmllbGQuZGlyZWN0aW9uID09PSdyb3cnfVwiXG4gICAgICAgIFtzdHlsZS5mbGV4LWRpcmVjdGlvbl09XCJmaWVsZC5kaXJlY3Rpb24gfHwgJ2luaGVyaXQnXCIgW25nQ2xhc3NdPVwiZmllbGQuZGlyZWN0aW9uID09PSdyb3cnID8gKGZpZWxkLm5nQ2xhc3MrJyAnKyAncm93Jyk6IGZpZWxkLm5nQ2xhc3NcIj5cbiAgICAgICAgICAgIEBmb3IgKHN1YmZpZWxkIG9mIGZpZWxkLmNvbGxlY3Rpb25zOyB0cmFjayBzdWJmaWVsZC5uYW1lKSB7XG4gICAgICAgICAgICAgICAgQGlmIChzdWJmaWVsZC52aXNpYmxlICE9PSBmYWxzZSkge1xuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNEeW5hbWljRmllbGQgW2ZpZWxkXT1cInN1YmZpZWxkXCIgW2dyb3VwXT1cInN1Ykdyb3VwXCIgW3NpYmxpbmdGaWVsZHNdPVwiZmllbGQuY29sbGVjdGlvbnNcIj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbmAsXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nLFxuICAgICAgICAnOmhvc3QgeyBkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0fScsXG4gICAgICAgICcucm93IHsgYWxpZ24taXRlbXM6IGJhc2VsaW5lIH0nLFxuICAgICAgICAvLyAnLmdyb3VwLWNvbnRhaW5lciB7ZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogaW5oZXJpdDsgd2lkdGg6IGluaGVyaXQ7IGZsZXgtd3JhcDogd3JhcH0nXG4gICAgICAgICcuZ3JvdXAtY29udGFpbmVyIHtkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0OyB3aWR0aDogaW5oZXJpdDt9J1xuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1Hcm91cENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgc3ViR3JvdXA6IFVudHlwZWRGb3JtR3JvdXA7XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5zdWJHcm91cCA9IHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXSBhcyBVbnR5cGVkRm9ybUdyb3VwO1xuICAgICAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==
+        }
+`, styles: ["mat-form-field{width:100%}\n", ":host.group-container{display:flex;flex-direction:inherit;width:inherit}\n", ":host.group-container-column{display:flex;flex-direction:column}\n", ":host.group-container-column>*{width:100%}\n", ":host.group-container-row{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:baseline}\n", ":host.group-container-row>*{width:100%}\n", ":host.group-container-grid{display:grid}\n", ":host.group-container-inline-grid{display:inline-grid}\n"] }]
+        }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBMEQsTUFBTSxlQUFlLENBQUM7QUFFL0csT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzFELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNoRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7OztBQXlCOUMsSUFBTSxzQkFBc0IsR0FBNUIsTUFBTSxzQkFBdUIsU0FBUSxpQkFBaUI7SUFBdEQ7O1FBRUgscUJBQWdCLEdBSXNCLGlCQUFpQixDQUFDO0tBc0MzRDtJQXBDRyxJQUEwQixTQUFTO1FBQy9CLE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDO0lBQ2pDLENBQUM7SUFJRCxRQUFRO1FBQ0osT0FBTyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFBO1FBQy9CLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQXFCLENBQUM7UUFDekUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBQ2pCLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDO0lBQy9CLENBQUM7SUFFRCxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFTyxtQkFBbUI7UUFDdkIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsRUFBRTtZQUN0QixRQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxFQUFFO2dCQUMxQixLQUFLLFFBQVE7b0JBQ1QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLHdCQUF3QixDQUFDO29CQUNqRCxNQUFNO2dCQUNWLEtBQUssS0FBSztvQkFDTixJQUFJLENBQUMsZ0JBQWdCLEdBQUcscUJBQXFCLENBQUM7b0JBQzlDLE1BQU07Z0JBQ1YsS0FBSyxNQUFNO29CQUNQLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxzQkFBc0IsQ0FBQztvQkFDL0MsTUFBTTtnQkFDVixLQUFLLGFBQWE7b0JBQ2QsSUFBSSxDQUFDLGdCQUFnQixHQUFHLDZCQUE2QixDQUFDO29CQUN0RCxNQUFNO2FBQ2I7U0FDSjtJQUVMLENBQUM7OEdBM0NRLHNCQUFzQjtrR0FBdEIsc0JBQXNCLG1MQW5CckI7Ozs7Ozs7Q0FPYjs7QUFZWSxzQkFBc0I7SUF2QmxDLFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxFQUFFLE9BQU8sRUFBRSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxJQUFJLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUM7R0F1QmxGLHNCQUFzQixDQTRDbEM7OzJGQTVDWSxzQkFBc0I7a0JBdEJsQyxTQUFTOzJCQUNBLEVBQUUsYUFBYSxFQUFFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxZQUFZLEVBQUUsWUFDdkQsWUFBWSxZQUNaOzs7Ozs7O0NBT2I7OEJBb0I2QixTQUFTO3NCQUFsQyxXQUFXO3VCQUFDLE9BQU8iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBPbkRlc3Ryb3ksIE9uSW5pdCwgVmlld0NvbnRhaW5lclJlZiwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFVudHlwZWRGb3JtR3JvdXAgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBLbGVzRm9ybUdyb3VwIH0gZnJvbSAnLi4vY29udHJvbHMvZ3JvdXAuY29udHJvbCc7XG5pbXBvcnQgeyBGaWVsZE1hcHBlciB9IGZyb20gJy4uL2RlY29yYXRvcnMvY29tcG9uZW50LmRlY29yYXRvcic7XG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBLbGVzRmllbGRBYnN0cmFjdCB9IGZyb20gJy4vZmllbGQuYWJzdHJhY3QnO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5ncm91cCwgZmFjdG9yeTogKGZpZWxkKSA9PiAobmV3IEtsZXNGb3JtR3JvdXAoZmllbGQpLmNyZWF0ZSgpKSB9KVxuQENvbXBvbmVudCh7XG4gICAgaG9zdDogeyAnW2Zvcm1Hcm91cF0nOiAnZ3JvdXAnLCAnW2Zvcm1Hcm91cE5hbWVdJzogJ2ZpZWxkLm5hbWUnIH0sXG4gICAgc2VsZWN0b3I6ICdrbGVzLWdyb3VwJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICBAZm9yIChzdWJmaWVsZCBvZiBmaWVsZC5jb2xsZWN0aW9uczsgdHJhY2sgc3ViZmllbGQubmFtZSkge1xuICAgICAgICAgICAgQGlmIChzdWJmaWVsZC52aXNpYmxlICE9PSBmYWxzZSkge1xuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIga2xlc0R5bmFtaWNGaWVsZCBbZmllbGRdPVwic3ViZmllbGRcIiBbZ3JvdXBdPVwic3ViR3JvdXBcIiBbc2libGluZ0ZpZWxkc109XCJmaWVsZC5jb2xsZWN0aW9uc1wiPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgfVxuICAgICAgICB9XG5gLFxuICAgIHN0eWxlczogW1xuICAgICAgICAnIG1hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nLFxuICAgICAgICAnOmhvc3QuZ3JvdXAtY29udGFpbmVyIHtkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0OyB3aWR0aDogaW5oZXJpdDt9JyxcbiAgICAgICAgJzpob3N0Lmdyb3VwLWNvbnRhaW5lci1jb2x1bW4geyBkaXNwbGF5OiBmbGV4O2ZsZXgtZGlyZWN0aW9uOiBjb2x1bW47IH0nLFxuICAgICAgICAnOmhvc3QuZ3JvdXAtY29udGFpbmVyLWNvbHVtbiA+ICogeyB3aWR0aDogMTAwJTsgfScsXG4gICAgICAgICc6aG9zdC5ncm91cC1jb250YWluZXItcm93IHsgZGlzcGxheTogaW5saW5lLWZsZXg7IGZsZXgtd3JhcDp3cmFwOyBnYXA6MTBweDsgYWxpZ24taXRlbXM6IGJhc2VsaW5lO30nLFxuICAgICAgICAnOmhvc3QuZ3JvdXAtY29udGFpbmVyLXJvdyA+ICogeyB3aWR0aDogMTAwJTsgfScsXG4gICAgICAgICc6aG9zdC5ncm91cC1jb250YWluZXItZ3JpZCB7IGRpc3BsYXk6IGdyaWQ7IH0nLFxuICAgICAgICAnOmhvc3QuZ3JvdXAtY29udGFpbmVyLWlubGluZS1ncmlkIHsgZGlzcGxheTogaW5saW5lLWdyaWQ7IH0nLFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIEtsZXNGb3JtR3JvdXBDb21wb25lbnQgZXh0ZW5kcyBLbGVzRmllbGRBYnN0cmFjdCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIG9yaWVudGF0aW9uQ2xhc3M6ICdncm91cC1jb250YWluZXInXG4gICAgICAgIHwgJ2dyb3VwLWNvbnRhaW5lci1jb2x1bW4nXG4gICAgICAgIHwgJ2dyb3VwLWNvbnRhaW5lci1yb3cnXG4gICAgICAgIHwgJ2dyb3VwLWNvbnRhaW5lci1ncmlkJ1xuICAgICAgICB8ICdncm91cC1jb250YWluZXItaW5saW5lLWdyaWQnID0gJ2dyb3VwLWNvbnRhaW5lcic7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzJykgZ2V0IGNsYXNzTmFtZSgpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMub3JpZW50YXRpb25DbGFzcztcbiAgICB9XG5cbiAgICBzdWJHcm91cDogVW50eXBlZEZvcm1Hcm91cDtcblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICBjb25zb2xlLmxvZyh0aGlzLmZpZWxkLm5nQ2xhc3MpXG4gICAgICAgIHRoaXMuc3ViR3JvdXAgPSB0aGlzLmdyb3VwLmNvbnRyb2xzW3RoaXMuZmllbGQubmFtZV0gYXMgVW50eXBlZEZvcm1Hcm91cDtcbiAgICAgICAgc3VwZXIubmdPbkluaXQoKTtcbiAgICAgICAgdGhpcy5zZXRPcmllbnRhdGlvbkNsYXNzKCk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzZXRPcmllbnRhdGlvbkNsYXNzKCkge1xuICAgICAgICBpZiAodGhpcy5maWVsZC5kaXJlY3Rpb24pIHtcbiAgICAgICAgICAgIHN3aXRjaCAodGhpcy5maWVsZC5kaXJlY3Rpb24pIHtcbiAgICAgICAgICAgICAgICBjYXNlICdjb2x1bW4nOlxuICAgICAgICAgICAgICAgICAgICB0aGlzLm9yaWVudGF0aW9uQ2xhc3MgPSAnZ3JvdXAtY29udGFpbmVyLWNvbHVtbic7XG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgICAgIGNhc2UgJ3Jvdyc6XG4gICAgICAgICAgICAgICAgICAgIHRoaXMub3JpZW50YXRpb25DbGFzcyA9ICdncm91cC1jb250YWluZXItcm93JztcbiAgICAgICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICAgICAgY2FzZSAnZ3JpZCc6XG4gICAgICAgICAgICAgICAgICAgIHRoaXMub3JpZW50YXRpb25DbGFzcyA9ICdncm91cC1jb250YWluZXItZ3JpZCc7XG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgICAgIGNhc2UgJ2lubGluZS1ncmlkJzpcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5vcmllbnRhdGlvbkNsYXNzID0gJ2dyb3VwLWNvbnRhaW5lci1pbmxpbmUtZ3JpZCc7XG4gICAgICAgICAgICAgICAgICAgIGJyZWFrO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG5cbiAgICB9XG59XG4iXX0=

package/esm2022/lib/fields/icon.component.mjs

@@ -9,14 +9,14 @@ export class KlesFormIconComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: KlesFormIconComponent, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KlesFormIconComponent, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
         <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
             {{group.controls[field.name].value}}
         </mat-icon>
 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormIconComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-icon", template: `
         <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">

package/esm2022/lib/fields/input.clearable.component.mjs

@@ -17,8 +17,8 @@ export class KlesFormInputClearableComponent extends KlesFormInputComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -79,7 +79,7 @@ export class KlesFormInputClearableComponent extends KlesFormInputComponent {
     </mat-form-field>
     `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i10.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i10.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i11.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-input-clearable', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="field.color" class="form-element" [appearance]="field.appearance">

package/esm2022/lib/fields/input.component.mjs

@@ -70,8 +70,8 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormInputComponent, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormInputComponent, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [formGroup]="group" [color]="field.color" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -139,7 +139,7 @@ KlesFormInputComponent = __decorate([
     FieldMapper({ type: EnumType.input })
 ], KlesFormInputComponent);
 export { KlesFormInputComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-input', template: `
     <mat-form-field [formGroup]="group" [color]="field.color" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="field.appearance">

package/esm2022/lib/fields/label.component.mjs

@@ -14,8 +14,8 @@ export class KlesFormLabelComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: KlesFormLabelComponent, selector: "kles-form-label", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KlesFormLabelComponent, selector: "kles-form-label", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group" >
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" 
         [ngClass]="field.ngClass" 
@@ -23,7 +23,7 @@ export class KlesFormLabelComponent extends KlesFieldAbstract {
     </div>
 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "kles-form-label",

package/esm2022/lib/fields/line-break.component.mjs

@@ -9,8 +9,8 @@ let KlesFormLineBreakComponent = class KlesFormLineBreakComponent extends KlesFi
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: KlesFormLineBreakComponent, selector: "kles-form-line-break", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KlesFormLineBreakComponent, selector: "kles-form-line-break", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }); }
 };
 KlesFormLineBreakComponent = __decorate([
     FieldMapper({
@@ -19,7 +19,7 @@ KlesFormLineBreakComponent = __decorate([
     })
 ], KlesFormLineBreakComponent);
 export { KlesFormLineBreakComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-line-break', template: ``, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }]
         }] });

package/esm2022/lib/fields/link.component.mjs

@@ -10,14 +10,14 @@ export class KlesFormLinkComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: KlesFormLinkComponent, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: KlesFormLinkComponent, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
         <a [href]="group.controls[field.name].value" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">
             {{field.label}}
         </a>
 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kles-form-link',

package/esm2022/lib/fields/list-field.component.mjs

@@ -58,8 +58,8 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormListFieldComponent, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormListFieldComponent, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group" class="form-element">
         <div class="label">
             {{field.label | translate}}
@@ -104,7 +104,7 @@ KlesFormListFieldComponent = __decorate([
     FieldMapper({ type: 'listfield', factory: (field) => (new KlesFormArray(field).create()) })
 ], KlesFormListFieldComponent);
 export { KlesFormListFieldComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-listfield', template: `
     <div [formGroup]="group" class="form-element">

package/esm2022/lib/fields/radio.component.mjs

@@ -24,8 +24,8 @@ export class KlesFormRadioComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormRadioComponent, selector: "kles-form-radiobutton", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormRadioComponent, selector: "kles-form-radiobutton", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <label class="radio-label-padding">{{field.label}}</label>
         <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">
@@ -50,7 +50,7 @@ export class KlesFormRadioComponent extends KlesFieldAbstract {
     </div>
 `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormRadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormRadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-radiobutton', template: `
     <div [formGroup]="group">

package/esm2022/lib/fields/range.component.mjs

@@ -20,8 +20,8 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormRangeComponent, selector: "kles-form-rangepicker", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormRangeComponent, selector: "kles-form-rangepicker", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
 
         <mat-label>{{field.label}}</mat-label>
@@ -63,7 +63,7 @@ KlesFormRangeComponent = __decorate([
     FieldMapper({ type: EnumType.range, factory: (field) => (new KlesFormRange(field).create()) })
 ], KlesFormRangeComponent);
 export { KlesFormRangeComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-rangepicker", template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">

package/esm2022/lib/fields/select.component.mjs

@@ -115,8 +115,8 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormSelectComponent, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormSelectComponent, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -245,7 +245,7 @@ KlesFormSelectComponent = __decorate([
     FieldMapper({ type: EnumType.select })
 ], KlesFormSelectComponent);
 export { KlesFormSelectComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">

package/esm2022/lib/fields/select.lazy-search.component.mjs

@@ -60,8 +60,8 @@ export class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchCompo
             this.ref.markForCheck();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormSelectLazySearchComponent, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormSelectLazySearchComponent, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -192,7 +192,7 @@ export class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchCompo
     </mat-form-field>
 `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i11.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.KlesTransformPipe, name: "klesTransform" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-lazy-search', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">

package/esm2022/lib/fields/select.search.component.mjs

@@ -172,8 +172,8 @@ export class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectSearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: KlesFormSelectSearchComponent, selector: "kles-form-select-search", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectSearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: KlesFormSelectSearchComponent, selector: "kles-form-select-search", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
         @if (field.label) {
             <mat-label>{{field.label}}</mat-label>
@@ -312,7 +312,7 @@ export class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     </mat-form-field>
 `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti"], outputs: ["toggleAll"] }, { kind: "directive", type: i11.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }, { kind: "pipe", type: i13.KlesTransformPipe, name: "klesTransform" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-search', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">