@3kles/kles-material-dynamicforms 17.4.0 → 17.4.2

package/README.md

@@ -1,24 +1,161 @@
-# KlesMaterialDynamicforms
+<!--[![pipeline status](http://gitlab.3kles.local/angular/klesmaterialdynamicforms/badges/master/pipeline.svg)](http://gitlab.3kles.local/angular/klesmaterialdynamicforms/-/commits/master)-->
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0.
+# @3kles/kles-material-dynamicforms
 
-## Code scaffolding
+**kles-material-dynamicforms** is a component library to build `Material Angular Form`.
 
-Run `ng generate component component-name --project kles-material-dynamicforms` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project kles-material-dynamicforms`.
-> Note: Don't forget to add `--project kles-material-dynamicforms` or else it will be added to the default project in your `angular.json` file. 
+## Changelog
 
-## Build
+Check out the [changelog](./CHANGELOG.md) to check all the latest changes.
 
-Run `ng build kles-material-dynamicforms` to build the project. The build artifacts will be stored in the `dist/` directory.
+## Models
 
-## Publishing
 
-After building your library with `ng build kles-material-dynamicforms`, go to the dist folder `cd dist/kles-material-dynamicforms` and run `npm publish`.
+### Directives
 
-## Running unit tests
+- <b>KlesComponentDirective</b> -> Directive to inject component with value
+- <b>KlesDynamicFieldDirective</b> -> Directive to inject component with IFieldConfig in FormGroup
 
-Run `ng test kles-material-dynamicforms` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### Interfaces
 
-## Further help
+#### IKlesFieldConfig
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+Interface field model
+
+- <b>type?</b>: string -> Mapper type if(type && !component)=>type
+- <b>name</b>: string -> Name Field (key for FormControlName)
+- <b>component?</b>: Type\<any> -> Component field
+- <b>id?</b>: string -> Attribut html id
+- <b>label?</b>: string -> Label field
+- <b>placeholder?</b>: string -> Placeholder field
+- <b>tooltip?</b>: string -> Tooltip field
+- <b>inputType?</b>: string -> Input type
+- <b>min?</b>: number | Date -> Min value for number input or date field
+- <b>max?</b>: number | Date -> Max value for number input or date field
+- <b>maxLength?</b>: number -> Max length for input value
+- <b>step?</b>: number -> Define a step for number input
+- <b>options?</b>: any[] | Subject\<any[]> | Observable\<any[]> | ((value?: string) => Observable\<any[]>) -> List options for list component
+- <b>ngClass?</b>: any -> ngclass for field
+- <b>ngStyle?</b>: any -> ngStyle for field
+- <b>property?</b>: string -> Property for field
+- <b>collections?</b>: any -> Collections for subfield
+- <b>value?</b>: any -> Value field
+- <b>asyncValue?</b>: Observable\<any> -> Async value field
+- <b>multiple?</b>: boolean -> Multiple selection field
+- <b>disabled?</b>: boolean -> Disabled field
+- <b>autocomplete?</b>: boolean -> Autocomplete input field
+- <b>autocompleteComponent?</b>: Type<\any> -> Autocomplete component to display in list option
+- <b>displayWith?</b>: ((value: any) => string) | null -> Autocomplete display format
+- <b>panelWidth?</b>: string | number -> Width for panel list option
+- <b>indeterminate?</b>: boolean -> Indeterminate checkable component
+- <b>color?</b>: string -> Material color
+- <b>icon?</b>: string -> Material icon
+- <b>iconSvg?</b>: string -> Svg icon
+- <b>textareaAutoSize?</b>: { minRows?: number; maxRows?: number } -> Define a min and max number of rows for text area
+- <b>validations?</b>: IKlesValidator\<ValidatorFn>[] -> Array of validators for a field
+- <b>asyncValidations?</b>: IKlesValidator\<AsyncValidatorFn>[] -> Array of async validators for a field
+- <b>pipeTransform?</b>: {
+    pipe: PipeTransform,
+    options?: any[]
+}[] -> Array of pipe to apply to value field
+- <b>direction?</b>: 'row' | 'column' -> Direction for the display of the fields
+- <b>valueChanges?</b>: ((field: IKlesFieldConfig, group: UntypedFormGroup, siblingField?: IKlesFieldConfig[], valueChanged?: any) => void) -> Emit each time the value is changing
+- <b>triggerComponent?</b>: Type\<any> -> Trigger component to customize trigger label in select
+- <b>virtualScroll?</b>: boolean -> To activate virtual scroll
+- <b>itemSize?</b>: number -> Item size for virtual scroll
+- <b>pending?</b>: boolean -> If the value is pending
+- <b>searchKeys?</b>: string[] -> List of keys for multiple searches
+- <b>updateOn?</b>: 'change' | 'blur' | 'submit' -> Set the update on diferent moment
+- <b>debounceTime?</b>: number -> Time in milliseconds before emit value after changed
+- <b>directive?</b>: (new (ref: ViewContainerRef, field: IKlesField) => IKlesDirective) -> Set a new directive to the field
+- <b>visible?</b>: boolean -> Set if the field is visible
+- <b>lazy?</b>: boolean -> Set if the field is lazy
+- <b>buttonType?</b>: 'submit' | 'button' | 'reset' -> Define the type of a button
+- <b>accept?</b>: string ->
+- <b>dateOptions?</b>: {
+        adapter?: {
+            class: Type<DateAdapter\<any>>,
+            deps?: any[]
+        },
+        language: string,
+        dateFormat: MatDateFormats
+    } -> Define options for date field
+- <b>hint?</b>: string -> Display as a mat-hint for the field
+- <b>clearable?</b>: boolean -> Display a cross to clear the field
+- <b>clearableComponent?</b>: Type\<any> -> Define a new clearable component
+- <b>subComponents?</b>: Type\<any>[] -> Define sub components of a field
+- <b>autofocus?</b>: boolean -> Set the autofocus on the field
+- <b>attribute?</b>: EnumButtonAttribute -> To display material button design
+- <b>subscriptSizing?</b>: SubscriptSizing ->
+- <b>nonNullable?</b>: boolean -> Set if the field can  be null
+
+### Fields
+
+- <b>KlesFormArrayComponent</b> component that creates a form array of other components
+- <b>KlesFormBadgeComponent</b> component to display a badge
+- <b>KlesFormFabComponent</b> component to display a fab button
+- <b>KlesFormButtonComponent</b> component to display a button
+- <b>KlesFormIconButtonComponent</b> component to display an icon button
+- <b>KlesFormMiniFabComponent</b> component to display a mini fab button
+- <b>KlesFormButtonToogleGroupComponent</b> component to display a button group toggle
+- <b>KlesFormButtonCheckerComponent</b> component to check error in form
+- <b>KlesFormButtonFileComponent</b> button that take a file
+- <b>KlesFormCheckboxComponent</b> component to display a checkbox
+- <b>KlesFormChipComponent</b> component to display a chip
+- <b>KlesFormClearComponent</b> component to clear a form
+- <b>KlesFormColorComponent</b> component to select a color
+- <b>KlesFormDateTimeComponent</b> component to select a date with a time
+- <b>KlesFormDateComponent</b> component to select a date
+- <b>KlesFieldAbstract</b> abstract class to build field component
+- <b>KlesFormGroupComponent</b> component that creates a form group of other components
+- <b>KlesFormIconComponent</b> component to display a material icon
+- <b>KlesFormInputClearableComponent</b> component with an input that is clearable
+- <b>KlesFormInputComponent</b> component with an input
+- <b>KlesFormLineBreakComponent</b> component to go to the next line
+- <b>KlesFormLinkComponent</b> component that display a link
+- <b>KlesFormListFieldComponent</b> component to display a list
+- <b>KlesFormRadioComponent</b> component that display a material radio
+- <b>KlesFormRangeComponent</b> component to select a date range
+- <b>KlesFormSelectComponent</b> component to select a value in options
+- <b>KlesFormSelectLazySearchComponent</b> component to select in lazy options that can be filtered
+- <b>KlesFormSelectSearchComponent</b> component to select a value in options that can be filtered
+- <b>KlesFormSelectionListComponent</b> component to create a list with elements that can be selected
+- <b>KlesFormSelectionListSearchComponent</b> component to create a list with elements that can be selected and filtered
+- <b>KlesFormSlideToggleComponent</b> component to display a group toggle
+- <b>KlesFormTextComponent</b> component to display text
+- <b>KlesFormTextareaComponent</b> component to display a text area
+
+## Install
+
+### npm
+
+```
+npm install @3kles/kles-material-dynamicforms --save
+```
+
+## How to use
+
+In the module
+```javascript
+import { KlesMaterialDynamicFormsModule } from '@3kles/kles-material-dynamicforms';
+...
+@NgModule({
+ imports: [
+    KlesMaterialDynamicFormsModule,
+    ...
+ ]
+ ...
+})
+```
+
+Check the [`documentation`](https://doc.3kles-consulting.com/#/material/dynamicforms) to use component and directive.
+
+## Tests
+
+```
+npm install
+npm test
+```
+## License
+
+[`MIT`](./LICENSE.md)

package/esm2022/lib/directive/dynamic-component.directive.mjs

@@ -26,10 +26,10 @@ export class KlesComponentDirective {
         this.componentRef.instance.value = this.value;
         this.componentRef.instance.field = this.field;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: KlesComponentDirective, selector: "[klesComponent]", inputs: { component: "component", value: "value", field: "field" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: KlesComponentDirective, selector: "[klesComponent]", inputs: { component: "component", value: "value", field: "field" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[klesComponent]'

package/esm2022/lib/directive/dynamic-field.directive.mjs

@@ -68,10 +68,10 @@ export class KlesDynamicFieldDirective {
         component.instance.siblingFields = this.siblingFields;
         return component;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.0", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesDynamicFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: { field: "field", group: "group", siblingFields: "siblingFields" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesDynamicFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[klesDynamicField]'

package/esm2022/lib/dynamic-form.component.mjs

@@ -151,8 +151,8 @@ export class KlesDynamicFormComponent {
             control.markAsTouched({ onlySelf: true });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: KlesDynamicFormComponent, selector: "app-kles-dynamic-form", inputs: { fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesDynamicFormComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: KlesDynamicFormComponent, selector: "app-kles-dynamic-form", inputs: { fields: "fields", validators: "validators", asyncValidators: "asyncValidators", direction: "direction" }, outputs: { submit: "submit", _onLoaded: "_onLoaded" }, exportAs: ["klesDynamicForm"], usesOnChanges: true, ngImport: i0, template: `
     <form class="{{orientationClass}}" [formGroup]="form" (submit)="onSubmit($event)">
         @for (field of fields; track field.name) {
             @if (field.visible !== false) {
@@ -163,7 +163,7 @@ export class KlesDynamicFormComponent {
     </form>
     `, isInline: true, styles: [".dynamic-form-column{display:flex;flex-direction:column}\n", ".dynamic-form-column>*{width:100%}\n", ".dynamic-form-row{display:inline-flex;flex-wrap:wrap;gap:10px}\n", ".dynamic-form-row>*{width:100%}\n", ".dynamic-form-row-item{margin-right:10px}\n", ".dynamic-form-column-item{margin-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesDynamicFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'klesDynamicForm', selector: 'app-kles-dynamic-form', template: `
     <form class="{{orientationClass}}" [formGroup]="form" (submit)="onSubmit($event)">

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

@@ -17,8 +17,8 @@ let KlesFormArrayComponent = class KlesFormArrayComponent extends KlesFieldAbstr
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: KlesFormArrayComponent, selector: "kles-array", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormArrayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: KlesFormArrayComponent, selector: "kles-array", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group" class="container" [ngClass]="{'container-column': field.direction ==='column'}">
         <ng-container [formArrayName]="field.name">
             @for (subGroup of formArray.controls; track subGroup.value._id) {
@@ -39,7 +39,7 @@ KlesFormArrayComponent = __decorate([
     FieldMapper({ type: EnumType.array, factory: (field) => (new KlesFormArray(field).create()) })
 ], KlesFormArrayComponent);
 export { KlesFormArrayComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormArrayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormArrayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-array', template: `
     <div [formGroup]="group" class="container" [ngClass]="{'container-column': field.direction ==='column'}">

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

@@ -14,8 +14,8 @@ let KlesFormBadgeComponent = class KlesFormBadgeComponent extends KlesFieldAbstr
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormBadgeComponent, selector: "kles-form-badge", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormBadgeComponent, selector: "kles-form-badge", usesInheritance: true, ngImport: i0, template: `
     <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
         matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" matBadgeColor="{{field.color}}">
     </span>
@@ -25,7 +25,7 @@ KlesFormBadgeComponent = __decorate([
     FieldMapper({ type: EnumType.badge })
 ], KlesFormBadgeComponent);
 export { KlesFormBadgeComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormBadgeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kles-form-badge',

package/esm2022/lib/fields/button-fab.component.mjs

@@ -10,8 +10,8 @@ export class KlesFormFabComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormFabComponent, selector: "kles-form-fab", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormFabComponent, selector: "kles-form-fab", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-fab
             [attr.id]="field.id" [classButton]="field.ngClass" 
@@ -27,7 +27,7 @@ export class KlesFormFabComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesFabComponent, selector: "kles-fab" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormFabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-fab', template: `
     <div [formGroup]="group">

package/esm2022/lib/fields/button-form.component.mjs

@@ -10,8 +10,8 @@ export class KlesFormButtonComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormButtonComponent, selector: "kles-form-button", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormButtonComponent, selector: "kles-form-button", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-button
             [attr.id]="field.id" [classButton]="field.ngClass" 
@@ -28,7 +28,7 @@ export class KlesFormButtonComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesButtonComponent, selector: "kles-button", inputs: ["attribute"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-button', template: `
     <div [formGroup]="group">

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

@@ -10,8 +10,8 @@ export class KlesFormIconButtonComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormIconButtonComponent, selector: "kles-form-icon-button", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormIconButtonComponent, selector: "kles-form-icon-button", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-icon-button
             [attr.id]="field.id" [classButton]="field.ngClass" 
@@ -27,7 +27,7 @@ export class KlesFormIconButtonComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesIconButtonComponent, selector: "kles-icon-button" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-icon-button', template: `
     <div [formGroup]="group">

package/esm2022/lib/fields/button-mini-fab.component.mjs

@@ -10,8 +10,8 @@ export class KlesFormMiniFabComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormMiniFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormMiniFabComponent, selector: "kles-form-mini-fab", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormMiniFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormMiniFabComponent, selector: "kles-form-mini-fab", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-mini-fab
             [attr.id]="field.id" [classButton]="field.ngClass" 
@@ -27,7 +27,7 @@ export class KlesFormMiniFabComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesMiniFabComponent, selector: "kles-mini-fab" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormMiniFabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormMiniFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-mini-fab', template: `
     <div [formGroup]="group">

package/esm2022/lib/fields/button-toogle-group.component.mjs

@@ -22,8 +22,8 @@ export class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonToogleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: KlesFormButtonToogleGroupComponent, selector: "kles-form-button-toogle-group", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonToogleGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: KlesFormButtonToogleGroupComponent, selector: "kles-form-button-toogle-group", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group" class="form-element">
             <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple" [attr.id]="field.id" [ngClass]="field.ngClass">
                 @for (item of options$ | async; track item) {
@@ -33,9 +33,9 @@ export class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
                 }
             </mat-button-toggle-group>
         </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.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KlesTransformPipe, name: "klesTransform" }] }); }
+`, 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.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.KlesTransformPipe, name: "klesTransform" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonToogleGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonToogleGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kles-form-button-toogle-group',

package/esm2022/lib/fields/buttonchecker-form.component.mjs

@@ -10,8 +10,8 @@ export class KlesFormButtonCheckerComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormButtonCheckerComponent, selector: "kles-form-button-checker", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormButtonCheckerComponent, selector: "kles-form-button-checker", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-button-checker
             [attr.id]="field.id" [classButton]="field.ngClass"
@@ -27,7 +27,7 @@ export class KlesFormButtonCheckerComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesButtonCheckerComponent, selector: "kles-button-checker" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonCheckerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonCheckerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-button-checker', template: `
     <div [formGroup]="group">

package/esm2022/lib/fields/buttonfile-form.component.mjs

@@ -11,8 +11,8 @@ export class KlesFormButtonFileComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormButtonFileComponent, selector: "kles-form-button-file", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KlesFormButtonFileComponent, selector: "kles-form-button-file", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
         <kles-button-file
             [attr.id]="field.id" [classButton]="field.ngClass" 
@@ -29,7 +29,7 @@ export class KlesFormButtonFileComponent extends KlesFieldAbstract {
     </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.KlesButtonFileComponent, selector: "kles-button-file", inputs: ["accept"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormButtonFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormButtonFileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-button-file', template: `
     <div [formGroup]="group">

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

@@ -15,8 +15,8 @@ let KlesFormCheckboxComponent = class KlesFormCheckboxComponent extends KlesFiel
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: KlesFormCheckboxComponent, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: KlesFormCheckboxComponent, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group" >  
         <mat-checkbox matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [indeterminate]="field.indeterminate" [color]="field.color" [formControlName]="field.name">{{field.label | translate}}</mat-checkbox>
         @for (validation of field.validations; track validation.name) {
@@ -40,7 +40,7 @@ KlesFormCheckboxComponent = __decorate([
     FieldMapper({ type: EnumType.checkbox })
 ], KlesFormCheckboxComponent);
 export { KlesFormCheckboxComponent };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-checkbox', template: `
     <div [formGroup]="group" >  

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

@@ -12,8 +12,8 @@ export class KlesFormChipComponent extends KlesFieldAbstract {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.0", type: KlesFormChipComponent, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormChipComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: KlesFormChipComponent, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">  
         <mat-chip-listbox>
             <mat-chip-option [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">
@@ -26,7 +26,7 @@ export class KlesFormChipComponent 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.KlesTransformPipe, name: "klesTransform" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: KlesFormChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormChipComponent, decorators: [{
             type: Component,
             args: [{ selector: "kles-form-chip", template: `
     <div [formGroup]="group">  

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.1.0", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: KlesFormClearComponent, selector: "kles-form-clear", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", 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.1.0", ngImport: i0, type: KlesFormClearComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KlesFormClearComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kles-form-clear',