npm - @3kles/kles-material-dynamicforms - Versions diffs - 1.0.8 → 1.1.2 - Mend

@3kles/kles-material-dynamicforms 1.0.8 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/3kles-kles-material-dynamicforms.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"KlesMaterialDynamicformsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":78,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}],[{"__symbolic":"reference","name":"KlesDynamicFieldDirective"},{"__symbolic":"reference","name":"KlesComponentDirective"}],[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":86,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":87,"character":4},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":88,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":89,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":90,"character":4},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":92,"character":4},{"__symbolic":"reference","module":"ngx-mat-select-search","name":"NgxMatSelectSearchModule","line":93,"character":4}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":96,"character":15},"useClass":{"__symbolic":"reference","name":"KlesFormErrorStateMatcher"}},[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}]],"entryComponents":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}]],"exports":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}],[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}],[{"__symbolic":"reference","name":"KlesDynamicFieldDirective"},{"__symbolic":"reference","name":"KlesComponentDirective"}],{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":106,"character":4}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":108,"character":12},{"__symbolic":"reference","module":"@angular/core","name":"NO_ERRORS_SCHEMA","line":108,"character":36}]}]}],"members":{}},"KlesDynamicFieldDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":42,"character":1},"arguments":[{"selector":"[klesDynamicField]"}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"siblingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":52,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":53,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"buildComponent":[{"__symbolic":"method"}]}},"KlesComponentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[klesComponent]"}]}],"members":{"component":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":6,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":7,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":11,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":12,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"buildComponent":[{"__symbolic":"method"}]}},"IButton":{"__symbolic":"interface"},"IUIButton":{"__symbolic":"interface"},"KlesButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"kles-button","template":"\n <span>\n <button mat-button [ngClass]=\"classButton\" [color]=\"(color)?color:'primary'\" [disabled]=\"disabled\"\n (click)=\"click($event)\" [matTooltip]=\"tooltip\">\n {{label \| translate}}\n <mat-icon ngIf=\"icon\">{{icon}}</mat-icon>\n <mat-icon svgIcon=\"{{iconSvg}}\" ngIf=\"iconSvg\"></mat-icon>\n </button>\n </span>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":31,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonComponent"},"multi":true}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"iconSvg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"classButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"IButtonChecker":{"__symbolic":"interface"},"KlesButtonCheckerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"kles-button-checker","template":"\n <span ngIf=\"value.error && !value.busy\">\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [value]=\"value\" \n [tooltip]=\"tooltip\"\n matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n </kles-button>\n </span>\n <span style=\"text-align: center;\" ngIf=\"value.busy\|\|false\">\n <span style=\"text-align: center;margin-right: 10px\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </span>\n <span ngIf=\"value.message\" style=\"margin-right: 10px\">\n {{value.message\|translate}}...\n </span>\n </span>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":34,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},"multi":true}]}]}],"members":{"countError":[{"__symbolic":"method"}]}},"IButtonFile":{"__symbolic":"interface"},"KlesButtonFileComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"kles-button-file","template":"\n <input type=\"file\" #file style=\"display: none\" accept=\"{{accept}}\" (change)=\"onFileSelect($event.target)\" multiple />\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [value]=\"value\" (click)=\"click($event)\">\n </kles-button>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonFileComponent"},"multi":true}]}]}],"members":{"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":["file"]}]}],"click":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"onFileLoad":[{"__symbolic":"method"}],"onFileSelect":[{"__symbolic":"method"}],"readUploadedFile":[{"__symbolic":"method"}]}},"KlesFormBadgeComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-badge","template":"\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n matBadge=\"{{group.controls[field.name].value}}\" matBadgeOverlap=\"false\" matBadgeColor=\"{{field.color}}\">\n </span> \n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-form-button","template":"\n <div [formGroup]=\"group\">\n <kles-button \n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\"\n [tooltip]=\"field.tooltip\">\n </kles-button>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonCheckerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-button-checker","template":"\n <div [formGroup]=\"group\">\n <kles-button-checker\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\"\n [tooltip]=\"field.tooltip\">\n </kles-button-checker>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonFileComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-button-file","template":"\n <div [formGroup]=\"group\">\n <kles-button-file\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\">\n </kles-button-file>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSubmitButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-submit-button","template":"\n <div [formGroup]=\"group\">\n <button matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" type=\"submit\" [disabled]=\"field.disabled\" mat-raised-button color=\"primary\">{{field.label}}</button>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormCheckboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"kles-form-checkbox","template":"\n <div [formGroup]=\"group\" > \n <mat-checkbox matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [indeterminate]=\"field.indeterminate\" [formControlName]=\"field.name\">{{field.label \| translate}}</mat-checkbox>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormColorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"kles-form-color","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder \| translate\"\n [colorPicker]=\"group.get(field.name).value\"\n [value]=\"group.get(field.name).value\"\n (colorPickerChange)=\"group.get(field.name).setValue($event)\"\n class=\"colorPicker\"\n [style.background]=\"group.get(field.name).value\"\n [style.color]=\"invertColor(group.get(field.name).value,true)\"\n [formControlName]=\"field.name\">\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"invertColor":[{"__symbolic":"method"}]}},"KlesFormDateComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-datepicker","template":"\n <mat-form-field class=\"demo-full-width margin-top\" [formGroup]=\"group\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [matDatepicker]=\"picker\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-hint></mat-hint>\n \n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFieldAbstract":{"__symbolic":"class","members":{"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"applyPipeTransform":[{"__symbolic":"method"}]}},"KlesFormInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-input","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\" \n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n\n <mat-spinner matSuffix mode=\"indeterminate\" ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"isPending":[{"__symbolic":"method"}],"filterData":[{"__symbolic":"method"}],"displayFn":[{"__symbolic":"method"}]}},"KlesFormInputClearableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFormInputComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-input-clearable","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n <button mat-button matSuffix mat-icon-button aria-label=\"Clear\"\n (click)=\"group.controls[field.name].reset();\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode=\"indeterminate\" ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{}},"KlesFormLabelComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-label","template":"\n <div [formGroup]=\"group\" >\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" \n [ngClass]=\"field.ngClass\" \n [ngStyle]=\"{'color':'inherit'}\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\">\n </div>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormListFieldComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-listfield","template":"\n <div [formGroup]=\"group\" class=\"form-element\">\n {{field.label \| translate}}\n <button mat-icon-button color=\"primary\" (click)=\"addField()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <div class=\"dynamic-form\" [formGroupName]=\"field.name\">\n <div ngFor=\"let subGroup of formArray.controls let index = index;\" fxLayout=\"row\" fxLayoutGap=\"5px\">\n <ng-container ngFor=\"let subfield of field.collections;\"\n dynamicField [field]=\"subfield\" [group]=\"subGroup\">\n </ng-container>\n <button mat-icon-button (click)=\"deleteField(index)\" color=\"primary\">\n <mat-icon>delete_outlined</mat-icon>\n </button>\n </div>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </div>\n </div>\n ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":38,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"createFormGroup":[{"__symbolic":"method"}],"deleteField":[{"__symbolic":"method"}],"addField":[{"__symbolic":"method"}],"bindValidations":[{"__symbolic":"method"}],"bindAsyncValidations":[{"__symbolic":"method"}]}},"KlesFormRadioComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-radiobutton","template":"\n <div [formGroup]=\"group\">\n <label class=\"radio-label-padding\">{{field.label}}</label>\n <mat-radio-group matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\">\n <mat-radio-button ngFor=\"let item of field.options\" [value]=\"item\">{{item}}</mat-radio-button>\n </mat-radio-group>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"kles-form-select","template":"\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\"\n [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder \| translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\"></ng-container>\n </mat-select-trigger>\n\n\n <ng-container ngIf=\"!field.virtualScroll\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let item of options$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let item of options$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.virtualScroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize \|\| 50\" [style.height.px]=548>\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of options$ \| async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of options$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n </mat-select>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"cdkVirtualScrollViewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":85,"character":15}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":86,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":86,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"openChange":[{"__symbolic":"method"}]}},"KlesFormTextareaComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-textarea","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n <textarea matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n [formControlName]=\"field.name\" cdkTextareaAutosize [placeholder]=\"field.placeholder \| translate\"\n [cdkAutosizeMinRows]=\"field.textareaAutoSize?.minRows\" [cdkAutosizeMaxRows]=\"field.textareaAutoSize?.maxRows\">\n </textarea>\n\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormTextComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-text","template":"\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) \| klesTransform:field.pipeTransform}}\n </span> \n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormChipComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-chip","template":"\n <div [formGroup]=\"group\"> \n <mat-chip-list>\n <mat-chip [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" selected [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n <mat-icon ngIf=\"field.icon\">{{field.icon}}</mat-icon>\n {{group.controls[field.name].value \| klesTransform:field.pipeTransform}}\n </mat-chip>\n </mat-chip-list>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-group","template":"\n <div [formGroup]=\"group\" class=\"group-container\">\n <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction \|\| 'inherit'\" [ngClass]=\"field.ngClass\" >\n <ng-container ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\">\n </ng-container>\n </div>\n </div>\n","styles":["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormIconComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-icon","template":"\n <mat-icon [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n {{group.controls[field.name].value}}\n </mat-icon>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectSearchComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"kles-form-select-search","template":"\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\" \n [placeholder]=\"field.placeholder \| translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\"></ng-container>\n </mat-select-trigger>\n\n <ng-container ngIf=\"field.virtualScroll\">\n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize \|\| 50\" [style.height.px]=448>\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-checkbox ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' \| translate}}\n </mat-checkbox>\n <mat-option cdkVirtualFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n \n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n <ng-container ngIf=\"!field.virtualScroll\">\n \n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <mat-checkbox ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' \| translate}}\n </mat-checkbox>\n\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n\n </mat-select>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n","styles":["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]}]}],"members":{"cdkVirtualScrollViewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":115,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":115,"character":15}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":116,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":116,"character":18}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggleAllSelection":[{"__symbolic":"method"}],"openChange":[{"__symbolic":"method"}]}},"KlesFormLineBreakComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-line-break","template":"","styles":[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormLinkComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-link","template":"\n <a [href]=\"group.controls[field.name].value\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{field.label}}\n </a>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSlideToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-slide-toggle","template":"\n <div [formGroup]=\"group\" > \n <mat-slide-toggle matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [color]=\"field.color\" [formControlName]=\"field.name\">{{field.label \| translate}}</mat-slide-toggle>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectionListComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kles-form-selection-list","template":"\n <div class=\"margin-top\" [formGroup]=\"group\">\n <mat-selection-list [formControlName]=\"field.name\" [attr.id]=\"field.id\" [multiple]=\"field.multiple\" [ngClass]=\"field.ngClass\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-list-option [value]=\"item\" ngFor=\"let item of options$ \| async;\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-list-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-list-option ngFor=\"let item of options$ \| async;\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\"></ng-container>\n </mat-list-option>\n </ng-container>\n </mat-selection-list>\n\n </div>\n","styles":["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonToogleGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-form-button-toogle-group","template":"\n <div [formGroup]=\"group\" class=\"form-element\">\n <mat-button-toggle-group [formControlName]=\"field.name\" [multiple]=\"field.multiple\"\n [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n <mat-button-toggle ngFor=\"let item of options$ \| async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"IKlesComponent":{"__symbolic":"interface"},"IKlesField":{"__symbolic":"interface"},"IKlesFieldConfig":{"__symbolic":"interface"},"IKlesValidator":{"__symbolic":"interface"},"KlesFormErrorStateMatcher":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"isErrorState":[{"__symbolic":"method"}]}},"autocompleteObjectValidator":{"__symbolic":"function","parameters":["optional"],"value":{"__symbolic":"error","message":"Lambda not supported","line":3,"character":11,"module":"./lib/validators/autocomplete.validator"}},"autocompleteStringValidator":{"__symbolic":"function","parameters":["validOptions","optional"],"value":{"__symbolic":"error","message":"Lambda not supported","line":15,"character":11,"module":"./lib/validators/autocomplete.validator"}},"KlesDynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"exportAs":"klesDynamicForm","selector":"app-kles-dynamic-form","template":"\n <form class=\"{{orientationClass}}\" [formGroup]=\"form\" (submit)=\"onSubmit($event)\">\n <ng-container ngFor=\"let field of fields;\" class=\"{{orientationItemClass}}\" klesDynamicField [field]=\"field\" [group]=\"form\" [siblingFields]=\"fields\">\n </ng-container>\n <!--<button (click)=\"reset()\" mat-raised-button color=\"primary\">RESET</button>-->\n </form>\n ","styles":[".dynamic-form-column { display: flex;flex-direction: column; }",".dynamic-form-column > * { width: 100%; }",".dynamic-form-row { display: inline-flex;flex-wrap:wrap;gap:10px }",".dynamic-form-row > * { width: 100%; }",".dynamic-form-row-item { margin-right: 10px; }",".dynamic-form-column-item { margin-bottom: 10px; }"]}]}],"members":{"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"validators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"asyncValidators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"_onLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":48,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"updateForm":[{"__symbolic":"method"}],"createControl":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"bindValidations":[{"__symbolic":"method"}],"bindAsyncValidations":[{"__symbolic":"method"}],"validateAllFormFields":[{"__symbolic":"method"}]}},"ArrayFormatPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"arrayFormat"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"KlesTransformPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"klesTransform"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":42,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":43,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":44,"character":8},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":45,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":46,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":47,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":48,"character":8},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":49,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":50,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":51,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":52,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":53,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":54,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":55,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":56,"character":8},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":57,"character":8},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":58,"character":8},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":59,"character":8},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":60,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":61,"character":8},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":62,"character":8},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":63,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":64,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":65,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":66,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":67,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":68,"character":8},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":69,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":70,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":71,"character":8},{"__symbolic":"reference","module":"@angular/material/snack-bar","name":"MatSnackBarModule","line":72,"character":8},{"__symbolic":"reference","module":"@angular/material/tree","name":"MatTreeModule","line":73,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":74,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":75,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":76,"character":8},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":77,"character":8},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":78,"character":8}],"exports":[{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":82,"character":8},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":83,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":84,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":85,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":86,"character":8},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":87,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":88,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":89,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":90,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":91,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":92,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":93,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":94,"character":8},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":95,"character":8},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":96,"character":8},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":97,"character":8},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":98,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":99,"character":8},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":100,"character":8},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":101,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":102,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":103,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":104,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":105,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":106,"character":8},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":107,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":108,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":109,"character":8},{"__symbolic":"reference","module":"@angular/material/snack-bar","name":"MatSnackBarModule","line":110,"character":8},{"__symbolic":"reference","module":"@angular/material/tree","name":"MatTreeModule","line":111,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":112,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":113,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":114,"character":8},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":115,"character":8},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":116,"character":8},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkScrollable","line":117,"character":8},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":118,"character":8}],"providers":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":121,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":122,"character":8}]}]}],"members":{}}},"origins":{"KlesMaterialDynamicformsModule":"./lib/kles-material-dynamicforms.module","KlesDynamicFieldDirective":"./lib/directive/dynamic-field.directive","KlesComponentDirective":"./lib/directive/dynamic-component.directive","IButton":"./lib/forms/button-control.component","IUIButton":"./lib/forms/button-control.component","KlesButtonComponent":"./lib/forms/button-control.component","IButtonChecker":"./lib/forms/buttonchecker-control.component","KlesButtonCheckerComponent":"./lib/forms/buttonchecker-control.component","IButtonFile":"./lib/forms/buttonfile-control.component","KlesButtonFileComponent":"./lib/forms/buttonfile-control.component","KlesFormBadgeComponent":"./lib/fields/badge.component","KlesFormButtonComponent":"./lib/fields/button-form.component","KlesFormButtonCheckerComponent":"./lib/fields/buttonchecker-form.component","KlesFormButtonFileComponent":"./lib/fields/buttonfile-form.component","KlesFormSubmitButtonComponent":"./lib/fields/button-submit.component","KlesFormCheckboxComponent":"./lib/fields/checkbox.component","KlesFormColorComponent":"./lib/fields/color.component","KlesFormDateComponent":"./lib/fields/date.component","KlesFieldAbstract":"./lib/fields/field.abstract","KlesFormInputComponent":"./lib/fields/input.component","KlesFormInputClearableComponent":"./lib/fields/input.clearable.component","KlesFormLabelComponent":"./lib/fields/label.component","KlesFormListFieldComponent":"./lib/fields/list-field.component","KlesFormRadioComponent":"./lib/fields/radio.component","KlesFormSelectComponent":"./lib/fields/select.component","KlesFormTextareaComponent":"./lib/fields/textarea.component","KlesFormTextComponent":"./lib/fields/text.component","KlesFormChipComponent":"./lib/fields/chip.component","KlesFormGroupComponent":"./lib/fields/group.component","KlesFormIconComponent":"./lib/fields/icon.component","KlesFormSelectSearchComponent":"./lib/fields/select.search.component","KlesFormLineBreakComponent":"./lib/fields/line-break.component","KlesFormLinkComponent":"./lib/fields/link.component","KlesFormSlideToggleComponent":"./lib/fields/slide-toggle.component","KlesFormSelectionListComponent":"./lib/fields/selection-list.component","KlesFormButtonToogleGroupComponent":"./lib/fields/button-toogle-group.component","IKlesComponent":"./lib/interfaces/component.interface","IKlesField":"./lib/interfaces/field.interface","IKlesFieldConfig":"./lib/interfaces/field.config.interface","IKlesValidator":"./lib/interfaces/validator.interface","KlesFormErrorStateMatcher":"./lib/matcher/form-error.matcher","autocompleteObjectValidator":"./lib/validators/autocomplete.validator","autocompleteStringValidator":"./lib/validators/autocomplete.validator","KlesDynamicFormComponent":"./lib/dynamic-form.component","ArrayFormatPipe":"./lib/pipe/array.pipe","KlesTransformPipe":"./lib/pipe/transform.pipe","ɵa":"./lib/modules/material.module"},"importAs":"@3kles/kles-material-dynamicforms"}
1	+ {"__symbolic":"module","version":4,"metadata":{"KlesMaterialDynamicformsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":78,"character":1},"arguments":[{"declarations":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}],[{"__symbolic":"reference","name":"KlesDynamicFieldDirective"},{"__symbolic":"reference","name":"KlesComponentDirective"}],[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}]],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":86,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":87,"character":4},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":88,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":89,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":90,"character":4},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":92,"character":4},{"__symbolic":"reference","module":"ngx-mat-select-search","name":"NgxMatSelectSearchModule","line":93,"character":4}],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":96,"character":15},"useClass":{"__symbolic":"reference","name":"KlesFormErrorStateMatcher"}},[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}]],"entryComponents":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}]],"exports":[[{"__symbolic":"reference","name":"KlesDynamicFormComponent"},{"__symbolic":"reference","name":"KlesFormLabelComponent"},{"__symbolic":"reference","name":"KlesFormInputComponent"},{"__symbolic":"reference","name":"KlesFormInputClearableComponent"},{"__symbolic":"reference","name":"KlesFormSubmitButtonComponent"},{"__symbolic":"reference","name":"KlesFormBadgeComponent"},{"__symbolic":"reference","name":"KlesButtonComponent"},{"__symbolic":"reference","name":"KlesFormButtonComponent"},{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesFormButtonCheckerComponent"},{"__symbolic":"reference","name":"KlesButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormButtonFileComponent"},{"__symbolic":"reference","name":"KlesFormSelectComponent"},{"__symbolic":"reference","name":"KlesFormDateComponent"},{"__symbolic":"reference","name":"KlesFormRadioComponent"},{"__symbolic":"reference","name":"KlesFormCheckboxComponent"},{"__symbolic":"reference","name":"KlesFormListFieldComponent"},{"__symbolic":"reference","name":"KlesFormColorComponent"},{"__symbolic":"reference","name":"KlesFormTextareaComponent"},{"__symbolic":"reference","name":"KlesFormTextComponent"},{"__symbolic":"reference","name":"KlesFormChipComponent"},{"__symbolic":"reference","name":"KlesFormGroupComponent"},{"__symbolic":"reference","name":"KlesFormIconComponent"},{"__symbolic":"reference","name":"KlesFormSelectSearchComponent"},{"__symbolic":"reference","name":"KlesFormLineBreakComponent"},{"__symbolic":"reference","name":"KlesFormLinkComponent"},{"__symbolic":"reference","name":"KlesFormSlideToggleComponent"},{"__symbolic":"reference","name":"KlesFormSelectionListComponent"},{"__symbolic":"reference","name":"KlesFormButtonToogleGroupComponent"}],[{"__symbolic":"reference","name":"KlesTransformPipe"},{"__symbolic":"reference","name":"ArrayFormatPipe"}],[{"__symbolic":"reference","name":"KlesDynamicFieldDirective"},{"__symbolic":"reference","name":"KlesComponentDirective"}],{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":106,"character":4}],"schemas":[{"__symbolic":"reference","module":"@angular/core","name":"CUSTOM_ELEMENTS_SCHEMA","line":108,"character":12},{"__symbolic":"reference","module":"@angular/core","name":"NO_ERRORS_SCHEMA","line":108,"character":36}]}]}],"members":{}},"KlesDynamicFieldDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":42,"character":1},"arguments":[{"selector":"[klesDynamicField]"}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"siblingFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":52,"character":36},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":53,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"buildComponent":[{"__symbolic":"method"}]}},"KlesComponentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[klesComponent]"}]}],"members":{"component":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":14,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":15,"character":27}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"buildComponent":[{"__symbolic":"method"}]}},"IButton":{"__symbolic":"interface"},"IUIButton":{"__symbolic":"interface"},"KlesButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"kles-button","template":"\n <span>\n <button mat-button [ngClass]=\"classButton\" [color]=\"(color)?color:'primary'\" [disabled]=\"disabled\"\n (click)=\"click($event)\" [matTooltip]=\"tooltip\">\n {{label \| translate}}\n <mat-icon ngIf=\"icon\">{{icon}}</mat-icon>\n <mat-icon svgIcon=\"{{iconSvg}}\" ngIf=\"iconSvg\"></mat-icon>\n </button>\n </span>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":31,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonComponent"},"multi":true}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"iconSvg":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"classButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"tooltip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"click":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"IButtonChecker":{"__symbolic":"interface"},"KlesButtonCheckerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"kles-button-checker","template":"\n <span ngIf=\"value.error && !value.busy\">\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [value]=\"value\" \n [tooltip]=\"tooltip\"\n [disabled]=\"disabled\"\n matBadge=\"{{countError()}}\" (click)=\"click($event)\">\n </kles-button>\n </span>\n <span style=\"text-align: center;\">\n <span style=\"text-align: center;margin-right: 10px\" ngIf=\"value.busy\|\|false\">\n <mat-spinner [diameter]=\"25\"></mat-spinner>\n </span>\n <span ngIf=\"value.message\" style=\"margin-right: 10px\">\n {{value.message\|translate}}\n </span>\n </span>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":35,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonCheckerComponent"},"multi":true}]}]}],"members":{"countError":[{"__symbolic":"method"}]}},"IButtonFile":{"__symbolic":"interface"},"KlesButtonFileComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesButtonComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"kles-button-file","template":"\n <input type=\"file\" #file style=\"display: none\" accept=\"{{accept}}\" (change)=\"onFileSelect($event.target)\" multiple />\n <kles-button \n [classButton]=\"classButton\" \n [name]=\"name\" [label]=\"label\" [color]=\"color\" \n [icon]=\"icon\" [iconSvg]=\"iconSvg\"\n [disabled]=\"disabled\"\n [value]=\"value\" (click)=\"click($event)\">\n </kles-button>\n ","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":22,"character":21},"useExisting":{"__symbolic":"reference","name":"KlesButtonFileComponent"},"multi":true}]}]}],"members":{"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":5},"arguments":["file"]}]}],"click":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"onFileLoad":[{"__symbolic":"method"}],"onFileSelect":[{"__symbolic":"method"}],"readUploadedFile":[{"__symbolic":"method"}]}},"KlesFormBadgeComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-badge","template":"\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n matBadge=\"{{group.controls[field.name].value}}\" matBadgeOverlap=\"false\" matBadgeColor=\"{{field.color}}\">\n </span> \n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-form-button","template":"\n <div [formGroup]=\"group\">\n <kles-button \n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\"\n [tooltip]=\"field.tooltip\">\n </kles-button>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonCheckerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-button-checker","template":"\n <div [formGroup]=\"group\">\n <kles-button-checker\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\"\n [tooltip]=\"field.tooltip\">\n </kles-button-checker>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonFileComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-button-file","template":"\n <div [formGroup]=\"group\">\n <kles-button-file\n [attr.id]=\"field.id\" [classButton]=\"field.ngClass\" \n [name]=\"field.name\" [label]=\"field.label\" [color]=\"field.color\" \n [icon]=\"field.icon\"\n [iconSvg]=\"field.iconSvg\"\n [value]=\"field.value\"\n [formControlName]=\"field.name\">\n </kles-button-file>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSubmitButtonComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-submit-button","template":"\n <div [formGroup]=\"group\">\n <button matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" type=\"submit\" [disabled]=\"field.disabled\" mat-raised-button color=\"primary\">{{field.label}}</button>\n </div>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormCheckboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"kles-form-checkbox","template":"\n <div [formGroup]=\"group\" > \n <mat-checkbox matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [indeterminate]=\"field.indeterminate\" [formControlName]=\"field.name\">{{field.label \| translate}}</mat-checkbox>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormColorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"kles-form-color","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder \| translate\"\n [colorPicker]=\"group.get(field.name).value\"\n [value]=\"group.get(field.name).value\"\n (colorPickerChange)=\"group.get(field.name).setValue($event)\"\n class=\"colorPicker\"\n [style.background]=\"group.get(field.name).value\"\n [style.color]=\"invertColor(group.get(field.name).value,true)\"\n [formControlName]=\"field.name\">\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"invertColor":[{"__symbolic":"method"}]}},"KlesFormDateComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-datepicker","template":"\n <mat-form-field class=\"demo-full-width margin-top\" [formGroup]=\"group\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [matDatepicker]=\"picker\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-hint></mat-hint>\n \n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFieldAbstract":{"__symbolic":"class","members":{"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"applyPipeTransform":[{"__symbolic":"method"}]}},"KlesFormInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-input","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\" \n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n\n <mat-spinner matSuffix mode=\"indeterminate\" ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"isPending":[{"__symbolic":"method"}],"filterData":[{"__symbolic":"method"}],"displayFn":[{"__symbolic":"method"}]}},"KlesFormInputClearableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFormInputComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-input-clearable","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n\n <ng-container ngIf=\"field.autocomplete; else notAutoComplete\">\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\"\n [matAutocomplete]=\"auto\">\n\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn.bind(this)\" [panelWidth]=\"this.field.panelWidth\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let option of filteredOption \| async\" [value]=\"option\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"option\" [field]=\"field\">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\"\n [maxLength]=\"field.maxLength\" [min]=\"field.min\" [max]=\"field.max\" [step]=\"field.step\">\n </ng-template>\n <button mat-button matSuffix mat-icon-button aria-label=\"Clear\" type=\"button\"\n (click)=\"group.controls[field.name].reset();\">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode=\"indeterminate\" ngIf=\"isPending()\" diameter=\"17\"></mat-spinner>\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{}},"KlesFormLabelComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-label","template":"\n <div [formGroup]=\"group\" >\n <input matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" \n [ngClass]=\"field.ngClass\" \n [ngStyle]=\"{'color':'inherit'}\" [formControlName]=\"field.name\" [placeholder]=\"field.placeholder \| translate\" [type]=\"field.inputType\">\n </div>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormListFieldComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-listfield","template":"\n <div [formGroup]=\"group\" class=\"form-element\">\n {{field.label \| translate}}\n <button mat-icon-button color=\"primary\" (click)=\"addField()\">\n <mat-icon>add</mat-icon>\n </button>\n\n <div class=\"dynamic-form\" [formGroupName]=\"field.name\">\n <div ngFor=\"let subGroup of formArray.controls let index = index;\" fxLayout=\"row\" fxLayoutGap=\"5px\">\n <ng-container ngFor=\"let subfield of field.collections;\"\n dynamicField [field]=\"subfield\" [group]=\"subGroup\">\n </ng-container>\n <button mat-icon-button (click)=\"deleteField(index)\" color=\"primary\">\n <mat-icon>delete_outlined</mat-icon>\n </button>\n </div>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </div>\n </div>\n ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":38,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"createFormGroup":[{"__symbolic":"method"}],"deleteField":[{"__symbolic":"method"}],"addField":[{"__symbolic":"method"}],"bindValidations":[{"__symbolic":"method"}],"bindAsyncValidations":[{"__symbolic":"method"}]}},"KlesFormRadioComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-radiobutton","template":"\n <div [formGroup]=\"group\">\n <label class=\"radio-label-padding\">{{field.label}}</label>\n <mat-radio-group matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [formControlName]=\"field.name\">\n <mat-radio-button ngFor=\"let item of field.options\" [value]=\"item\">{{item}}</mat-radio-button>\n </mat-radio-group>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"kles-form-select","template":"\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\"\n (openedChange)=\"openChange($event)\"\n [ngClass]=\"field.ngClass\" [placeholder]=\"field.placeholder \| translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n </mat-select-trigger>\n\n\n <ng-container ngIf=\"!field.virtualScroll\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let item of options$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let item of options$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.virtualScroll\">\n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize \|\| 50\" [style.height.px]=548>\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of options$ \| async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of options$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n </mat-select>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"cdkVirtualScrollViewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":85,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":85,"character":15}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":86,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":86,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"openChange":[{"__symbolic":"method"}]}},"KlesFormTextareaComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-textarea","template":"\n <mat-form-field [formGroup]=\"group\" class=\"form-element\">\n <textarea matInput matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" \n [formControlName]=\"field.name\" cdkTextareaAutosize [placeholder]=\"field.placeholder \| translate\"\n [cdkAutosizeMinRows]=\"field.textareaAutoSize?.minRows\" [cdkAutosizeMaxRows]=\"field.textareaAutoSize?.maxRows\">\n </textarea>\n\n\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ","styles":["mat-form-field {width: calc(100%)}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormTextComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-text","template":"\n <span matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) \| klesTransform:field.pipeTransform}}\n </span> \n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormChipComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-chip","template":"\n <div [formGroup]=\"group\"> \n <mat-chip-list>\n <mat-chip [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" selected [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n <mat-icon ngIf=\"field.icon\">{{field.icon}}</mat-icon>\n {{group.controls[field.name].value \| klesTransform:field.pipeTransform}}\n </mat-chip>\n </mat-chip-list>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-group","template":"\n <div [formGroup]=\"group\" class=\"group-container\">\n <div [formGroupName]=\"field.name\" class=\"group-container\" [style.flex-direction]=\"field.direction \|\| 'inherit'\" [ngClass]=\"field.ngClass\" >\n <ng-container ngFor=\"let subfield of field.collections;\" klesDynamicField [field]=\"subfield\" [group]=\"subGroup\">\n </ng-container>\n </div>\n </div>\n","styles":["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormIconComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-icon","template":"\n <mat-icon [color]=\"field.color\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [ngStyle]=\"field.ngStyle\">\n {{group.controls[field.name].value}}\n </mat-icon>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectSearchComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"kles-form-select-search","template":"\n <mat-form-field class=\"margin-top\" [formGroup]=\"group\">\n <mat-select matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\"\n (openedChange)=\"openChange($event)\"\n [placeholder]=\"field.placeholder \| translate\" [formControlName]=\"field.name\" [multiple]=\"field.multiple\">\n <mat-select-trigger ngIf=\"field.triggerComponent\">\n <ng-container klesComponent [component]=\"field.triggerComponent\" [value]=\"group.controls[field.name].value\" [field]=\"field\"></ng-container>\n </mat-select-trigger>\n\n <ng-container ngIf=\"field.virtualScroll\">\n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <cdk-virtual-scroll-viewport [itemSize]=\"field.itemSize \|\| 50\" [style.height.px]=448>\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-checkbox ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' \| translate}}\n </mat-checkbox>\n <mat-option cdkVirtualFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n \n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option cdkVirtualFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n\n <ng-container ngIf=\"field.multiple\">\n <mat-option ngFor=\"let item of group.controls[field.name].value \| slice:0:30\" [value]=\"item\"\n style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n\n <ng-container ngIf=\"!field.multiple && group.controls[field.name].value\">\n <mat-option ngFor=\"let item of [group?.controls[field.name]?.value]\" [value]=\"item\" style=\"display:none\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n <ng-container ngIf=\"!field.virtualScroll\">\n \n <mat-option>\n <ngx-mat-select-search [formControl]=\"searchControl\"\n placeholderLabel=\"\" noEntriesFoundLabel =\"\"></ngx-mat-select-search>\n </mat-option>\n \n <mat-checkbox ngIf=\"field.multiple\" class=\"selectAll\" [formControl]=\"selectAllControl\"\n (change)=\"toggleAllSelection($event)\">\n {{'selectAll' \| translate}}\n </mat-checkbox>\n\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-option ngFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">{{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-option ngFor=\"let item of optionsFiltered$ \| async\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n\n </mat-select>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message \| translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n","styles":["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]}]}],"members":{"cdkVirtualScrollViewport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":115,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkVirtualScrollViewport","line":115,"character":15}]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":116,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":116,"character":18}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"toggleAllSelection":[{"__symbolic":"method"}],"openChange":[{"__symbolic":"method"}]}},"KlesFormLineBreakComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-line-break","template":"","styles":[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormLinkComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"kles-form-link","template":"\n <a [href]=\"group.controls[field.name].value\" matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n {{field.label}}\n </a>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSlideToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"kles-form-slide-toggle","template":"\n <div [formGroup]=\"group\" > \n <mat-slide-toggle matTooltip=\"{{field.tooltip}}\" [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\" [color]=\"field.color\" [formControlName]=\"field.name\">{{field.label \| translate}}</mat-slide-toggle>\n <ng-container ngFor=\"let validation of field.validations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container ngFor=\"let validation of field.asyncValidations;\" ngProjectAs=\"mat-error\">\n <mat-error ngIf=\"group.get(field.name).hasError(validation.name)\">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n","styles":[]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormSelectionListComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"kles-form-selection-list","template":"\n <div class=\"margin-top\" [formGroup]=\"group\">\n <mat-selection-list [formControlName]=\"field.name\" [attr.id]=\"field.id\" [multiple]=\"field.multiple\" [ngClass]=\"field.ngClass\">\n <ng-container ngIf=\"!field.autocompleteComponent\">\n <mat-list-option [value]=\"item\" ngFor=\"let item of options$ \| async;\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-list-option>\n </ng-container>\n\n <ng-container ngIf=\"field.autocompleteComponent\">\n <mat-list-option ngFor=\"let item of options$ \| async;\" [value]=\"item\">\n <ng-container klesComponent [component]=\"field.autocompleteComponent\" [value]=\"item\" [field]=\"field\"></ng-container>\n </mat-list-option>\n </ng-container>\n </mat-selection-list>\n </div>\n","styles":["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"KlesFormButtonToogleGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"KlesFieldAbstract"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"kles-form-button-toogle-group","template":"\n <div [formGroup]=\"group\" class=\"form-element\">\n <mat-button-toggle-group [formControlName]=\"field.name\" [multiple]=\"field.multiple\"\n [attr.id]=\"field.id\" [ngClass]=\"field.ngClass\">\n <mat-button-toggle ngFor=\"let item of options$ \| async\" [value]=\"item\">\n {{(field.property ? item[field.property] : item) \| klesTransform:field.pipeTransform}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n"}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}},"IKlesComponent":{"__symbolic":"interface"},"IKlesField":{"__symbolic":"interface"},"IKlesFieldConfig":{"__symbolic":"interface"},"IKlesValidator":{"__symbolic":"interface"},"KlesFormErrorStateMatcher":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor"}],"isErrorState":[{"__symbolic":"method"}]}},"autocompleteObjectValidator":{"__symbolic":"function","parameters":["optional"],"value":{"__symbolic":"error","message":"Lambda not supported","line":3,"character":11,"module":"./lib/validators/autocomplete.validator"}},"autocompleteStringValidator":{"__symbolic":"function","parameters":["validOptions","optional"],"value":{"__symbolic":"error","message":"Lambda not supported","line":15,"character":11,"module":"./lib/validators/autocomplete.validator"}},"KlesDynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"exportAs":"klesDynamicForm","selector":"app-kles-dynamic-form","template":"\n <form class=\"{{orientationClass}}\" [formGroup]=\"form\" (submit)=\"onSubmit($event)\">\n <ng-container ngFor=\"let field of fields;\" class=\"{{orientationItemClass}}\" klesDynamicField [field]=\"field\" [group]=\"form\" [siblingFields]=\"fields\">\n </ng-container>\n <!--<button (click)=\"reset()\" mat-raised-button color=\"primary\">RESET</button>-->\n </form>\n ","styles":[".dynamic-form-column { display: flex;flex-direction: column; }",".dynamic-form-column > * { width: 100%; }",".dynamic-form-row { display: inline-flex;flex-wrap:wrap;gap:10px }",".dynamic-form-row > * { width: 100%; }",".dynamic-form-row-item { margin-right: 10px; }",".dynamic-form-column-item { margin-bottom: 10px; }"]}]}],"members":{"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"validators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"asyncValidators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"submit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":35,"character":5}}]}],"_onLoaded":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":48,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"updateForm":[{"__symbolic":"method"}],"createControl":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"bindValidations":[{"__symbolic":"method"}],"bindAsyncValidations":[{"__symbolic":"method"}],"validateAllFormFields":[{"__symbolic":"method"}]}},"ArrayFormatPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"arrayFormat"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"KlesTransformPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"klesTransform"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":40,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":42,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":43,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":44,"character":8},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":45,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":46,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":47,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":48,"character":8},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":49,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":50,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":51,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":52,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":53,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":54,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":55,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":56,"character":8},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":57,"character":8},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":58,"character":8},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":59,"character":8},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":60,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":61,"character":8},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":62,"character":8},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":63,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":64,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":65,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":66,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":67,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":68,"character":8},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":69,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":70,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":71,"character":8},{"__symbolic":"reference","module":"@angular/material/snack-bar","name":"MatSnackBarModule","line":72,"character":8},{"__symbolic":"reference","module":"@angular/material/tree","name":"MatTreeModule","line":73,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":74,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":75,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":76,"character":8},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":77,"character":8},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":78,"character":8}],"exports":[{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":82,"character":8},{"__symbolic":"reference","module":"@angular/material/toolbar","name":"MatToolbarModule","line":83,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":84,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":85,"character":8},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":86,"character":8},{"__symbolic":"reference","module":"@angular/material/list","name":"MatListModule","line":87,"character":8},{"__symbolic":"reference","module":"@angular/material/grid-list","name":"MatGridListModule","line":88,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":89,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":90,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":91,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":92,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":93,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":94,"character":8},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":95,"character":8},{"__symbolic":"reference","module":"@angular/material/table","name":"MatTableModule","line":96,"character":8},{"__symbolic":"reference","module":"@angular/material/paginator","name":"MatPaginatorModule","line":97,"character":8},{"__symbolic":"reference","module":"@angular/material/card","name":"MatCardModule","line":98,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":99,"character":8},{"__symbolic":"reference","module":"@angular/material/tabs","name":"MatTabsModule","line":100,"character":8},{"__symbolic":"reference","module":"@angular/cdk/table","name":"CdkTableModule","line":101,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":102,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":103,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":104,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":105,"character":8},{"__symbolic":"reference","module":"@angular/material/progress-bar","name":"MatProgressBarModule","line":106,"character":8},{"__symbolic":"reference","module":"@angular/material/sort","name":"MatSortModule","line":107,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":108,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":109,"character":8},{"__symbolic":"reference","module":"@angular/material/snack-bar","name":"MatSnackBarModule","line":110,"character":8},{"__symbolic":"reference","module":"@angular/material/tree","name":"MatTreeModule","line":111,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":112,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":113,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":114,"character":8},{"__symbolic":"reference","module":"ngx-color-picker","name":"ColorPickerModule","line":115,"character":8},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"ScrollingModule","line":116,"character":8},{"__symbolic":"reference","module":"@angular/cdk/scrolling","name":"CdkScrollable","line":117,"character":8},{"__symbolic":"reference","module":"@angular/material/button-toggle","name":"MatButtonToggleModule","line":118,"character":8}],"providers":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":121,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":122,"character":8}]}]}],"members":{}}},"origins":{"KlesMaterialDynamicformsModule":"./lib/kles-material-dynamicforms.module","KlesDynamicFieldDirective":"./lib/directive/dynamic-field.directive","KlesComponentDirective":"./lib/directive/dynamic-component.directive","IButton":"./lib/forms/button-control.component","IUIButton":"./lib/forms/button-control.component","KlesButtonComponent":"./lib/forms/button-control.component","IButtonChecker":"./lib/forms/buttonchecker-control.component","KlesButtonCheckerComponent":"./lib/forms/buttonchecker-control.component","IButtonFile":"./lib/forms/buttonfile-control.component","KlesButtonFileComponent":"./lib/forms/buttonfile-control.component","KlesFormBadgeComponent":"./lib/fields/badge.component","KlesFormButtonComponent":"./lib/fields/button-form.component","KlesFormButtonCheckerComponent":"./lib/fields/buttonchecker-form.component","KlesFormButtonFileComponent":"./lib/fields/buttonfile-form.component","KlesFormSubmitButtonComponent":"./lib/fields/button-submit.component","KlesFormCheckboxComponent":"./lib/fields/checkbox.component","KlesFormColorComponent":"./lib/fields/color.component","KlesFormDateComponent":"./lib/fields/date.component","KlesFieldAbstract":"./lib/fields/field.abstract","KlesFormInputComponent":"./lib/fields/input.component","KlesFormInputClearableComponent":"./lib/fields/input.clearable.component","KlesFormLabelComponent":"./lib/fields/label.component","KlesFormListFieldComponent":"./lib/fields/list-field.component","KlesFormRadioComponent":"./lib/fields/radio.component","KlesFormSelectComponent":"./lib/fields/select.component","KlesFormTextareaComponent":"./lib/fields/textarea.component","KlesFormTextComponent":"./lib/fields/text.component","KlesFormChipComponent":"./lib/fields/chip.component","KlesFormGroupComponent":"./lib/fields/group.component","KlesFormIconComponent":"./lib/fields/icon.component","KlesFormSelectSearchComponent":"./lib/fields/select.search.component","KlesFormLineBreakComponent":"./lib/fields/line-break.component","KlesFormLinkComponent":"./lib/fields/link.component","KlesFormSlideToggleComponent":"./lib/fields/slide-toggle.component","KlesFormSelectionListComponent":"./lib/fields/selection-list.component","KlesFormButtonToogleGroupComponent":"./lib/fields/button-toogle-group.component","IKlesComponent":"./lib/interfaces/component.interface","IKlesField":"./lib/interfaces/field.interface","IKlesFieldConfig":"./lib/interfaces/field.config.interface","IKlesValidator":"./lib/interfaces/validator.interface","KlesFormErrorStateMatcher":"./lib/matcher/form-error.matcher","autocompleteObjectValidator":"./lib/validators/autocomplete.validator","autocompleteStringValidator":"./lib/validators/autocomplete.validator","KlesDynamicFormComponent":"./lib/dynamic-form.component","ArrayFormatPipe":"./lib/pipe/array.pipe","KlesTransformPipe":"./lib/pipe/transform.pipe","ɵa":"./lib/modules/material.module"},"importAs":"@3kles/kles-material-dynamicforms"}