@3kles/kles-material-dynamicforms 1.1.20 → 14.0.1

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

@@ -0,0 +1,46 @@
+import { __decorate } from "tslib";
+import { Component } from '@angular/core';
+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 "@angular/flex-layout/extended";
+import * as i4 from "../directive/dynamic-field.directive";
+let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        this.subGroup = this.group.controls[this.field.name];
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormGroupComponent, selector: "kles-group", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group" class="group-container">
+        <div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass"
+        [ngClass]="field.direction === 'column' ? null: 'row'" >
+            <ng-container *ngFor="let subfield of field.collections;" 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", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
+KlesFormGroupComponent = __decorate([
+    FieldMapper({ type: EnumType.group })
+], KlesFormGroupComponent);
+export { KlesFormGroupComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", 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" [style.flex-direction]="field.direction || 'inherit'" [ngClass]="field.ngClass"
+        [ngClass]="field.direction === 'column' ? null: 'row'" >
+            <ng-container *ngFor="let subfield of field.collections;" 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", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUU3RCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDaEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQzlDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7Ozs7SUFxQnhDLHNCQUFzQixTQUF0QixzQkFBdUIsU0FBUSxpQkFBaUI7SUFJekQsUUFBUTtRQUNKLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQXFCLENBQUM7UUFDekUsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7Q0FDSixDQUFBO21IQVpZLHNCQUFzQjt1R0FBdEIsc0JBQXNCLHlFQWhCckI7Ozs7Ozs7O0NBUWI7QUFRWSxzQkFBc0I7SUFuQmxDLFdBQVcsQ0FBQyxFQUFDLElBQUksRUFBRSxRQUFRLENBQUMsS0FBSyxFQUFDLENBQUM7R0FtQnZCLHNCQUFzQixDQVlsQztTQVpZLHNCQUFzQjsyRkFBdEIsc0JBQXNCO2tCQWxCbEMsU0FBUzsrQkFDSSxZQUFZLFlBQ1o7Ozs7Ozs7O0NBUWIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRNYXBwZXIgfSBmcm9tICcuLi9kZWNvcmF0b3JzL2NvbXBvbmVudC5kZWNvcmF0b3InO1xuaW1wb3J0IHsgRW51bVR5cGUgfSBmcm9tICcuLi9lbnVtcy90eXBlLmVudW0nO1xuaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tICcuL2ZpZWxkLmFic3RyYWN0JztcblxuQEZpZWxkTWFwcGVyKHt0eXBlOiBFbnVtVHlwZS5ncm91cH0pXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2tsZXMtZ3JvdXAnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPGRpdiBbZm9ybUdyb3VwXT1cImdyb3VwXCIgY2xhc3M9XCJncm91cC1jb250YWluZXJcIj5cbiAgICAgICAgPGRpdiBbZm9ybUdyb3VwTmFtZV09XCJmaWVsZC5uYW1lXCIgY2xhc3M9XCJncm91cC1jb250YWluZXJcIiBbc3R5bGUuZmxleC1kaXJlY3Rpb25dPVwiZmllbGQuZGlyZWN0aW9uIHx8ICdpbmhlcml0J1wiIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIlxuICAgICAgICBbbmdDbGFzc109XCJmaWVsZC5kaXJlY3Rpb24gPT09ICdjb2x1bW4nID8gbnVsbDogJ3JvdydcIiA+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzdWJmaWVsZCBvZiBmaWVsZC5jb2xsZWN0aW9ucztcIiBrbGVzRHluYW1pY0ZpZWxkIFtmaWVsZF09XCJzdWJmaWVsZFwiIFtncm91cF09XCJzdWJHcm91cFwiIFtzaWJsaW5nRmllbGRzXT1cImZpZWxkLmNvbGxlY3Rpb25zXCI+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG5gLFxuICAgIHN0eWxlczogWydtYXQtZm9ybS1maWVsZCB7d2lkdGg6IGNhbGMoMTAwJSl9JyxcbiAgICAgICAgJzpob3N0IHsgZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogaW5oZXJpdH0nLFxuICAgICAgICAvLyAnLnJvdyB7IGdhcDoxMHB4O30nLFxuICAgICAgICAvLyAnLmdyb3VwLWNvbnRhaW5lciB7ZGlzcGxheTpmbGV4OyBmbGV4LWRpcmVjdGlvbjogaW5oZXJpdDsgd2lkdGg6IGluaGVyaXQ7IGZsZXgtd3JhcDogd3JhcH0nXG4gICAgICAgICcuZ3JvdXAtY29udGFpbmVyIHtkaXNwbGF5OmZsZXg7IGZsZXgtZGlyZWN0aW9uOiBpbmhlcml0OyB3aWR0aDogaW5oZXJpdDt9J1xuICAgIF1cbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1Hcm91cENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgc3ViR3JvdXA6IFVudHlwZWRGb3JtR3JvdXA7XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgdGhpcy5zdWJHcm91cCA9IHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXSBhcyBVbnR5cGVkRm9ybUdyb3VwO1xuICAgICAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -0,0 +1,28 @@
+import { Component } from "@angular/core";
+import { KlesFieldAbstract } from './field.abstract';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/flex-layout/extended";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/tooltip";
+export class KlesFormIconComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", 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: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", 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">
+            {{group.controls[field.name].value}}
+        </mat-icon>
+` }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGVzLW1hdGVyaWFsLWR5bmFtaWNmb3Jtcy9zcmMvbGliL2ZpZWxkcy9pY29uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7O0FBV3JELE1BQU0sT0FBTyxxQkFBc0IsU0FBUSxpQkFBaUI7SUFDeEQsUUFBUSxLQUFLLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDaEMsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOztrSEFKUSxxQkFBcUI7c0dBQXJCLHFCQUFxQiw2RUFQcEI7Ozs7Q0FJYjsyRkFHWSxxQkFBcUI7a0JBVGpDLFNBQVM7K0JBQ0ksZ0JBQWdCLFlBQ2hCOzs7O0NBSWIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEtsZXNGaWVsZEFic3RyYWN0IH0gZnJvbSAnLi9maWVsZC5hYnN0cmFjdCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiBcImtsZXMtZm9ybS1pY29uXCIsXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgPG1hdC1pY29uIFtjb2xvcl09XCJmaWVsZC5jb2xvclwiIG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiIFtuZ1N0eWxlXT1cImZpZWxkLm5nU3R5bGVcIj5cbiAgICAgICAgICAgIHt7Z3JvdXAuY29udHJvbHNbZmllbGQubmFtZV0udmFsdWV9fVxuICAgICAgICA8L21hdC1pY29uPlxuYCxcbiAgICBzdHlsZXM6IFtdXG59KVxuZXhwb3J0IGNsYXNzIEtsZXNGb3JtSWNvbkNvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAgIG5nT25Jbml0KCkgeyBzdXBlci5uZ09uSW5pdCgpOyB9XG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgfVxufVxuIl19

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

@@ -0,0 +1,112 @@
+import { Component } from '@angular/core';
+import { KlesFormInputComponent } from './input.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/flex-layout/extended";
+import * as i4 from "@angular/material/button";
+import * as i5 from "@angular/material/icon";
+import * as i6 from "@angular/material/form-field";
+import * as i7 from "@angular/material/input";
+import * as i8 from "@angular/material/core";
+import * as i9 from "@angular/material/tooltip";
+import * as i10 from "@angular/material/progress-spinner";
+import * as i11 from "@angular/material/autocomplete";
+import * as i12 from "../directive/dynamic-component.directive";
+import * as i13 from "@ngx-translate/core";
+export class KlesFormInputClearableComponent extends KlesFormInputComponent {
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormInputClearableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormInputClearableComponent, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [matAutocomplete]="auto">
+
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+        <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
+            (click)="group.controls[field.name].reset();">
+            <mat-icon>close</mat-icon>
+        </button>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.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: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i10.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i11.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i11.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i12.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-input-clearable', template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [matAutocomplete]="auto">
+
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+        <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
+            (click)="group.controls[field.name].reset();">
+            <mat-icon>close</mat-icon>
+        </button>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY2xlYXJhYmxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tsZXMtbWF0ZXJpYWwtZHluYW1pY2Zvcm1zL3NyYy9saWIvZmllbGRzL2lucHV0LmNsZWFyYWJsZS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFVLFNBQVMsRUFBYSxNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O0FBaUQzRCxNQUFNLE9BQU8sK0JBQWdDLFNBQVEsc0JBQXNCO0lBRXZFLFdBQVc7UUFDUCxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7NEhBSlEsK0JBQStCO2dIQUEvQiwrQkFBK0Isd0ZBN0M5Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBMENUOzJGQUdRLCtCQUErQjtrQkEvQzNDLFNBQVM7K0JBQ0ksMkJBQTJCLFlBQzNCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0EwQ1QiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPbkluaXQsIENvbXBvbmVudCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBLbGVzRm9ybUlucHV0Q29tcG9uZW50IH0gZnJvbSAnLi9pbnB1dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2tsZXMtZm9ybS1pbnB1dC1jbGVhcmFibGUnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1mb3JtLWZpZWxkIFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiBbY29sb3JdPVwiZmllbGQuY29sb3JcIiBjbGFzcz1cImZvcm0tZWxlbWVudFwiPlxuXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJmaWVsZC5hdXRvY29tcGxldGU7IGVsc2Ugbm90QXV0b0NvbXBsZXRlXCI+XG4gICAgICAgICAgICA8aW5wdXQgbWF0SW5wdXQgbWF0VG9vbHRpcD1cInt7ZmllbGQudG9vbHRpcH19XCIgW2F0dHIuaWRdPVwiZmllbGQuaWRcIiBbbmdDbGFzc109XCJmaWVsZC5uZ0NsYXNzXCIgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZC5uYW1lXCIgW3BsYWNlaG9sZGVyXT1cImZpZWxkLnBsYWNlaG9sZGVyIHwgdHJhbnNsYXRlXCIgW3R5cGVdPVwiZmllbGQuaW5wdXRUeXBlXCJcbiAgICAgICAgICAgIFttYXhMZW5ndGhdPVwiZmllbGQubWF4TGVuZ3RoXCIgW21pbl09XCJmaWVsZC5taW5cIiBbbWF4XT1cImZpZWxkLm1heFwiIFtzdGVwXT1cImZpZWxkLnN0ZXBcIlxuICAgICAgICAgICAgW21hdEF1dG9jb21wbGV0ZV09XCJhdXRvXCI+XG5cbiAgICAgICAgICAgIDxtYXQtYXV0b2NvbXBsZXRlICNhdXRvPVwibWF0QXV0b2NvbXBsZXRlXCIgW2Rpc3BsYXlXaXRoXT1cImRpc3BsYXlGbi5iaW5kKHRoaXMpXCIgW3BhbmVsV2lkdGhdPVwidGhpcy5maWVsZC5wYW5lbFdpZHRoXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnRcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBmaWx0ZXJlZE9wdGlvbiB8IGFzeW5jXCIgW3ZhbHVlXT1cIm9wdGlvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAge3tmaWVsZC5wcm9wZXJ0eSA/IG9wdGlvbltmaWVsZC5wcm9wZXJ0eV0gOiBvcHRpb259fVxuICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmlsdGVyZWRPcHRpb24gfCBhc3luY1wiIFt2YWx1ZV09XCJvcHRpb25cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIga2xlc0NvbXBvbmVudCBbY29tcG9uZW50XT1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiIFt2YWx1ZV09XCJvcHRpb25cIiBbZmllbGRdPVwiZmllbGRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L21hdC1hdXRvY29tcGxldGU+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjbm90QXV0b0NvbXBsZXRlPlxuICAgICAgICAgICAgPGlucHV0IG1hdElucHV0IG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiIFtmb3JtQ29udHJvbE5hbWVdPVwiZmllbGQubmFtZVwiIFtwbGFjZWhvbGRlcl09XCJmaWVsZC5wbGFjZWhvbGRlciB8IHRyYW5zbGF0ZVwiIFt0eXBlXT1cImZpZWxkLmlucHV0VHlwZVwiXG4gICAgICAgICAgICBbbWF4TGVuZ3RoXT1cImZpZWxkLm1heExlbmd0aFwiIFttaW5dPVwiZmllbGQubWluXCIgW21heF09XCJmaWVsZC5tYXhcIiBbc3RlcF09XCJmaWVsZC5zdGVwXCI+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxidXR0b24gKm5nSWY9XCIhZ3JvdXAuZ2V0KGZpZWxkLm5hbWUpLmRpc2FibGVkXCIgbWF0LWJ1dHRvbiBtYXRTdWZmaXggbWF0LWljb24tYnV0dG9uIGFyaWEtbGFiZWw9XCJDbGVhclwiIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgKGNsaWNrKT1cImdyb3VwLmNvbnRyb2xzW2ZpZWxkLm5hbWVdLnJlc2V0KCk7XCI+XG4gICAgICAgICAgICA8bWF0LWljb24+Y2xvc2U8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8bWF0LXNwaW5uZXIgbWF0U3VmZml4IG1vZGU9XCJpbmRldGVybWluYXRlXCIgKm5nSWY9XCJpc1BlbmRpbmcoKVwiIGRpYW1ldGVyPVwiMTdcIj48L21hdC1zcGlubmVyPlxuXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHZhbGlkYXRpb24gb2YgZmllbGQudmFsaWRhdGlvbnM7XCIgbmdQcm9qZWN0QXM9XCJtYXQtZXJyb3JcIj5cbiAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKVwiPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHZhbGlkYXRpb24gb2YgZmllbGQuYXN5bmNWYWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImdyb3VwLmdldChmaWVsZC5uYW1lKS5oYXNFcnJvcih2YWxpZGF0aW9uLm5hbWUpXCI+e3t2YWxpZGF0aW9uLm1lc3NhZ2UgfCB0cmFuc2xhdGV9fTwvbWF0LWVycm9yPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L21hdC1mb3JtLWZpZWxkPlxuICAgIGAsXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nXVxufSlcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybUlucHV0Q2xlYXJhYmxlQ29tcG9uZW50IGV4dGVuZHMgS2xlc0Zvcm1JbnB1dENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -0,0 +1,158 @@
+import { __decorate } from "tslib";
+import { KlesFieldAbstract } from './field.abstract';
+import { Component } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { startWith, map, switchMap } from 'rxjs/operators';
+import { EnumType } from '../enums/type.enum';
+import { FieldMapper } from '../decorators/component.decorator';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@angular/flex-layout/extended";
+import * as i4 from "@angular/material/form-field";
+import * as i5 from "@angular/material/input";
+import * as i6 from "@angular/material/core";
+import * as i7 from "@angular/material/tooltip";
+import * as i8 from "@angular/material/progress-spinner";
+import * as i9 from "@angular/material/autocomplete";
+import * as i10 from "../directive/dynamic-component.directive";
+import * as i11 from "@ngx-translate/core";
+let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        if (this.field.options instanceof Observable) {
+            this.options$ = this.field.options;
+        }
+        else {
+            this.options$ = of(this.field.options);
+        }
+        this.filteredOption = this.group.get(this.field.name).valueChanges
+            .pipe(startWith(''), 
+        // map(data => data ? this.filterData(data) : this.field.options.slice())
+        switchMap(data => data ? this.filterData(data) : this.options$));
+        if (!this.field.maxLength) {
+            this.field.maxLength = 524288; // Max default input W3C
+        }
+        super.ngOnInit();
+    }
+    isPending() {
+        return (this.group.controls[this.field.name].pending || this.field.pending);
+    }
+    filterData(value) {
+        let filterValue;
+        if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
+            filterValue = value.toLowerCase();
+        }
+        else {
+            filterValue = value[this.field.property].toLowerCase();
+        }
+        if (this.field.property) {
+            return this.options$
+                .pipe(map(options => options.filter(option => option[this.field.property].toLowerCase().indexOf(filterValue) === 0)));
+            // return this.field.options
+            //     .filter(data => data[this.field.property].toLowerCase().indexOf(filterValue) === 0);
+        }
+        // return this.field.options.filter(data => data.toLowerCase().indexOf(filterValue) === 0);
+        return this.options$.pipe(map(options => options.filter(option => option.toLowerCase().indexOf(filterValue) === 0)));
+    }
+    displayFn(value) {
+        if (this.field.displayWith) {
+            return this.field.displayWith(value);
+        }
+        else {
+            if (value && this.field && this.field.property) {
+                return value[this.field.property] ? value[this.field.property] : '';
+            }
+            return value ? value : '';
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormInputComponent, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType" 
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [matAutocomplete]="auto">
+
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix]" }, { 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.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i9.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i10.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }] });
+KlesFormInputComponent = __decorate([
+    FieldMapper({ type: EnumType.input })
+], KlesFormInputComponent);
+export { KlesFormInputComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-input', template: `
+    <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
+
+        <ng-container *ngIf="field.autocomplete; else notAutoComplete">
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType" 
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [matAutocomplete]="auto">
+
+            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        {{field.property ? option[field.property] : option}}
+                    </mat-option>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *ngFor="let option of filteredOption | async" [value]="option">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                        </ng-container>
+                    </mat-option>
+                </ng-container>
+            </mat-autocomplete>
+        </ng-container>
+
+        <ng-template #notAutoComplete>
+            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+        </ng-template>
+
+        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
+
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+    </mat-form-field>
+    `, styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvaW5wdXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNyRCxPQUFPLEVBQVUsU0FBUyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3RDLE9BQU8sRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7Ozs7Ozs7Ozs7Ozs7SUE4Q25ELHNCQUFzQixTQUF0QixzQkFBdUIsU0FBUSxpQkFBaUI7SUFLekQsUUFBUTtRQUVKLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLFlBQVksVUFBVSxFQUFFO1lBQzFDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUM7U0FDdEM7YUFBTTtZQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDMUM7UUFHRCxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUMsWUFBWTthQUM3RCxJQUFJLENBQ0QsU0FBUyxDQUFDLEVBQUUsQ0FBQztRQUNiLHlFQUF5RTtRQUN6RSxTQUFTLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FDbEUsQ0FBQztRQUNOLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsRUFBRTtZQUN2QixJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsQ0FBQyx3QkFBd0I7U0FDMUQ7UUFDRCxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFNBQVM7UUFDTCxPQUFPLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoRixDQUFDO0lBRU8sVUFBVSxDQUFDLEtBQVU7UUFDekIsSUFBSSxXQUFXLENBQUM7UUFFaEIsSUFBSSxPQUFPLEtBQUssS0FBSyxRQUFRLElBQUksTUFBTSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLGlCQUFpQixFQUFFO1lBQzFGLFdBQVcsR0FBRyxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDckM7YUFBTTtZQUNILFdBQVcsR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUMxRDtRQUVELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUU7WUFDckIsT0FBTyxJQUFJLENBQUMsUUFBUTtpQkFDZixJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxFQUFFLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLE9BQU8sQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDMUgsNEJBQTRCO1lBQzVCLDJGQUEyRjtTQUM5RjtRQUNELDJGQUEyRjtRQUMzRixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxNQUFNLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN6SCxDQUFDO0lBRUQsU0FBUyxDQUFDLEtBQVU7UUFDaEIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsRUFBRTtZQUN4QixPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3hDO2FBQU07WUFDSCxJQUFJLEtBQUssSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxFQUFFO2dCQUM1QyxPQUFPLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO2FBQ3ZFO1lBQ0QsT0FBTyxLQUFLLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1NBQzdCO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEIsQ0FBQztDQUNKLENBQUE7bUhBL0RZLHNCQUFzQjt1R0FBdEIsc0JBQXNCLDhFQXpDckI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBc0NUO0FBR1Esc0JBQXNCO0lBNUNsQyxXQUFXLENBQUMsRUFBRSxJQUFJLEVBQUUsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDO0dBNEN6QixzQkFBc0IsQ0ErRGxDO1NBL0RZLHNCQUFzQjsyRkFBdEIsc0JBQXNCO2tCQTNDbEMsU0FBUzsrQkFDSSxpQkFBaUIsWUFDakI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBc0NUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tICcuL2ZpZWxkLmFic3RyYWN0JztcbmltcG9ydCB7IE9uSW5pdCwgQ29tcG9uZW50LCBPbkRlc3Ryb3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBzdGFydFdpdGgsIG1hcCwgc3dpdGNoTWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgRW51bVR5cGUgfSBmcm9tICcuLi9lbnVtcy90eXBlLmVudW0nO1xuaW1wb3J0IHsgRmllbGRNYXBwZXIgfSBmcm9tICcuLi9kZWNvcmF0b3JzL2NvbXBvbmVudC5kZWNvcmF0b3InO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5pbnB1dCB9KVxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdrbGVzLWZvcm0taW5wdXQnLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgPG1hdC1mb3JtLWZpZWxkIFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiBbY29sb3JdPVwiZmllbGQuY29sb3JcIiBjbGFzcz1cImZvcm0tZWxlbWVudFwiPlxuXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJmaWVsZC5hdXRvY29tcGxldGU7IGVsc2Ugbm90QXV0b0NvbXBsZXRlXCI+XG4gICAgICAgICAgICA8aW5wdXQgbWF0SW5wdXQgbWF0VG9vbHRpcD1cInt7ZmllbGQudG9vbHRpcH19XCIgW2F0dHIuaWRdPVwiZmllbGQuaWRcIiBbbmdDbGFzc109XCJmaWVsZC5uZ0NsYXNzXCIgW2Zvcm1Db250cm9sTmFtZV09XCJmaWVsZC5uYW1lXCIgW3BsYWNlaG9sZGVyXT1cImZpZWxkLnBsYWNlaG9sZGVyIHwgdHJhbnNsYXRlXCIgW3R5cGVdPVwiZmllbGQuaW5wdXRUeXBlXCIgXG4gICAgICAgICAgICBbbWF4TGVuZ3RoXT1cImZpZWxkLm1heExlbmd0aFwiIFttaW5dPVwiZmllbGQubWluXCIgW21heF09XCJmaWVsZC5tYXhcIiBbc3RlcF09XCJmaWVsZC5zdGVwXCJcbiAgICAgICAgICAgIFttYXRBdXRvY29tcGxldGVdPVwiYXV0b1wiPlxuXG4gICAgICAgICAgICA8bWF0LWF1dG9jb21wbGV0ZSAjYXV0bz1cIm1hdEF1dG9jb21wbGV0ZVwiIFtkaXNwbGF5V2l0aF09XCJkaXNwbGF5Rm4uYmluZCh0aGlzKVwiIFtwYW5lbFdpZHRoXT1cInRoaXMuZmllbGQucGFuZWxXaWR0aFwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBvcHRpb24gb2YgZmlsdGVyZWRPcHRpb24gfCBhc3luY1wiIFt2YWx1ZV09XCJvcHRpb25cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7ZmllbGQucHJvcGVydHkgPyBvcHRpb25bZmllbGQucHJvcGVydHldIDogb3B0aW9ufX1cbiAgICAgICAgICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LW9wdGlvbiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIGZpbHRlcmVkT3B0aW9uIHwgYXN5bmNcIiBbdmFsdWVdPVwib3B0aW9uXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNDb21wb25lbnQgW2NvbXBvbmVudF09XCJmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnRcIiBbdmFsdWVdPVwib3B0aW9uXCIgW2ZpZWxkXT1cImZpZWxkXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9tYXQtYXV0b2NvbXBsZXRlPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICA8bmctdGVtcGxhdGUgI25vdEF1dG9Db21wbGV0ZT5cbiAgICAgICAgICAgIDxpbnB1dCBtYXRJbnB1dCBtYXRUb29sdGlwPVwie3tmaWVsZC50b29sdGlwfX1cIiBbYXR0ci5pZF09XCJmaWVsZC5pZFwiIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucGxhY2Vob2xkZXIgfCB0cmFuc2xhdGVcIiBbdHlwZV09XCJmaWVsZC5pbnB1dFR5cGVcIlxuICAgICAgICAgICAgW21heExlbmd0aF09XCJmaWVsZC5tYXhMZW5ndGhcIiBbbWluXT1cImZpZWxkLm1pblwiIFttYXhdPVwiZmllbGQubWF4XCIgW3N0ZXBdPVwiZmllbGQuc3RlcFwiPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuXG4gICAgICAgIDxtYXQtc3Bpbm5lciBtYXRTdWZmaXggbW9kZT1cImluZGV0ZXJtaW5hdGVcIiAqbmdJZj1cImlzUGVuZGluZygpXCIgZGlhbWV0ZXI9XCIxN1wiPjwvbWF0LXNwaW5uZXI+XG5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImdyb3VwLmdldChmaWVsZC5uYW1lKS5oYXNFcnJvcih2YWxpZGF0aW9uLm5hbWUpXCI+e3t2YWxpZGF0aW9uLm1lc3NhZ2UgfCB0cmFuc2xhdGV9fTwvbWF0LWVycm9yPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC5hc3luY1ZhbGlkYXRpb25zO1wiIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XG4gICAgICAgICAgICA8bWF0LWVycm9yICpuZ0lmPVwiZ3JvdXAuZ2V0KGZpZWxkLm5hbWUpLmhhc0Vycm9yKHZhbGlkYXRpb24ubmFtZSlcIj57e3ZhbGlkYXRpb24ubWVzc2FnZSB8IHRyYW5zbGF0ZX19PC9tYXQtZXJyb3I+XG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG4gICAgYCxcbiAgICBzdHlsZXM6IFsnbWF0LWZvcm0tZmllbGQge3dpZHRoOiBjYWxjKDEwMCUpfSddXG59KVxuZXhwb3J0IGNsYXNzIEtsZXNGb3JtSW5wdXRDb21wb25lbnQgZXh0ZW5kcyBLbGVzRmllbGRBYnN0cmFjdCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcblxuICAgIGZpbHRlcmVkT3B0aW9uOiBPYnNlcnZhYmxlPGFueVtdPjtcbiAgICBvcHRpb25zJDogT2JzZXJ2YWJsZTxhbnlbXT47XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcblxuICAgICAgICBpZiAodGhpcy5maWVsZC5vcHRpb25zIGluc3RhbmNlb2YgT2JzZXJ2YWJsZSkge1xuICAgICAgICAgICAgdGhpcy5vcHRpb25zJCA9IHRoaXMuZmllbGQub3B0aW9ucztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMub3B0aW9ucyQgPSBvZih0aGlzLmZpZWxkLm9wdGlvbnMpO1xuICAgICAgICB9XG5cblxuICAgICAgICB0aGlzLmZpbHRlcmVkT3B0aW9uID0gdGhpcy5ncm91cC5nZXQodGhpcy5maWVsZC5uYW1lKS52YWx1ZUNoYW5nZXNcbiAgICAgICAgICAgIC5waXBlKFxuICAgICAgICAgICAgICAgIHN0YXJ0V2l0aCgnJyksXG4gICAgICAgICAgICAgICAgLy8gbWFwKGRhdGEgPT4gZGF0YSA/IHRoaXMuZmlsdGVyRGF0YShkYXRhKSA6IHRoaXMuZmllbGQub3B0aW9ucy5zbGljZSgpKVxuICAgICAgICAgICAgICAgIHN3aXRjaE1hcChkYXRhID0+IGRhdGEgPyB0aGlzLmZpbHRlckRhdGEoZGF0YSkgOiB0aGlzLm9wdGlvbnMkKVxuICAgICAgICAgICAgKTtcbiAgICAgICAgaWYgKCF0aGlzLmZpZWxkLm1heExlbmd0aCkge1xuICAgICAgICAgICAgdGhpcy5maWVsZC5tYXhMZW5ndGggPSA1MjQyODg7IC8vIE1heCBkZWZhdWx0IGlucHV0IFczQ1xuICAgICAgICB9XG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgfVxuXG4gICAgaXNQZW5kaW5nKCkge1xuICAgICAgICByZXR1cm4gKHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXS5wZW5kaW5nIHx8IHRoaXMuZmllbGQucGVuZGluZyk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBmaWx0ZXJEYXRhKHZhbHVlOiBhbnkpOiBPYnNlcnZhYmxlPGFueVtdPiB7XG4gICAgICAgIGxldCBmaWx0ZXJWYWx1ZTtcblxuICAgICAgICBpZiAodHlwZW9mIHZhbHVlID09PSAnc3RyaW5nJyAmJiBPYmplY3QucHJvdG90eXBlLnRvU3RyaW5nLmNhbGwodmFsdWUpID09PSAnW29iamVjdCBTdHJpbmddJykge1xuICAgICAgICAgICAgZmlsdGVyVmFsdWUgPSB2YWx1ZS50b0xvd2VyQ2FzZSgpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgZmlsdGVyVmFsdWUgPSB2YWx1ZVt0aGlzLmZpZWxkLnByb3BlcnR5XS50b0xvd2VyQ2FzZSgpO1xuICAgICAgICB9XG5cbiAgICAgICAgaWYgKHRoaXMuZmllbGQucHJvcGVydHkpIHtcbiAgICAgICAgICAgIHJldHVybiB0aGlzLm9wdGlvbnMkXG4gICAgICAgICAgICAgICAgLnBpcGUobWFwKG9wdGlvbnMgPT4gb3B0aW9ucy5maWx0ZXIob3B0aW9uID0+IG9wdGlvblt0aGlzLmZpZWxkLnByb3BlcnR5XS50b0xvd2VyQ2FzZSgpLmluZGV4T2YoZmlsdGVyVmFsdWUpID09PSAwKSkpO1xuICAgICAgICAgICAgLy8gcmV0dXJuIHRoaXMuZmllbGQub3B0aW9uc1xuICAgICAgICAgICAgLy8gICAgIC5maWx0ZXIoZGF0YSA9PiBkYXRhW3RoaXMuZmllbGQucHJvcGVydHldLnRvTG93ZXJDYXNlKCkuaW5kZXhPZihmaWx0ZXJWYWx1ZSkgPT09IDApO1xuICAgICAgICB9XG4gICAgICAgIC8vIHJldHVybiB0aGlzLmZpZWxkLm9wdGlvbnMuZmlsdGVyKGRhdGEgPT4gZGF0YS50b0xvd2VyQ2FzZSgpLmluZGV4T2YoZmlsdGVyVmFsdWUpID09PSAwKTtcbiAgICAgICAgcmV0dXJuIHRoaXMub3B0aW9ucyQucGlwZShtYXAob3B0aW9ucyA9PiBvcHRpb25zLmZpbHRlcihvcHRpb24gPT4gb3B0aW9uLnRvTG93ZXJDYXNlKCkuaW5kZXhPZihmaWx0ZXJWYWx1ZSkgPT09IDApKSk7XG4gICAgfVxuXG4gICAgZGlzcGxheUZuKHZhbHVlOiBhbnkpIHtcbiAgICAgICAgaWYgKHRoaXMuZmllbGQuZGlzcGxheVdpdGgpIHtcbiAgICAgICAgICAgIHJldHVybiB0aGlzLmZpZWxkLmRpc3BsYXlXaXRoKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGlmICh2YWx1ZSAmJiB0aGlzLmZpZWxkICYmIHRoaXMuZmllbGQucHJvcGVydHkpIHtcbiAgICAgICAgICAgICAgICByZXR1cm4gdmFsdWVbdGhpcy5maWVsZC5wcm9wZXJ0eV0gPyB2YWx1ZVt0aGlzLmZpZWxkLnByb3BlcnR5XSA6ICcnO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgcmV0dXJuIHZhbHVlID8gdmFsdWUgOiAnJztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cbiJdfQ==

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

@@ -0,0 +1,40 @@
+import { Component } from "@angular/core";
+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 "@angular/flex-layout/extended";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/material/tooltip";
+import * as i6 from "@ngx-translate/core";
+export class KlesFormLabelComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        this.group.controls[this.field.name].disable();
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", 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" 
+        [ngStyle]="{'color':'inherit'}" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType">
+    </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.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kles-form-label",
+                    template: `
+    <div [formGroup]="group" >
+        <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" 
+        [ngClass]="field.ngClass" 
+        [ngStyle]="{'color':'inherit'}" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType">
+    </div>
+`
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGFiZWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvbGFiZWwuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7Ozs7OztBQWFyRCxNQUFNLE9BQU8sc0JBQXVCLFNBQVEsaUJBQWlCO0lBRXpELFFBQVE7UUFDSixJQUFJLENBQUMsS0FBSyxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQy9DLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOzttSEFUUSxzQkFBc0I7dUdBQXRCLHNCQUFzQiw4RUFSckI7Ozs7OztDQU1iOzJGQUVZLHNCQUFzQjtrQkFWbEMsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixRQUFRLEVBQUU7Ozs7OztDQU1iO2lCQUNBIiwic291cmNlc0NvbnRlbnQiOlsiXG5pbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEtsZXNGaWVsZEFic3RyYWN0IH0gZnJvbSAnLi9maWVsZC5hYnN0cmFjdCc7XG5cblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6IFwia2xlcy1mb3JtLWxhYmVsXCIsXG4gICAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiA+XG4gICAgICAgIDxpbnB1dCBtYXRJbnB1dCBtYXRUb29sdGlwPVwie3tmaWVsZC50b29sdGlwfX1cIiBbYXR0ci5pZF09XCJmaWVsZC5pZFwiIFxuICAgICAgICBbbmdDbGFzc109XCJmaWVsZC5uZ0NsYXNzXCIgXG4gICAgICAgIFtuZ1N0eWxlXT1cInsnY29sb3InOidpbmhlcml0J31cIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucGxhY2Vob2xkZXIgfCB0cmFuc2xhdGVcIiBbdHlwZV09XCJmaWVsZC5pbnB1dFR5cGVcIj5cbiAgICA8L2Rpdj5cbmBcbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1MYWJlbENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMuZ3JvdXAuY29udHJvbHNbdGhpcy5maWVsZC5uYW1lXS5kaXNhYmxlKCk7XG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHN1cGVyLm5nT25EZXN0cm95KCk7XG4gICAgfVxufSJdfQ==

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

@@ -0,0 +1,23 @@
+import { __decorate } from "tslib";
+import { Component } from '@angular/core';
+import { FieldMapper } from '../decorators/component.decorator';
+import { EnumType } from '../enums/type.enum';
+import { KlesFieldAbstract } from './field.abstract';
+import * as i0 from "@angular/core";
+let KlesFormLineBreakComponent = class KlesFormLineBreakComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+};
+KlesFormLineBreakComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLineBreakComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.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"] });
+KlesFormLineBreakComponent = __decorate([
+    FieldMapper({ type: EnumType.lineBreak })
+], KlesFormLineBreakComponent);
+export { KlesFormLineBreakComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-line-break', template: ``, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluZS1icmVhay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGVzLW1hdGVyaWFsLWR5bmFtaWNmb3Jtcy9zcmMvbGliL2ZpZWxkcy9saW5lLWJyZWFrLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFDN0QsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7SUFjeEMsMEJBQTBCLFNBQTFCLDBCQUEyQixTQUFRLGlCQUFpQjtJQUM3RCxRQUFRLEtBQUssS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQztJQUNoQyxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7Q0FDSixDQUFBO3VIQUxZLDBCQUEwQjsyR0FBMUIsMEJBQTBCLG1GQVR6QixFQUFFO0FBU0gsMEJBQTBCO0lBWnRDLFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxRQUFRLENBQUMsU0FBUyxFQUFFLENBQUM7R0FZN0IsMEJBQTBCLENBS3RDO1NBTFksMEJBQTBCOzJGQUExQiwwQkFBMEI7a0JBWHRDLFNBQVM7K0JBQ0ksc0JBQXNCLFlBQ3RCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGaWVsZE1hcHBlciB9IGZyb20gJy4uL2RlY29yYXRvcnMvY29tcG9uZW50LmRlY29yYXRvcic7XG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBLbGVzRmllbGRBYnN0cmFjdCB9IGZyb20gJy4vZmllbGQuYWJzdHJhY3QnO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5saW5lQnJlYWsgfSlcbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2xlcy1mb3JtLWxpbmUtYnJlYWsnLFxuICAgIHRlbXBsYXRlOiBgYCxcbiAgICBzdHlsZXM6IFtcbiAgICAgICAgYDpob3N0e1xuICAgICAgICAgICAgZmxleC1iYXNpczogMTAwJTtcbiAgICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgICAgICBoZWlnaHQ6MDtcbiAgICAgICAgfWBcbiAgICBdXG59KVxuZXhwb3J0IGNsYXNzIEtsZXNGb3JtTGluZUJyZWFrQ29tcG9uZW50IGV4dGVuZHMgS2xlc0ZpZWxkQWJzdHJhY3QgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgbmdPbkluaXQoKSB7IHN1cGVyLm5nT25Jbml0KCk7IH1cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICB9XG59XG4iXX0=

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

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { KlesFieldAbstract } from "./field.abstract";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/flex-layout/extended";
+import * as i3 from "@angular/material/tooltip";
+export class KlesFormLinkComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", 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.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-form-link',
+                    template: `
+        <a [href]="group.controls[field.name].value" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">
+            {{field.label}}
+        </a>
+`
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGVzLW1hdGVyaWFsLWR5bmFtaWNmb3Jtcy9zcmMvbGliL2ZpZWxkcy9saW5rLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7QUFVckQsTUFBTSxPQUFPLHFCQUFzQixTQUFRLGlCQUFpQjtJQUV4RCxRQUFRO1FBQ0osS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxXQUFXO1FBQ1AsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3hCLENBQUM7O2tIQVJRLHFCQUFxQjtzR0FBckIscUJBQXFCLDZFQU5wQjs7OztDQUliOzJGQUVZLHFCQUFxQjtrQkFSakMsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsZ0JBQWdCO29CQUMxQixRQUFRLEVBQUU7Ozs7Q0FJYjtpQkFDQSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tIFwiLi9maWVsZC5hYnN0cmFjdFwiO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2tsZXMtZm9ybS1saW5rJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgICAgICA8YSBbaHJlZl09XCJncm91cC5jb250cm9sc1tmaWVsZC5uYW1lXS52YWx1ZVwiIG1hdFRvb2x0aXA9XCJ7e2ZpZWxkLnRvb2x0aXB9fVwiIFthdHRyLmlkXT1cImZpZWxkLmlkXCIgW25nQ2xhc3NdPVwiZmllbGQubmdDbGFzc1wiPlxuICAgICAgICAgICAge3tmaWVsZC5sYWJlbH19XG4gICAgICAgIDwvYT5cbmBcbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1MaW5rQ29tcG9uZW50IGV4dGVuZHMgS2xlc0ZpZWxkQWJzdHJhY3QgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICAgICAgc3VwZXIubmdPbkluaXQoKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICB9XG59XG4iXX0=