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

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

@@ -0,0 +1,113 @@
+import { Component } from '@angular/core';
+import { KlesFieldAbstract } from './field.abstract';
+import { Validators } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/flex-layout/flex";
+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 "@ngx-translate/core";
+export class KlesFormListFieldComponent extends KlesFieldAbstract {
+    constructor(fb) {
+        super();
+        this.fb = fb;
+    }
+    ngOnInit() {
+        this.formArray = this.group.controls[this.field.name];
+        super.ngOnInit();
+    }
+    createFormGroup() {
+        const group = this.fb.group({});
+        this.field.collections.forEach(item => {
+            const control = this.fb.control(null, this.bindValidations(item.validations || []), this.bindAsyncValidations(item.asyncValidations || []));
+            group.addControl(item.name, control);
+        });
+        return group;
+    }
+    deleteField(index) {
+        this.formArray.removeAt(index);
+    }
+    addField() {
+        this.formArray.push(this.createFormGroup());
+    }
+    bindValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.compose(validList);
+        }
+        return null;
+    }
+    bindAsyncValidations(validations) {
+        if (validations.length > 0) {
+            const validList = [];
+            validations.forEach(valid => {
+                validList.push(valid.validator);
+            });
+            return Validators.composeAsync(validList);
+        }
+        return null;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormListFieldComponent, deps: [{ token: i1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+KlesFormListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormListFieldComponent, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group" class="form-element">
+        {{field.label | translate}}
+        <button mat-icon-button color="primary" (click)="addField()">
+            <mat-icon>add</mat-icon>
+        </button>
+
+        <div class="dynamic-form" [formGroupName]="field.name">
+            <div *ngFor="let subGroup of formArray.controls let index = index;" fxLayout="row" fxLayoutGap="5px">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    dynamicField [field]="subfield" [group]="subGroup">
+                </ng-container>
+                <button mat-icon-button (click)="deleteField(index)" color="primary">
+                    <mat-icon>delete_outlined</mat-icon>
+                </button>
+            </div>
+            <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>
+        </div>
+    </div>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.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: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormListFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-listfield', template: `
+    <div [formGroup]="group" class="form-element">
+        {{field.label | translate}}
+        <button mat-icon-button color="primary" (click)="addField()">
+            <mat-icon>add</mat-icon>
+        </button>
+
+        <div class="dynamic-form" [formGroupName]="field.name">
+            <div *ngFor="let subGroup of formArray.controls let index = index;" fxLayout="row" fxLayoutGap="5px">
+                <ng-container *ngFor="let subfield of field.collections;"
+                    dynamicField [field]="subfield" [group]="subGroup">
+                </ng-container>
+                <button mat-icon-button (click)="deleteField(index)" color="primary">
+                    <mat-icon>delete_outlined</mat-icon>
+                </button>
+            </div>
+            <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>
+        </div>
+    </div>
+    ` }]
+        }], ctorParameters: function () { return [{ type: i1.UntypedFormBuilder }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1maWVsZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGVzLW1hdGVyaWFsLWR5bmFtaWNmb3Jtcy9zcmMvbGliL2ZpZWxkcy9saXN0LWZpZWxkLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQztBQUM3RCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUNyRCxPQUFPLEVBQXVFLFVBQVUsRUFBb0IsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7O0FBZ0NuSSxNQUFNLE9BQU8sMEJBQTJCLFNBQVEsaUJBQWlCO0lBSTdELFlBQW9CLEVBQXNCO1FBQ3RDLEtBQUssRUFBRSxDQUFDO1FBRFEsT0FBRSxHQUFGLEVBQUUsQ0FBb0I7SUFFMUMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFxQixDQUFDO1FBQzFFLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRU8sZUFBZTtRQUNuQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUNoQyxJQUFJLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDbEMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxPQUFPLENBQzNCLElBQUksRUFDSixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxXQUFXLElBQUksRUFBRSxDQUFDLEVBQzVDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLElBQUksRUFBRSxDQUFDLENBQ3pELENBQUM7WUFDRixLQUFLLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUM7UUFFekMsQ0FBQyxDQUFDLENBQUM7UUFFSCxPQUFPLEtBQUssQ0FBQztJQUVqQixDQUFDO0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDckIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQztJQUNoRCxDQUFDO0lBR08sZUFBZSxDQUFDLFdBQTBDO1FBQzlELElBQUksV0FBVyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDeEIsTUFBTSxTQUFTLEdBQUcsRUFBRSxDQUFDO1lBQ3JCLFdBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3hCLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ3BDLENBQUMsQ0FBQyxDQUFDO1lBQ0gsT0FBTyxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1NBRXhDO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQztJQUdPLG9CQUFvQixDQUFDLFdBQStDO1FBQ3hFLElBQUksV0FBVyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDeEIsTUFBTSxTQUFTLEdBQUcsRUFBRSxDQUFDO1lBQ3JCLFdBQVcsQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3hCLFNBQVMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ3BDLENBQUMsQ0FBQyxDQUFDO1lBQ0gsT0FBTyxVQUFVLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1NBRTdDO1FBQ0QsT0FBTyxJQUFJLENBQUM7SUFDaEIsQ0FBQztJQUVELFdBQVc7UUFDUCxLQUFLLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDeEIsQ0FBQzs7dUhBakVRLDBCQUEwQjsyR0FBMUIsMEJBQTBCLGtGQTNCekI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQXdCVDsyRkFHUSwwQkFBMEI7a0JBN0J0QyxTQUFTOytCQUNJLHFCQUFxQixZQUNyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBd0JUIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkRlc3Ryb3ksIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgS2xlc0ZpZWxkQWJzdHJhY3QgfSBmcm9tICcuL2ZpZWxkLmFic3RyYWN0JztcbmltcG9ydCB7IFVudHlwZWRGb3JtR3JvdXAsIFVudHlwZWRGb3JtQXJyYXksIFVudHlwZWRGb3JtQnVpbGRlciwgVmFsaWRhdG9yRm4sIFZhbGlkYXRvcnMsIEFzeW5jVmFsaWRhdG9yRm4gfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBJS2xlc1ZhbGlkYXRvciB9IGZyb20gJy4uL2ludGVyZmFjZXMvdmFsaWRhdG9yLmludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2xlcy1mb3JtLWxpc3RmaWVsZCcsXG4gICAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtmb3JtR3JvdXBdPVwiZ3JvdXBcIiBjbGFzcz1cImZvcm0tZWxlbWVudFwiPlxuICAgICAgICB7e2ZpZWxkLmxhYmVsIHwgdHJhbnNsYXRlfX1cbiAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gY29sb3I9XCJwcmltYXJ5XCIgKGNsaWNrKT1cImFkZEZpZWxkKClcIj5cbiAgICAgICAgICAgIDxtYXQtaWNvbj5hZGQ8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZHluYW1pYy1mb3JtXCIgW2Zvcm1Hcm91cE5hbWVdPVwiZmllbGQubmFtZVwiPlxuICAgICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgc3ViR3JvdXAgb2YgZm9ybUFycmF5LmNvbnRyb2xzIGxldCBpbmRleCA9IGluZGV4O1wiIGZ4TGF5b3V0PVwicm93XCIgZnhMYXlvdXRHYXA9XCI1cHhcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCBzdWJmaWVsZCBvZiBmaWVsZC5jb2xsZWN0aW9ucztcIlxuICAgICAgICAgICAgICAgICAgICBkeW5hbWljRmllbGQgW2ZpZWxkXT1cInN1YmZpZWxkXCIgW2dyb3VwXT1cInN1Ykdyb3VwXCI+XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiBtYXQtaWNvbi1idXR0b24gKGNsaWNrKT1cImRlbGV0ZUZpZWxkKGluZGV4KVwiIGNvbG9yPVwicHJpbWFyeVwiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+ZGVsZXRlX291dGxpbmVkPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKVwiPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC5hc3luY1ZhbGlkYXRpb25zO1wiIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImdyb3VwLmdldChmaWVsZC5uYW1lKS5oYXNFcnJvcih2YWxpZGF0aW9uLm5hbWUpXCI+e3t2YWxpZGF0aW9uLm1lc3NhZ2UgfCB0cmFuc2xhdGV9fTwvbWF0LWVycm9yPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIGAsXG4gICAgc3R5bGVzOiBbXVxufSlcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybUxpc3RGaWVsZENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgZm9ybUFycmF5OiBVbnR5cGVkRm9ybUFycmF5O1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBmYjogVW50eXBlZEZvcm1CdWlsZGVyKSB7XG4gICAgICAgIHN1cGVyKCk7XG4gICAgfVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm9ybUFycmF5ID0gdGhpcy5ncm91cC5jb250cm9sc1t0aGlzLmZpZWxkLm5hbWVdIGFzIFVudHlwZWRGb3JtQXJyYXk7XG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBjcmVhdGVGb3JtR3JvdXAoKTogVW50eXBlZEZvcm1Hcm91cCB7XG4gICAgICAgIGNvbnN0IGdyb3VwID0gdGhpcy5mYi5ncm91cCh7fSk7XG4gICAgICAgIHRoaXMuZmllbGQuY29sbGVjdGlvbnMuZm9yRWFjaChpdGVtID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGNvbnRyb2wgPSB0aGlzLmZiLmNvbnRyb2woXG4gICAgICAgICAgICAgICAgbnVsbCxcbiAgICAgICAgICAgICAgICB0aGlzLmJpbmRWYWxpZGF0aW9ucyhpdGVtLnZhbGlkYXRpb25zIHx8IFtdKSxcbiAgICAgICAgICAgICAgICB0aGlzLmJpbmRBc3luY1ZhbGlkYXRpb25zKGl0ZW0uYXN5bmNWYWxpZGF0aW9ucyB8fCBbXSlcbiAgICAgICAgICAgICk7XG4gICAgICAgICAgICBncm91cC5hZGRDb250cm9sKGl0ZW0ubmFtZSwgY29udHJvbCk7XG5cbiAgICAgICAgfSk7XG5cbiAgICAgICAgcmV0dXJuIGdyb3VwO1xuXG4gICAgfVxuXG4gICAgZGVsZXRlRmllbGQoaW5kZXg6IG51bWJlcikge1xuICAgICAgICB0aGlzLmZvcm1BcnJheS5yZW1vdmVBdChpbmRleCk7XG4gICAgfVxuXG4gICAgYWRkRmllbGQoKSB7XG4gICAgICAgIHRoaXMuZm9ybUFycmF5LnB1c2godGhpcy5jcmVhdGVGb3JtR3JvdXAoKSk7XG4gICAgfVxuXG5cbiAgICBwcml2YXRlIGJpbmRWYWxpZGF0aW9ucyh2YWxpZGF0aW9uczogSUtsZXNWYWxpZGF0b3I8VmFsaWRhdG9yRm4+W10pOiBWYWxpZGF0b3JGbiB7XG4gICAgICAgIGlmICh2YWxpZGF0aW9ucy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICBjb25zdCB2YWxpZExpc3QgPSBbXTtcbiAgICAgICAgICAgIHZhbGlkYXRpb25zLmZvckVhY2godmFsaWQgPT4ge1xuICAgICAgICAgICAgICAgIHZhbGlkTGlzdC5wdXNoKHZhbGlkLnZhbGlkYXRvcik7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICAgIHJldHVybiBWYWxpZGF0b3JzLmNvbXBvc2UodmFsaWRMaXN0KTtcblxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuXG4gICAgcHJpdmF0ZSBiaW5kQXN5bmNWYWxpZGF0aW9ucyh2YWxpZGF0aW9uczogSUtsZXNWYWxpZGF0b3I8QXN5bmNWYWxpZGF0b3JGbj5bXSk6IEFzeW5jVmFsaWRhdG9yRm4ge1xuICAgICAgICBpZiAodmFsaWRhdGlvbnMubGVuZ3RoID4gMCkge1xuICAgICAgICAgICAgY29uc3QgdmFsaWRMaXN0ID0gW107XG4gICAgICAgICAgICB2YWxpZGF0aW9ucy5mb3JFYWNoKHZhbGlkID0+IHtcbiAgICAgICAgICAgICAgICB2YWxpZExpc3QucHVzaCh2YWxpZC52YWxpZGF0b3IpO1xuICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICByZXR1cm4gVmFsaWRhdG9ycy5jb21wb3NlQXN5bmModmFsaWRMaXN0KTtcblxuICAgICAgICB9XG4gICAgICAgIHJldHVybiBudWxsO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn1cblxuIl19

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

@@ -0,0 +1,49 @@
+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/form-field";
+import * as i5 from "@angular/material/radio";
+import * as i6 from "@angular/material/tooltip";
+import * as i7 from "@ngx-translate/core";
+export class KlesFormRadioComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+KlesFormRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+KlesFormRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormRadioComponent, selector: "kles-form-radiobutton", usesInheritance: true, ngImport: i0, template: `
+    <div [formGroup]="group">
+        <label class="radio-label-padding">{{field.label}}</label>
+        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">
+            <mat-radio-button *ngFor="let item of field.options" [value]="item">{{item}}</mat-radio-button>
+        </mat-radio-group>
+        <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>
+    </div>
+`, isInline: true, 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.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: "directive", type: i5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-radiobutton', template: `
+    <div [formGroup]="group">
+        <label class="radio-label-padding">{{field.label}}</label>
+        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">
+            <mat-radio-button *ngFor="let item of field.options" [value]="item">{{item}}</mat-radio-button>
+        </mat-radio-group>
+        <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>
+    </div>
+` }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xlcy1tYXRlcmlhbC1keW5hbWljZm9ybXMvc3JjL2xpYi9maWVsZHMvcmFkaW8uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQzdELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDOzs7Ozs7Ozs7QUFvQnJELE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxpQkFBaUI7SUFFekQsUUFBUSxLQUFLLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFFaEMsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDOzttSEFOUSxzQkFBc0I7dUdBQXRCLHNCQUFzQixvRkFoQnJCOzs7Ozs7Ozs7Ozs7O0NBYWI7MkZBR1ksc0JBQXNCO2tCQWxCbEMsU0FBUzsrQkFDSSx1QkFBdUIsWUFDdkI7Ozs7Ozs7Ozs7Ozs7Q0FhYiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEtsZXNGaWVsZEFic3RyYWN0IH0gZnJvbSAnLi9maWVsZC5hYnN0cmFjdCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2xlcy1mb3JtLXJhZGlvYnV0dG9uJyxcbiAgICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW2Zvcm1Hcm91cF09XCJncm91cFwiPlxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJyYWRpby1sYWJlbC1wYWRkaW5nXCI+e3tmaWVsZC5sYWJlbH19PC9sYWJlbD5cbiAgICAgICAgPG1hdC1yYWRpby1ncm91cCBtYXRUb29sdGlwPVwie3tmaWVsZC50b29sdGlwfX1cIiBbYXR0ci5pZF09XCJmaWVsZC5pZFwiIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIj5cbiAgICAgICAgICAgIDxtYXQtcmFkaW8tYnV0dG9uICpuZ0Zvcj1cImxldCBpdGVtIG9mIGZpZWxkLm9wdGlvbnNcIiBbdmFsdWVdPVwiaXRlbVwiPnt7aXRlbX19PC9tYXQtcmFkaW8tYnV0dG9uPlxuICAgICAgICA8L21hdC1yYWRpby1ncm91cD5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKVwiPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC5hc3luY1ZhbGlkYXRpb25zO1wiIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImdyb3VwLmdldChmaWVsZC5uYW1lKS5oYXNFcnJvcih2YWxpZGF0aW9uLm5hbWUpXCI+e3t2YWxpZGF0aW9uLm1lc3NhZ2UgfCB0cmFuc2xhdGV9fTwvbWF0LWVycm9yPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG5gLFxuICAgIHN0eWxlczogW11cbn0pXG5leHBvcnQgY2xhc3MgS2xlc0Zvcm1SYWRpb0NvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgbmdPbkluaXQoKSB7IHN1cGVyLm5nT25Jbml0KCk7IH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgIH1cbn0iXX0=

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

@@ -0,0 +1,210 @@
+import { __decorate } from "tslib";
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { Component, ViewChild, ViewChildren } from '@angular/core';
+import { MatOption } from '@angular/material/core';
+import { Observable, of } from 'rxjs';
+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 "@angular/material/form-field";
+import * as i5 from "@angular/material/select";
+import * as i6 from "@angular/material/core";
+import * as i7 from "@angular/material/tooltip";
+import * as i8 from "@angular/cdk/scrolling";
+import * as i9 from "../directive/dynamic-component.directive";
+import * as i10 from "@ngx-translate/core";
+import * as i11 from "../pipe/transform.pipe";
+let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
+    constructor() {
+        super();
+        this.compareFn = (o1, o2) => {
+            if (this.field.property && o1 && o2) {
+                return o1[this.field.property] === o2[this.field.property];
+            }
+            return o1 === o2;
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!(this.field.options instanceof Observable)) {
+            this.options$ = of(this.field.options);
+        }
+        else {
+            this.options$ = this.field.options;
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    openChange($event) {
+        if (this.field.virtualScroll) {
+            if ($event) {
+                this.cdkVirtualScrollViewport.scrollToIndex(0);
+                this.cdkVirtualScrollViewport.checkViewportSize();
+            }
+        }
+    }
+};
+KlesFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+KlesFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: KlesFormSelectComponent, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item"  [disabled]="item?.disabled">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                    <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        </mat-select>
+        <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.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: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "directive", type: i5.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i6.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i9.KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }, { kind: "pipe", type: i11.KlesTransformPipe, name: "klesTransform" }] });
+KlesFormSelectComponent = __decorate([
+    FieldMapper({ type: EnumType.select })
+], KlesFormSelectComponent);
+export { KlesFormSelectComponent };
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-select', template: `
+    <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
+        <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
+        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        <mat-select-trigger *ngIf="field.triggerComponent">
+            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
+        </mat-select-trigger>
+
+
+        <ng-container *ngIf="!field.virtualScroll">
+            <ng-container *ngIf="!field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>
+            </ng-container>
+
+            <ng-container *ngIf="field.autocompleteComponent">
+                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                </mat-option>
+            </ng-container>
+        </ng-container>
+
+        <ng-container *ngIf="field.virtualScroll">
+            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>
+                <ng-container *ngIf="!field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item"  [disabled]="item?.disabled">
+                    {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                    </mat-option>
+
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                    <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+
+                <ng-container *ngIf="field.autocompleteComponent">
+                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
+                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                    </mat-option>
+                    <ng-container *ngIf="field.multiple">
+                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"
+                        style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">
+                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">
+                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
+                        </mat-option>
+                    </ng-container>
+                </ng-container>
+            </cdk-virtual-scroll-viewport>
+
+        </ng-container>
+
+        </mat-select>
+        <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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { cdkVirtualScrollViewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], options: [{
+                type: ViewChildren,
+                args: [MatOption]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tsZXMtbWF0ZXJpYWwtZHluYW1pY2Zvcm1zL3NyYy9saWIvZmllbGRzL3NlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSx3QkFBd0IsRUFBb0IsTUFBTSx3QkFBd0IsQ0FBQztBQUNwRixPQUFPLEVBQW9DLFNBQVMsRUFBZ0MsU0FBUyxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNuSSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDbkQsT0FBTyxFQUFFLFVBQVUsRUFBRSxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFFdEMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ2hFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7Ozs7Ozs7OztJQStFeEMsdUJBQXVCLFNBQXZCLHVCQUF3QixTQUFRLGlCQUFpQjtJQU8xRDtRQUNJLEtBQUssRUFBRSxDQUFDO1FBMEJaLGNBQVMsR0FBRyxDQUFDLEVBQU8sRUFBRSxFQUFPLEVBQUUsRUFBRTtZQUM3QixJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxJQUFJLEVBQUUsSUFBSSxFQUFFLEVBQUU7Z0JBQ2pDLE9BQU8sRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUM7YUFDOUQ7WUFDRCxPQUFPLEVBQUUsS0FBSyxFQUFFLENBQUM7UUFDckIsQ0FBQyxDQUFBO0lBOUJELENBQUM7SUFFRCxRQUFRO1FBQ0osS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO1FBRWpCLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxZQUFZLFVBQVUsQ0FBQyxFQUFFO1lBQzdDLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7U0FDMUM7YUFBTTtZQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUM7U0FDdEM7SUFDTCxDQUFDO0lBRUQsV0FBVztRQUNQLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsVUFBVSxDQUFDLE1BQWU7UUFDdEIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsRUFBRTtZQUMxQixJQUFJLE1BQU0sRUFBRTtnQkFDUixJQUFJLENBQUMsd0JBQXdCLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFDO2dCQUMvQyxJQUFJLENBQUMsd0JBQXdCLENBQUMsaUJBQWlCLEVBQUUsQ0FBQzthQUNyRDtTQUNKO0lBQ0wsQ0FBQztDQVFKLENBQUE7b0hBeENZLHVCQUF1Qjt3R0FBdkIsdUJBQXVCLGtIQUVyQix3QkFBd0IsNkRBQ3JCLFNBQVMsdUVBN0ViOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXVFYjtBQUdZLHVCQUF1QjtJQTdFbkMsV0FBVyxDQUFDLEVBQUUsSUFBSSxFQUFFLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQztHQTZFMUIsdUJBQXVCLENBd0NuQztTQXhDWSx1QkFBdUI7MkZBQXZCLHVCQUF1QjtrQkE1RW5DLFNBQVM7K0JBQ0ksa0JBQWtCLFlBQ2xCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQXVFYjswRUFLd0Msd0JBQXdCO3NCQUE1RCxTQUFTO3VCQUFDLHdCQUF3QjtnQkFDVixPQUFPO3NCQUEvQixZQUFZO3VCQUFDLFNBQVMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnQsIFNjcm9sbERpc3BhdGNoZXIgfSBmcm9tICdAYW5ndWxhci9jZGsvc2Nyb2xsaW5nJztcbmltcG9ydCB7IEFmdGVyVmlld0luaXQsIENoYW5nZURldGVjdG9yUmVmLCBDb21wb25lbnQsIE9uRGVzdHJveSwgT25Jbml0LCBRdWVyeUxpc3QsIFZpZXdDaGlsZCwgVmlld0NoaWxkcmVuIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRPcHRpb24gfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBGaWVsZE1hcHBlciB9IGZyb20gJy4uL2RlY29yYXRvcnMvY29tcG9uZW50LmRlY29yYXRvcic7XG5pbXBvcnQgeyBFbnVtVHlwZSB9IGZyb20gJy4uL2VudW1zL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBLbGVzRmllbGRBYnN0cmFjdCB9IGZyb20gJy4vZmllbGQuYWJzdHJhY3QnO1xuXG5ARmllbGRNYXBwZXIoeyB0eXBlOiBFbnVtVHlwZS5zZWxlY3QgfSlcbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAna2xlcy1mb3JtLXNlbGVjdCcsXG4gICAgdGVtcGxhdGU6IGBcbiAgICA8bWF0LWZvcm0tZmllbGQgY2xhc3M9XCJtYXJnaW4tdG9wXCIgW2NvbG9yXT1cImZpZWxkLmNvbG9yXCIgW2Zvcm1Hcm91cF09XCJncm91cFwiPlxuICAgICAgICA8bWF0LXNlbGVjdCBtYXRUb29sdGlwPVwie3tmaWVsZC50b29sdGlwfX1cIiBbYXR0ci5pZF09XCJmaWVsZC5pZFwiXG4gICAgICAgIChvcGVuZWRDaGFuZ2UpPVwib3BlbkNoYW5nZSgkZXZlbnQpXCIgW2NvbXBhcmVXaXRoXT1cImNvbXBhcmVGblwiXG4gICAgICAgIFtuZ0NsYXNzXT1cImZpZWxkLm5nQ2xhc3NcIiBbcGxhY2Vob2xkZXJdPVwiZmllbGQucGxhY2Vob2xkZXIgfCB0cmFuc2xhdGVcIiBbZm9ybUNvbnRyb2xOYW1lXT1cImZpZWxkLm5hbWVcIiBbbXVsdGlwbGVdPVwiZmllbGQubXVsdGlwbGVcIj5cbiAgICAgICAgPG1hdC1zZWxlY3QtdHJpZ2dlciAqbmdJZj1cImZpZWxkLnRyaWdnZXJDb21wb25lbnRcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIga2xlc0NvbXBvbmVudCBbY29tcG9uZW50XT1cImZpZWxkLnRyaWdnZXJDb21wb25lbnRcIiBbdmFsdWVdPVwiZ3JvdXAuY29udHJvbHNbZmllbGQubmFtZV0udmFsdWVcIiBbZmllbGRdPVwiZmllbGRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPC9tYXQtc2VsZWN0LXRyaWdnZXI+XG5cblxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWZpZWxkLnZpcnR1YWxTY3JvbGxcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCI+XG4gICAgICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IGl0ZW0gb2Ygb3B0aW9ucyQgfCBhc3luY1wiIFt2YWx1ZV09XCJpdGVtXCIgW2Rpc2FibGVkXT1cIml0ZW0/LmRpc2FibGVkXCI+e3soZmllbGQucHJvcGVydHkgPyBpdGVtW2ZpZWxkLnByb3BlcnR5XSA6IGl0ZW0pIHwga2xlc1RyYW5zZm9ybTpmaWVsZC5waXBlVHJhbnNmb3JtfX08L21hdC1vcHRpb24+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiPlxuICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBpdGVtIG9mIG9wdGlvbnMkIHwgYXN5bmNcIiBbdmFsdWVdPVwiaXRlbVwiIFtkaXNhYmxlZF09XCJpdGVtPy5kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNDb21wb25lbnQgW2NvbXBvbmVudF09XCJmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnRcIiBbdmFsdWVdPVwiaXRlbVwiIFtmaWVsZF09XCJmaWVsZFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDwvbWF0LW9wdGlvbj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cblxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQudmlydHVhbFNjcm9sbFwiPlxuICAgICAgICAgICAgPGNkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydCBbaXRlbVNpemVdPVwiZmllbGQuaXRlbVNpemUgfHwgNTBcIiBbc3R5bGUuaGVpZ2h0LnB4XT01KjQ4PlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCI+XG4gICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpjZGtWaXJ0dWFsRm9yPVwibGV0IGl0ZW0gb2Ygb3B0aW9ucyQgfCBhc3luY1wiIFt2YWx1ZV09XCJpdGVtXCIgIFtkaXNhYmxlZF09XCJpdGVtPy5kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICAgICAgICB7eyhmaWVsZC5wcm9wZXJ0eSA/IGl0ZW1bZmllbGQucHJvcGVydHldIDogaXRlbSkgfCBrbGVzVHJhbnNmb3JtOmZpZWxkLnBpcGVUcmFuc2Zvcm19fVxuICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG5cbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkLm11bHRpcGxlXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LW9wdGlvbiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBncm91cC5jb250cm9sc1tmaWVsZC5uYW1lXS52YWx1ZSB8IHNsaWNlOjA6MzBcIiBbdmFsdWVdPVwiaXRlbVwiXG4gICAgICAgICAgICAgICAgICAgICAgICBzdHlsZT1cImRpc3BsYXk6bm9uZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7KGZpZWxkLnByb3BlcnR5ID8gaXRlbVtmaWVsZC5wcm9wZXJ0eV0gOiBpdGVtKSB8IGtsZXNUcmFuc2Zvcm06ZmllbGQucGlwZVRyYW5zZm9ybX19XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQubXVsdGlwbGUgJiYgZ3JvdXAuY29udHJvbHNbZmllbGQubmFtZV0udmFsdWVcIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IGl0ZW0gb2YgW2dyb3VwPy5jb250cm9sc1tmaWVsZC5uYW1lXT8udmFsdWVdXCIgW3ZhbHVlXT1cIml0ZW1cIiBzdHlsZT1cImRpc3BsYXk6bm9uZVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7KGZpZWxkLnByb3BlcnR5ID8gaXRlbVtmaWVsZC5wcm9wZXJ0eV0gOiBpdGVtKSB8IGtsZXNUcmFuc2Zvcm06ZmllbGQucGlwZVRyYW5zZm9ybX19XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1vcHRpb24+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImZpZWxkLmF1dG9jb21wbGV0ZUNvbXBvbmVudFwiPlxuICAgICAgICAgICAgICAgICAgICA8bWF0LW9wdGlvbiAqY2RrVmlydHVhbEZvcj1cImxldCBpdGVtIG9mIG9wdGlvbnMkIHwgYXN5bmNcIiBbdmFsdWVdPVwiaXRlbVwiIFtkaXNhYmxlZF09XCJpdGVtPy5kaXNhYmxlZFwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBrbGVzQ29tcG9uZW50IFtjb21wb25lbnRdPVwiZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCIgW3ZhbHVlXT1cIml0ZW1cIiBbZmllbGRdPVwiZmllbGRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZmllbGQubXVsdGlwbGVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBpdGVtIG9mIGdyb3VwLmNvbnRyb2xzW2ZpZWxkLm5hbWVdLnZhbHVlIHwgc2xpY2U6MDozMFwiIFt2YWx1ZV09XCJpdGVtXCJcbiAgICAgICAgICAgICAgICAgICAgICAgIHN0eWxlPVwiZGlzcGxheTpub25lXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBrbGVzQ29tcG9uZW50IFtjb21wb25lbnRdPVwiZmllbGQuYXV0b2NvbXBsZXRlQ29tcG9uZW50XCIgW3ZhbHVlXT1cIml0ZW1cIiBbZmllbGRdPVwiZmllbGRcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvbWF0LW9wdGlvbj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCIhZmllbGQubXVsdGlwbGUgJiYgZ3JvdXAuY29udHJvbHNbZmllbGQubmFtZV0udmFsdWVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxtYXQtb3B0aW9uICpuZ0Zvcj1cImxldCBpdGVtIG9mIFtncm91cD8uY29udHJvbHNbZmllbGQubmFtZV0/LnZhbHVlXVwiIFt2YWx1ZV09XCJpdGVtXCIgc3R5bGU9XCJkaXNwbGF5Om5vbmVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyIGtsZXNDb21wb25lbnQgW2NvbXBvbmVudF09XCJmaWVsZC5hdXRvY29tcGxldGVDb21wb25lbnRcIiBbdmFsdWVdPVwiaXRlbVwiIFtmaWVsZF09XCJmaWVsZFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvY2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0PlxuXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxuXG4gICAgICAgIDwvbWF0LXNlbGVjdD5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC52YWxpZGF0aW9ucztcIiBuZ1Byb2plY3RBcz1cIm1hdC1lcnJvclwiPlxuICAgICAgICAgICAgICAgIDxtYXQtZXJyb3IgKm5nSWY9XCJncm91cC5nZXQoZmllbGQubmFtZSkuaGFzRXJyb3IodmFsaWRhdGlvbi5uYW1lKVwiPnt7dmFsaWRhdGlvbi5tZXNzYWdlIHwgdHJhbnNsYXRlfX08L21hdC1lcnJvcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgdmFsaWRhdGlvbiBvZiBmaWVsZC5hc3luY1ZhbGlkYXRpb25zO1wiIG5nUHJvamVjdEFzPVwibWF0LWVycm9yXCI+XG4gICAgICAgICAgICAgICAgPG1hdC1lcnJvciAqbmdJZj1cImdyb3VwLmdldChmaWVsZC5uYW1lKS5oYXNFcnJvcih2YWxpZGF0aW9uLm5hbWUpXCI+e3t2YWxpZGF0aW9uLm1lc3NhZ2UgfCB0cmFuc2xhdGV9fTwvbWF0LWVycm9yPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9tYXQtZm9ybS1maWVsZD5cbmAsXG4gICAgc3R5bGVzOiBbJ21hdC1mb3JtLWZpZWxkIHt3aWR0aDogY2FsYygxMDAlKX0nXVxufSlcbmV4cG9ydCBjbGFzcyBLbGVzRm9ybVNlbGVjdENvbXBvbmVudCBleHRlbmRzIEtsZXNGaWVsZEFic3RyYWN0IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuXG4gICAgQFZpZXdDaGlsZChDZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnQpIGNka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydDogQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0O1xuICAgIEBWaWV3Q2hpbGRyZW4oTWF0T3B0aW9uKSBvcHRpb25zOiBRdWVyeUxpc3Q8TWF0T3B0aW9uPjtcblxuICAgIG9wdGlvbnMkOiBPYnNlcnZhYmxlPGFueVtdPjtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBzdXBlcigpO1xuICAgIH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICBzdXBlci5uZ09uSW5pdCgpO1xuXG4gICAgICAgIGlmICghKHRoaXMuZmllbGQub3B0aW9ucyBpbnN0YW5jZW9mIE9ic2VydmFibGUpKSB7XG4gICAgICAgICAgICB0aGlzLm9wdGlvbnMkID0gb2YodGhpcy5maWVsZC5vcHRpb25zKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHRoaXMub3B0aW9ucyQgPSB0aGlzLmZpZWxkLm9wdGlvbnM7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgc3VwZXIubmdPbkRlc3Ryb3koKTtcbiAgICB9XG5cbiAgICBvcGVuQ2hhbmdlKCRldmVudDogYm9vbGVhbikge1xuICAgICAgICBpZiAodGhpcy5maWVsZC52aXJ0dWFsU2Nyb2xsKSB7XG4gICAgICAgICAgICBpZiAoJGV2ZW50KSB7XG4gICAgICAgICAgICAgICAgdGhpcy5jZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnQuc2Nyb2xsVG9JbmRleCgwKTtcbiAgICAgICAgICAgICAgICB0aGlzLmNka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydC5jaGVja1ZpZXdwb3J0U2l6ZSgpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9XG4gICAgfVxuXG4gICAgY29tcGFyZUZuID0gKG8xOiBhbnksIG8yOiBhbnkpID0+IHtcbiAgICAgICAgaWYgKHRoaXMuZmllbGQucHJvcGVydHkgJiYgbzEgJiYgbzIpIHtcbiAgICAgICAgICAgIHJldHVybiBvMVt0aGlzLmZpZWxkLnByb3BlcnR5XSA9PT0gbzJbdGhpcy5maWVsZC5wcm9wZXJ0eV07XG4gICAgICAgIH1cbiAgICAgICAgcmV0dXJuIG8xID09PSBvMjtcbiAgICB9XG59XG4iXX0=