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

package/bundles/3kles-kles-material-dynamicforms.umd.min.js

@@ -1,4 +1,4 @@
-!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/scrolling"),require("@angular/material/core"),require("@angular/material/slider"),require("@angular/material/button"),require("@angular/material/toolbar"),require("@angular/material/icon"),require("@angular/material/sidenav"),require("@angular/material/badge"),require("@angular/material/list"),require("@angular/material/grid-list"),require("@angular/material/form-field"),require("@angular/material/datepicker"),require("@angular/material/input"),require("@angular/material/select"),require("@angular/material/radio"),require("@angular/material/chips"),require("@angular/material/tooltip"),require("@angular/material/table"),require("@angular/material/paginator"),require("@angular/material/card"),require("@angular/material/menu"),require("@angular/cdk/table"),require("@angular/material/tabs"),require("@angular/material/progress-spinner"),require("@angular/material/checkbox"),require("@angular/material/dialog"),require("@angular/material/autocomplete"),require("@angular/material/progress-bar"),require("@angular/material/sort"),require("@angular/material/expansion"),require("@angular/material/snack-bar"),require("@angular/material/tree"),require("@angular/material/slide-toggle"),require("ngx-color-picker"),require("@angular/flex-layout"),require("@ngx-translate/core"),require("ngx-mat-select-search")):"function"==typeof define&&define.amd?define("@3kles/kles-material-dynamicforms",["exports","@angular/core","@angular/common","@angular/forms","rxjs","rxjs/operators","@angular/cdk/scrolling","@angular/material/core","@angular/material/slider","@angular/material/button","@angular/material/toolbar","@angular/material/icon","@angular/material/sidenav","@angular/material/badge","@angular/material/list","@angular/material/grid-list","@angular/material/form-field","@angular/material/datepicker","@angular/material/input","@angular/material/select","@angular/material/radio","@angular/material/chips","@angular/material/tooltip","@angular/material/table","@angular/material/paginator","@angular/material/card","@angular/material/menu","@angular/cdk/table","@angular/material/tabs","@angular/material/progress-spinner","@angular/material/checkbox","@angular/material/dialog","@angular/material/autocomplete","@angular/material/progress-bar","@angular/material/sort","@angular/material/expansion","@angular/material/snack-bar","@angular/material/tree","@angular/material/slide-toggle","ngx-color-picker","@angular/flex-layout","@ngx-translate/core","ngx-mat-select-search"],e):e(((n=n||self)["3kles"]=n["3kles"]||{},n["3kles"]["kles-material-dynamicforms"]={}),n.ng.core,n.ng.common,n.ng.forms,n.rxjs,n.rxjs.operators,n.ng.cdk.scrolling,n.ng.material.core,n.ng.material.slider,n.ng.material.button,n.ng.material.toolbar,n.ng.material.icon,n.ng.material.sidenav,n.ng.material.badge,n.ng.material.list,n.ng.material.gridList,n.ng.material.formField,n.ng.material.datepicker,n.ng.material.input,n.ng.material.select,n.ng.material.radio,n.ng.material.chips,n.ng.material.tooltip,n.ng.material.table,n.ng.material.paginator,n.ng.material.card,n.ng.material.menu,n.ng.cdk.table,n.ng.material.tabs,n.ng.material.progressSpinner,n.ng.material.checkbox,n.ng.material.dialog,n.ng.material.autocomplete,n.ng.material.progressBar,n.ng.material.sort,n.ng.material.expansion,n.ng.material.snackBar,n.ng.material.tree,n.ng.material.slideToggle,n.ngxColorPicker,n.ng.flexLayout,n.core$2,n.ngxMatSelectSearch)}(this,(function(n,e,t,o,i,r,a,l,s,p,c,u,m,d,f,g,h,v,y,C,b,k,M,I,F,x,S,O,w,A,V,T,E,P,B,L,j,R,q,$,G,K,D){"use strict";
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/cdk/scrolling"),require("@angular/material/core"),require("@angular/material/slider"),require("@angular/material/button"),require("@angular/material/toolbar"),require("@angular/material/icon"),require("@angular/material/sidenav"),require("@angular/material/badge"),require("@angular/material/list"),require("@angular/material/grid-list"),require("@angular/material/form-field"),require("@angular/material/datepicker"),require("@angular/material/input"),require("@angular/material/select"),require("@angular/material/radio"),require("@angular/material/chips"),require("@angular/material/tooltip"),require("@angular/material/table"),require("@angular/material/paginator"),require("@angular/material/card"),require("@angular/material/menu"),require("@angular/cdk/table"),require("@angular/material/tabs"),require("@angular/material/progress-spinner"),require("@angular/material/checkbox"),require("@angular/material/dialog"),require("@angular/material/autocomplete"),require("@angular/material/progress-bar"),require("@angular/material/sort"),require("@angular/material/expansion"),require("@angular/material/snack-bar"),require("@angular/material/tree"),require("@angular/material/slide-toggle"),require("ngx-color-picker"),require("@angular/material/button-toggle"),require("@angular/flex-layout"),require("@ngx-translate/core"),require("ngx-mat-select-search")):"function"==typeof define&&define.amd?define("@3kles/kles-material-dynamicforms",["exports","@angular/core","@angular/common","@angular/forms","rxjs","rxjs/operators","@angular/cdk/scrolling","@angular/material/core","@angular/material/slider","@angular/material/button","@angular/material/toolbar","@angular/material/icon","@angular/material/sidenav","@angular/material/badge","@angular/material/list","@angular/material/grid-list","@angular/material/form-field","@angular/material/datepicker","@angular/material/input","@angular/material/select","@angular/material/radio","@angular/material/chips","@angular/material/tooltip","@angular/material/table","@angular/material/paginator","@angular/material/card","@angular/material/menu","@angular/cdk/table","@angular/material/tabs","@angular/material/progress-spinner","@angular/material/checkbox","@angular/material/dialog","@angular/material/autocomplete","@angular/material/progress-bar","@angular/material/sort","@angular/material/expansion","@angular/material/snack-bar","@angular/material/tree","@angular/material/slide-toggle","ngx-color-picker","@angular/material/button-toggle","@angular/flex-layout","@ngx-translate/core","ngx-mat-select-search"],e):e(((t=t||self)["3kles"]=t["3kles"]||{},t["3kles"]["kles-material-dynamicforms"]={}),t.ng.core,t.ng.common,t.ng.forms,t.rxjs,t.rxjs.operators,t.ng.cdk.scrolling,t.ng.material.core,t.ng.material.slider,t.ng.material.button,t.ng.material.toolbar,t.ng.material.icon,t.ng.material.sidenav,t.ng.material.badge,t.ng.material.list,t.ng.material.gridList,t.ng.material.formField,t.ng.material.datepicker,t.ng.material.input,t.ng.material.select,t.ng.material.radio,t.ng.material.chips,t.ng.material.tooltip,t.ng.material.table,t.ng.material.paginator,t.ng.material.card,t.ng.material.menu,t.ng.cdk.table,t.ng.material.tabs,t.ng.material.progressSpinner,t.ng.material.checkbox,t.ng.material.dialog,t.ng.material.autocomplete,t.ng.material.progressBar,t.ng.material.sort,t.ng.material.expansion,t.ng.material.snackBar,t.ng.material.tree,t.ng.material.slideToggle,t.ngxColorPicker,t.ng.material.buttonToggle,t.ng.flexLayout,t.core$2,t.ngxMatSelectSearch)}(this,(function(t,e,n,o,i,r,a,l,s,p,c,u,m,d,f,g,h,v,y,C,b,k,M,I,F,x,S,O,w,T,A,V,E,P,B,j,L,q,R,$,G,K,D,N){"use strict";
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -12,5 +12,5 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */var N=function(n,e){return(N=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,e){n.__proto__=e}||function(n,e){for(var t in e)e.hasOwnProperty(t)&&(n[t]=e[t])})(n,e)};function _(n,e){function t(){this.constructor=n}N(n,e),n.prototype=null===e?Object.create(e):(t.prototype=e.prototype,new t)}function z(n,e,t,o){var i,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(n,e,t,o);else for(var l=n.length-1;l>=0;l--)(i=n[l])&&(a=(r<3?i(a):r>3?i(e,t,a):i(e,t))||a);return r>3&&a&&Object.defineProperty(e,t,a),a}function W(n,e,t,o){return new(t||(t=Promise))((function(i,r){function a(n){try{s(o.next(n))}catch(n){r(n)}}function l(n){try{s(o.throw(n))}catch(n){r(n)}}function s(n){var e;n.done?i(n.value):(e=n.value,e instanceof t?e:new t((function(n){n(e)}))).then(a,l)}s((o=o.apply(n,e||[])).next())}))}function U(n,e){var t,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(n,a)}catch(n){r=[6,n],o=0}finally{t=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}var H=function(){function n(n){this.fb=n,this.fields=[],this.validators=[],this.asyncValidators=[],this.submit=new e.EventEmitter,this._onLoaded=new e.EventEmitter,this.direction="column",this.orientationClass="dynamic-form-column",this.orientationItemClass="dynamic-form-column-item"}return Object.defineProperty(n.prototype,"value",{get:function(){return this.form.value},enumerable:!0,configurable:!0}),n.prototype.ngOnInit=function(){this.form=this.createForm(),this.orientationClass="row"===this.direction?"dynamic-form-row":"dynamic-form-column",this.orientationItemClass="row"===this.direction?"dynamic-form-row-item":"dynamic-form-column-item",this._onLoaded.emit()},n.prototype.ngOnChanges=function(n){var e,t,o,i;(null===(e=n.fields)||void 0===e?void 0:e.firstChange)||(this.updateForm(),this._onLoaded.emit()),!(null===(t=n.validators)||void 0===t?void 0:t.firstChange)&&this.form&&this.form.setValidators(this.validators.map((function(n){return n.validator}))),!(null===(o=n.asyncValidators)||void 0===o?void 0:o.firstChange)&&this.form&&this.form.setAsyncValidators(this.asyncValidators.map((function(n){return n.validator}))),(null===(i=n.direction)||void 0===i?void 0:i.firstChange)||(this.orientationClass="row"===this.direction?"dynamic-form-row":"dynamic-form-column",this.orientationItemClass="row"===this.direction?"dynamic-form-row-item":"dynamic-form-column-item")},n.prototype.onSubmit=function(n){n.preventDefault(),n.stopPropagation(),this.form.valid?this.submit.emit(this.form.value):this.validateAllFormFields(this.form)},n.prototype.reset=function(){this.form.reset()},n.prototype.updateForm=function(){var n=this;Object.keys(this.form.controls).filter((function(e){return!n.fields.map((function(n){return n.name})).includes(e)})).forEach((function(e){n.form.removeControl(e)})),this.fields.filter((function(e){return!n.form.controls[e.name]})).forEach((function(e){if("lineBreak"!==e.type){var t=n.createControl(e);n.form.addControl(e.name,t)}}))},n.prototype.createControl=function(n){var e=this;if("listField"===n.type){var t=this.fb.array([]);return n.value.forEach((function(o){var i=e.fb.group({});n.collections.forEach((function(n){var t=e.createControl(n);i.addControl(n.name,t)})),t.push(i)})),t}if("group"===n.type){var o=this.fb.group({});return n.collections&&Array.isArray(n.collections)&&n.collections.forEach((function(n){var t=e.createControl(n);o.addControl(n.name,t)})),o}var i=this.fb.control(n.value,this.bindValidations(n.validations||[]),this.bindAsyncValidations(n.asyncValidations||[]));return n.disabled&&i.disable(),i},n.prototype.createForm=function(){var n=this,e=this.fb.group({});return this.fields.forEach((function(t){if("lineBreak"!==t.type){var o=n.createControl(t);e.addControl(t.name,o)}})),e.setValidators(this.validators.map((function(n){return n.validator}))),e.setAsyncValidators(this.asyncValidators.map((function(n){return n.validator}))),e},n.prototype.bindValidations=function(n){if(n.length>0){var e=[];return n.forEach((function(n){e.push(n.validator)})),o.Validators.compose(e)}return null},n.prototype.bindAsyncValidations=function(n){if(n.length>0){var e=[];return n.forEach((function(n){e.push(n.validator)})),o.Validators.composeAsync(e)}return null},n.prototype.validateAllFormFields=function(n){Object.keys(n.controls).forEach((function(e){n.get(e).markAsTouched({onlySelf:!0})}))},n.ctorParameters=function(){return[{type:o.FormBuilder}]},z([e.Input()],n.prototype,"fields",void 0),z([e.Input()],n.prototype,"validators",void 0),z([e.Input()],n.prototype,"asyncValidators",void 0),z([e.Output()],n.prototype,"submit",void 0),z([e.Output()],n.prototype,"_onLoaded",void 0),z([e.Input()],n.prototype,"direction",void 0),n=z([e.Component({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        \x3c!--<button (click)="reset()" mat-raised-button color="primary">RESET</button>--\x3e\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; }"]})],n)}(),J=function(){function n(n,e){this.resolver=n,this.container=e}return n.prototype.ngOnInit=function(){this.buildComponent()},n.prototype.ngOnChanges=function(n){n.component&&!n.component.isFirstChange()&&(this.component=n.component.currentValue,this.buildComponent()),n.value&&!n.value.isFirstChange()&&(this.value=n.value.currentValue,this.componentRef.instance.value=this.value)},n.prototype.buildComponent=function(){var n=this.resolver.resolveComponentFactory(this.component);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(n),this.componentRef.instance.component=this.component,this.componentRef.instance.value=this.value},n.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},z([e.Input()],n.prototype,"component",void 0),z([e.Input()],n.prototype,"value",void 0),n=z([e.Directive({selector:"[klesComponent]"})],n)}(),Q=function(){function n(){}return n.prototype.ngOnInit=function(){var n,e=this;this.field.valueChanges&&this.field.valueChanges(this.field,this.group,this.siblingFields),null===(n=this.group.controls[this.field.name])||void 0===n||n.valueChanges.pipe().subscribe((function(n){e.field.valueChanges&&e.field.valueChanges(e.field,e.group,e.siblingFields,n)}))},n.prototype.ngAfterViewInit=function(){},n.prototype.applyPipeTransform=function(){if(this.group&&this.field){var n=this.group.controls[this.field.name];if(n){var e=this.group.controls[this.field.name].value;this.field.pipeTransform&&this.field.pipeTransform.forEach((function(t){var o=n.value;t.options?t.options.forEach((function(n){o=t.pipe.transform(e,n)})):o=t.pipe.transform(e),n.patchValue(o,{onlySelf:!0,emitEvent:!1})}))}}},n}(),X=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){this.group.controls[this.field.name].disable(),n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),Y=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){var e=this;this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.filteredOption=this.group.get(this.field.name).valueChanges.pipe(r.startWith(""),r.switchMap((function(n){return n?e.filterData(n):e.options$}))),console.log("this.field.maxLength=",this.field.maxLength),this.field.maxLength||(this.field.maxLength=524288),console.log("this.field.maxLength After=",this.field.maxLength),n.prototype.ngOnInit.call(this)},t.prototype.isPending=function(){return this.group.controls[this.field.name].pending||this.field.pending},t.prototype.filterData=function(n){var e,t=this;return e="string"==typeof n&&"[object String]"===Object.prototype.toString.call(n)?n.toLowerCase():n[this.field.property].toLowerCase(),this.field.property?this.options$.pipe(r.map((function(n){return n.filter((function(n){return 0===n[t.field.property].toLowerCase().indexOf(e)}))}))):this.options$.pipe(r.map((function(n){return n.filter((function(n){return 0===n.toLowerCase().indexOf(e)}))})))},t.prototype.displayFn=function(n){return this.field.displayWith?this.field.displayWith(n):n&&this.field&&this.field.property?n[this.field.property]?n[this.field.property]:"":n||""},t=z([e.Component({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%)}"]})],t)}(Q),Z=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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    '})],t)}(Q),nn=function(n){function t(){var e=n.call(this)||this;return e.selected=[],e}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},t.prototype.openChange=function(n){this.field.virtualScroll&&n&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},z([e.ViewChild(a.CdkVirtualScrollViewport)],t.prototype,"cdkVirtualScrollViewport",void 0),z([e.ViewChildren(l.MatOption)],t.prototype,"options",void 0),t=z([e.Component({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]=5*48>\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">\n                        <mat-option *ngIf="group.controls[field.name].value" [value]="group.controls[field.name].value"\n                        style="display:none">\n                            {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n\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">\n                        <mat-option *ngIf="group.controls[field.name].value" [value]="group.controls[field.name].value"\n                        style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="group.controls[field.name].value"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\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%)}"]})],t)}(Q),en=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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    '})],t)}(Q),tn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),on=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),rn=function(n){function t(e){var t=n.call(this)||this;return t.fb=e,t}return _(t,n),t.prototype.ngOnInit=function(){this.formArray=this.group.controls[this.field.name],n.prototype.ngOnInit.call(this)},t.prototype.createFormGroup=function(){var n=this,e=this.fb.group({});return this.field.collections.forEach((function(t){var o=n.fb.control(null,n.bindValidations(t.validations||[]),n.bindAsyncValidations(t.asyncValidations||[]));e.addControl(t.name,o)})),e},t.prototype.deleteField=function(n){this.formArray.removeAt(n)},t.prototype.addField=function(){this.formArray.push(this.createFormGroup())},t.prototype.bindValidations=function(n){if(n.length>0){var e=[];return n.forEach((function(n){e.push(n.validator)})),o.Validators.compose(e)}return null},t.prototype.bindAsyncValidations=function(n){if(n.length>0){var e=[];return n.forEach((function(n){e.push(n.validator)})),o.Validators.composeAsync(e)}return null},t.ctorParameters=function(){return[{type:o.FormBuilder}]},t=z([e.Component({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    '})],t)}(Q),an=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t.prototype.invertColor=function(n,e){if(0===n.indexOf("#")&&(n=n.slice(1)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]),6!==n.length)return"#000000";var t=parseInt(n.slice(0,2),16),o=parseInt(n.slice(2,4),16),i=parseInt(n.slice(4,6),16);return e?.299*t+.587*o+.114*i>186?"#000000":"#FFFFFF":"#"+(255-t).toString(16)+(255-o).toString(16)+(255-i).toString(16)},t=z([e.Component({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%)}"]})],t)}(Q),ln=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),sn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){this.subGroup=this.group.controls[this.field.name],n.prototype.ngOnInit.call(this)},t=z([e.Component({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}"]})],t)}(Q),pn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),cn=function(n){function t(){var e=null!==n&&n.apply(this,arguments)||this;return e.searchControl=new o.FormControl,e.selectAllControl=new o.FormControl(!1),e.optionsFiltered$=new i.ReplaySubject(1),e._onDestroy=new i.Subject,e}return _(t,n),t.prototype.ngOnInit=function(){var e=this;n.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.searchControl.valueChanges.pipe(r.startWith(this.searchControl.value),r.takeUntil(this._onDestroy),r.switchMap((function(n){if(n){var t=n.toLowerCase();return e.options$.pipe(r.map((function(n){return n.filter((function(n){return e.field.property?n[e.field.property].toString().toLowerCase().indexOf(t)>-1:n.toString().toLowerCase().indexOf(t)>-1}))})))}return e.options$}))).subscribe(this.optionsFiltered$),this.group.controls[this.field.name].valueChanges.pipe(r.takeUntil(this._onDestroy),r.switchMap((function(n){return e.optionsFiltered$.pipe(r.map((function(e){return!!n&&(e.length<n.length?e.length>0&&e.every((function(e){return n.includes(e)})):e.length>0&&e.length===n.length&&n.every((function(n){return e.includes(n)})))})))}))).subscribe((function(n){e.selectAllControl.setValue(n)}))},t.prototype.ngOnDestroy=function(){this._onDestroy.next()},t.prototype.toggleAllSelection=function(n){var e=this;n.checked?this.optionsFiltered$.pipe(r.take(1)).subscribe((function(n){n.length>0&&e.group.controls[e.field.name].patchValue(n.slice())})):this.group.controls[this.field.name].patchValue([])},t.prototype.openChange=function(n){this.field.virtualScroll&&n&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},z([e.ViewChild(a.CdkVirtualScrollViewport)],t.prototype,"cdkVirtualScrollViewport",void 0),z([e.ViewChildren(l.MatOption)],t.prototype,"options",void 0),t=z([e.Component({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]=4*48>\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">\n                        <ng-container *ngIf="group.controls[field.name].value">\n                            <mat-option *ngIf="group.controls[field.name].value" [value]="group.controls[field.name].value"\n                            style="display:none">\n                                {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n                            </mat-option>\n                        </ng-container>\n                    </ng-container>\n                   \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">\n                        <ng-container *ngIf="group.controls[field.name].value">\n                            <mat-option *ngIf="group.controls[field.name].value" [value]="group.controls[field.name].value"\n                            style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="group.controls[field.name].value"></ng-container>\n                            </mat-option>\n                        </ng-container>\n                    </ng-container>\n                </ng-container>\n\n                \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;}"]})],t)}(Q),un=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]})],t)}(Q),mn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),dn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},t=z([e.Component({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}"]})],t)}(Q),fn={label:X,input:Y,button:Z,select:nn,date:en,radio:tn,checkbox:on,listField:rn,color:an,chip:ln,group:sn,icon:pn,selectSearch:cn,lineBreak:un,link:mn,selectionList:dn},gn=function(){function n(n,e){this.resolver=n,this.container=e}return n.prototype.ngOnDestroy=function(){this.componentRef&&this.componentRef.destroy()},n.prototype.ngOnInit=function(){this.buildComponent()},n.prototype.ngOnChanges=function(n){n.group&&(this.group=n.group.currentValue),n.field&&(n.field.previousValue&&n.field.currentValue.component!==n.field.previousValue.component?(this.field=n.field.currentValue,this.buildComponent()):this.field=n.field.currentValue)},n.prototype.buildComponent=function(){var n=this.resolver.resolveComponentFactory(this.field.component||fn[this.field.type]);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(n),this.componentRef.instance.field=this.field,this.componentRef.instance.group=this.group,this.componentRef.instance.siblingFields=this.siblingFields},n.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},z([e.Input()],n.prototype,"field",void 0),z([e.Input()],n.prototype,"group",void 0),z([e.Input()],n.prototype,"siblingFields",void 0),n=z([e.Directive({selector:"[klesDynamicField]"})],n)}(),hn=function(){function n(){}return n.prototype.isErrorState=function(n,e){var t=e&&e.submitted;return!!(n&&n.invalid&&(n.dirty||n.touched||t))},n}(),vn=function(){function n(){}return n=z([e.NgModule({imports:[t.CommonModule,s.MatSliderModule,p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,h.MatFormFieldModule,y.MatInputModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,A.MatProgressSpinnerModule,V.MatCheckboxModule,T.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,L.MatExpansionModule,l.MatNativeDateModule,j.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,y.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,A.MatProgressSpinnerModule,V.MatCheckboxModule,T.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,L.MatExpansionModule,l.MatNativeDateModule,j.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule,a.ScrollingModule,a.CdkScrollable],providers:[v.MatDatepickerModule,T.MatDialogModule]})],n)}(),yn=function(){function n(){this.name="",this.label="",this.color="accent",this.icon="",this.iconSvg="",this.disabled=!1,this.classButton="",this.value={},this.onChange=function(){},this.onTouched=function(){}}var t;return t=n,n.prototype.ngOnInit=function(){},n.prototype.click=function(n){this.value.event=this.name,this.onChange(this.value)},n.prototype.writeValue=function(n){if(n||(n={event:this.name}),n.event||(n.event=this.name),n.uiButton){var e=n.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=n},n.prototype.registerOnChange=function(n){this.onChange=n},n.prototype.registerOnTouched=function(n){this.onTouched=n},n.prototype.setDisabledState=function(n){this.disabled=n},z([e.Input()],n.prototype,"name",void 0),z([e.Input()],n.prototype,"label",void 0),z([e.Input()],n.prototype,"color",void 0),z([e.Input()],n.prototype,"icon",void 0),z([e.Input()],n.prototype,"iconSvg",void 0),z([e.Input()],n.prototype,"disabled",void 0),z([e.Input()],n.prototype,"classButton",void 0),z([e.Input()],n.prototype,"value",void 0),z([e.Input()],n.prototype,"tooltip",void 0),n=t=z([e.Component({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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return t})),multi:!0}]})],n)}(),Cn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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    '})],t)}(Q),bn=function(n){function t(){var e=null!==n&&n.apply(this,arguments)||this;return e.value={busy:!1,error:[],event:!1},e}var i;return _(t,n),i=t,t.prototype.countError=function(){return this.value.error?this.value.error.length:0},t=i=z([e.Component({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" 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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],t)}(yn),kn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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        </kles-button-checker>\n    </div>\n    '})],t)}(Q),Mn=function(n){function t(){var e=null!==n&&n.apply(this,arguments)||this;return e.accept="*.*",e.fileReader=new FileReader,e.value={},e}var i;return _(t,n),i=t,t.prototype.click=function(n){this.file.nativeElement.click()},t.prototype.writeValue=function(n){if(n||(n={event:this.name}),n.event||(n.event=this.name),n.uiButton){var e=n.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=n},t.prototype.onFileLoad=function(n){var e=n.target.result;this.fileContent=e},t.prototype.onFileSelect=function(n){return W(this,void 0,void 0,(function(){var e,t,o,i,r;return U(this,(function(a){switch(a.label){case 0:if(!(n.files.length>0))return[3,8];if(e=n.files,t=[],!e||!e.length)return[3,7];console.log("Filename: "+e[0].name),console.log("Type: "+e[0].type),console.log("Size: "+e[0].size+" bytes"),console.log("Files=",e.length),o=0,a.label=1;case 1:if(!(o<e.length))return[3,6];a.label=2;case 2:return a.trys.push([2,4,,5]),i=t,r=o,[4,this.readUploadedFile(e[o])];case 3:return i[r]=a.sent(),[3,5];case 4:return a.sent(),[3,5];case 5:return o++,[3,1];case 6:1===t.length&&(t=t[0]),a.label=7;case 7:this.value.event=this.name,this.value.fileContent=t,this.onChange(this.value),n.value="",a.label=8;case 8:return[2]}}))}))},t.prototype.readUploadedFile=function(n){var e=new FileReader;return new Promise((function(t,o){e.onerror=function(){e.abort();var n=new DOMException("Problem parsing input file.");o(n)},e.onload=function(){t(e.result)},e.readAsArrayBuffer(n)}))},z([e.ViewChild("file")],t.prototype,"file",void 0),t=i=z([e.Component({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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],t)}(yn),In=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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    '})],t)}(Q),Fn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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%)}"]})],t)}(Q),xn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),Sn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t=z([e.Component({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%)}"]})],t)}(Y),On=function(){function n(){}return n.prototype.transform=function(n,e){return e&&e.length>0?e.reduce((function(n,e){return e.options?e.options.forEach((function(t){n=e.pipe.transform(n,t)})):n=e.pipe.transform(n),n}),n):n},n=z([e.Pipe({name:"klesTransform"})],n)}(),wn=function(){function n(){}return n.prototype.transform=function(n,e){return n&&Array.isArray(n)?e?n.map((function(n){return n[e]})).filter(Boolean).join(", "):n.join(", "):""},n=z([e.Pipe({name:"arrayFormat"})],n)}(),An=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),Vn=function(n){function t(){return null!==n&&n.apply(this,arguments)||this}return _(t,n),t.prototype.ngOnInit=function(){n.prototype.ngOnInit.call(this)},t=z([e.Component({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'})],t)}(Q),Tn=[H,X,Y,Sn,Z,Vn,yn,Cn,bn,kn,Mn,In,nn,en,tn,on,rn,an,Fn,xn,ln,sn,pn,cn,un,mn,An,dn],En=[gn,J],Pn=[On,wn],Bn=function(){function n(){}return n=z([e.NgModule({declarations:[Tn,En,Pn],imports:[t.CommonModule,o.ReactiveFormsModule,K.TranslateModule,G.FlexLayoutModule,o.FormsModule,vn,$.ColorPickerModule,D.NgxMatSelectSearchModule],providers:[{provide:l.ErrorStateMatcher,useClass:hn},Pn],entryComponents:[Tn],exports:[Tn,Pn,En,$.ColorPickerModule],schemas:[e.CUSTOM_ELEMENTS_SCHEMA,e.NO_ERRORS_SCHEMA]})],n)}();n.ArrayFormatPipe=wn,n.KlesButtonCheckerComponent=bn,n.KlesButtonComponent=yn,n.KlesButtonFileComponent=Mn,n.KlesComponentDirective=J,n.KlesDynamicFieldDirective=gn,n.KlesDynamicFormComponent=H,n.KlesFieldAbstract=Q,n.KlesFormBadgeComponent=Vn,n.KlesFormButtonCheckerComponent=kn,n.KlesFormButtonComponent=Cn,n.KlesFormButtonFileComponent=In,n.KlesFormCheckboxComponent=on,n.KlesFormChipComponent=ln,n.KlesFormColorComponent=an,n.KlesFormDateComponent=en,n.KlesFormErrorStateMatcher=hn,n.KlesFormGroupComponent=sn,n.KlesFormIconComponent=pn,n.KlesFormInputClearableComponent=Sn,n.KlesFormInputComponent=Y,n.KlesFormLabelComponent=X,n.KlesFormLineBreakComponent=un,n.KlesFormLinkComponent=mn,n.KlesFormListFieldComponent=rn,n.KlesFormRadioComponent=tn,n.KlesFormSelectComponent=nn,n.KlesFormSelectSearchComponent=cn,n.KlesFormSelectionListComponent=dn,n.KlesFormSlideToggleComponent=An,n.KlesFormSubmitButtonComponent=Z,n.KlesFormTextComponent=xn,n.KlesFormTextareaComponent=Fn,n.KlesMaterialDynamicformsModule=Bn,n.KlesTransformPipe=On,n.autocompleteObjectValidator=function(n){return function(e){return null!==e.value&&void 0!==e.value||n?"string"==typeof e.value?""===e.value&&n?null:{invalidAutocompleteObject:{value:e.value}}:null:{invalidAutocompleteObject:{value:e.value}}}},n.autocompleteStringValidator=function(n,e){return function(t){return""!==t.value&&null!==t.value||!e?-1!==n.indexOf(t.value)?null:{invalidAutocompleteString:{value:t.value}}:null}},n.ɵa=vn,Object.defineProperty(n,"__esModule",{value:!0})}));
+    ***************************************************************************** */var _=function(t,e){return(_=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};function z(t,e){function n(){this.constructor=t}_(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}function W(t,e,n,o){var i,r=arguments.length,a=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,o);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(r<3?i(a):r>3?i(e,n,a):i(e,n))||a);return r>3&&a&&Object.defineProperty(e,n,a),a}function U(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{s(o.next(t))}catch(t){r(t)}}function l(t){try{s(o.throw(t))}catch(t){r(t)}}function s(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,l)}s((o=o.apply(t,e||[])).next())}))}function H(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:l(0),throw:l(1),return:l(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function l(r){return function(l){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,l])}}}var J=function(){function t(t){this.fb=t,this.fields=[],this.validators=[],this.asyncValidators=[],this.submit=new e.EventEmitter,this._onLoaded=new e.EventEmitter,this.direction="column",this.orientationClass="dynamic-form-column",this.orientationItemClass="dynamic-form-column-item"}return Object.defineProperty(t.prototype,"value",{get:function(){return this.form.value},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.form=this.createForm(),this.orientationClass="row"===this.direction?"dynamic-form-row":"dynamic-form-column",this.orientationItemClass="row"===this.direction?"dynamic-form-row-item":"dynamic-form-column-item",this._onLoaded.emit()},t.prototype.ngOnChanges=function(t){var e,n,o,i;(null===(e=t.fields)||void 0===e?void 0:e.firstChange)||(this.updateForm(),this._onLoaded.emit()),!(null===(n=t.validators)||void 0===n?void 0:n.firstChange)&&this.form&&this.form.setValidators(this.validators.map((function(t){return t.validator}))),!(null===(o=t.asyncValidators)||void 0===o?void 0:o.firstChange)&&this.form&&this.form.setAsyncValidators(this.asyncValidators.map((function(t){return t.validator}))),(null===(i=t.direction)||void 0===i?void 0:i.firstChange)||(this.orientationClass="row"===this.direction?"dynamic-form-row":"dynamic-form-column",this.orientationItemClass="row"===this.direction?"dynamic-form-row-item":"dynamic-form-column-item")},t.prototype.onSubmit=function(t){t.preventDefault(),t.stopPropagation(),this.form.valid?this.submit.emit(this.form.value):this.validateAllFormFields(this.form)},t.prototype.reset=function(){this.form.reset()},t.prototype.updateForm=function(){var t=this;Object.keys(this.form.controls).filter((function(e){return!t.fields.map((function(t){return t.name})).includes(e)})).forEach((function(e){t.form.removeControl(e)})),this.fields.filter((function(e){return!t.form.controls[e.name]})).forEach((function(e){if("lineBreak"!==e.type){var n=t.createControl(e);t.form.addControl(e.name,n)}}))},t.prototype.createControl=function(t){var e=this;if("listField"===t.type){var n=this.fb.array([]);return t.value.forEach((function(o){var i=e.fb.group({});t.collections.forEach((function(t){var n=e.createControl(t);i.addControl(t.name,n)})),n.push(i)})),n}if("group"===t.type){var o=this.fb.group({});return t.collections&&Array.isArray(t.collections)&&t.collections.forEach((function(t){var n=e.createControl(t);o.addControl(t.name,n)})),o}var i=this.fb.control(t.value,this.bindValidations(t.validations||[]),this.bindAsyncValidations(t.asyncValidations||[]));return t.disabled&&i.disable(),i},t.prototype.createForm=function(){var t=this,e=this.fb.group({});return this.fields.forEach((function(n){if("lineBreak"!==n.type){var o=t.createControl(n);e.addControl(n.name,o)}})),e.setValidators(this.validators.map((function(t){return t.validator}))),e.setAsyncValidators(this.asyncValidators.map((function(t){return t.validator}))),e},t.prototype.bindValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.compose(e)}return null},t.prototype.bindAsyncValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.composeAsync(e)}return null},t.prototype.validateAllFormFields=function(t){Object.keys(t.controls).forEach((function(e){t.get(e).markAsTouched({onlySelf:!0})}))},t.ctorParameters=function(){return[{type:o.FormBuilder}]},W([e.Input()],t.prototype,"fields",void 0),W([e.Input()],t.prototype,"validators",void 0),W([e.Input()],t.prototype,"asyncValidators",void 0),W([e.Output()],t.prototype,"submit",void 0),W([e.Output()],t.prototype,"_onLoaded",void 0),W([e.Input()],t.prototype,"direction",void 0),t=W([e.Component({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        \x3c!--<button (click)="reset()" mat-raised-button color="primary">RESET</button>--\x3e\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; }"]})],t)}(),Q=function(){function t(t,e){this.resolver=t,this.container=e}return t.prototype.ngOnInit=function(){this.buildComponent()},t.prototype.ngOnChanges=function(t){t.component&&!t.component.isFirstChange()&&(this.component=t.component.currentValue,this.buildComponent()),t.value&&!t.value.isFirstChange()&&(this.value=t.value.currentValue,this.componentRef.instance.value=this.value)},t.prototype.buildComponent=function(){var t=this.resolver.resolveComponentFactory(this.component);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(t),this.componentRef.instance.component=this.component,this.componentRef.instance.value=this.value},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},W([e.Input()],t.prototype,"component",void 0),W([e.Input()],t.prototype,"value",void 0),t=W([e.Directive({selector:"[klesComponent]"})],t)}(),X=function(){function t(){}return t.prototype.ngOnInit=function(){var t,e=this;this.field.valueChanges&&this.field.valueChanges(this.field,this.group,this.siblingFields),null===(t=this.group.controls[this.field.name])||void 0===t||t.valueChanges.pipe().subscribe((function(t){e.field.valueChanges&&e.field.valueChanges(e.field,e.group,e.siblingFields,t)}))},t.prototype.ngAfterViewInit=function(){},t.prototype.applyPipeTransform=function(){if(this.group&&this.field){var t=this.group.controls[this.field.name];if(t){var e=this.group.controls[this.field.name].value;this.field.pipeTransform&&this.field.pipeTransform.forEach((function(n){var o=t.value;n.options?n.options.forEach((function(t){o=n.pipe.transform(e,t)})):o=n.pipe.transform(e),t.patchValue(o,{onlySelf:!0,emitEvent:!1})}))}}},t}(),Y=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){this.group.controls[this.field.name].disable(),t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),Z=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){var e=this;this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.filteredOption=this.group.get(this.field.name).valueChanges.pipe(r.startWith(""),r.switchMap((function(t){return t?e.filterData(t):e.options$}))),this.field.maxLength||(this.field.maxLength=524288),t.prototype.ngOnInit.call(this)},n.prototype.isPending=function(){return this.group.controls[this.field.name].pending||this.field.pending},n.prototype.filterData=function(t){var e,n=this;return e="string"==typeof t&&"[object String]"===Object.prototype.toString.call(t)?t.toLowerCase():t[this.field.property].toLowerCase(),this.field.property?this.options$.pipe(r.map((function(t){return t.filter((function(t){return 0===t[n.field.property].toLowerCase().indexOf(e)}))}))):this.options$.pipe(r.map((function(t){return t.filter((function(t){return 0===t.toLowerCase().indexOf(e)}))})))},n.prototype.displayFn=function(t){return this.field.displayWith?this.field.displayWith(t):t&&this.field&&this.field.property?t[this.field.property]?t[this.field.property]:"":t||""},n=W([e.Component({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%)}"]})],n)}(X),tt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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    '})],n)}(X),et=function(t){function n(){return t.call(this)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n.prototype.openChange=function(t){this.field.virtualScroll&&t&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},W([e.ViewChild(a.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([e.ViewChildren(l.MatOption)],n.prototype,"options",void 0),n=W([e.Component({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]=5*48>\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%)}"]})],n)}(X),nt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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    '})],n)}(X),ot=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),it=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),rt=function(t){function n(e){var n=t.call(this)||this;return n.fb=e,n}return z(n,t),n.prototype.ngOnInit=function(){this.formArray=this.group.controls[this.field.name],t.prototype.ngOnInit.call(this)},n.prototype.createFormGroup=function(){var t=this,e=this.fb.group({});return this.field.collections.forEach((function(n){var o=t.fb.control(null,t.bindValidations(n.validations||[]),t.bindAsyncValidations(n.asyncValidations||[]));e.addControl(n.name,o)})),e},n.prototype.deleteField=function(t){this.formArray.removeAt(t)},n.prototype.addField=function(){this.formArray.push(this.createFormGroup())},n.prototype.bindValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.compose(e)}return null},n.prototype.bindAsyncValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.composeAsync(e)}return null},n.ctorParameters=function(){return[{type:o.FormBuilder}]},n=W([e.Component({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    '})],n)}(X),at=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.invertColor=function(t,e){if(0===t.indexOf("#")&&(t=t.slice(1)),3===t.length&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),6!==t.length)return"#000000";var n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16);return e?.299*n+.587*o+.114*i>186?"#000000":"#FFFFFF":"#"+(255-n).toString(16)+(255-o).toString(16)+(255-i).toString(16)},n=W([e.Component({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%)}"]})],n)}(X),lt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),st=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){this.subGroup=this.group.controls[this.field.name],t.prototype.ngOnInit.call(this)},n=W([e.Component({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}"]})],n)}(X),pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),ct=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.searchControl=new o.FormControl,e.selectAllControl=new o.FormControl(!1),e.optionsFiltered$=new i.ReplaySubject(1),e._onDestroy=new i.Subject,e}return z(n,t),n.prototype.ngOnInit=function(){var e=this;t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.searchControl.valueChanges.pipe(r.startWith(this.searchControl.value),r.takeUntil(this._onDestroy),r.switchMap((function(t){if(t){var n=t.toLowerCase();return e.options$.pipe(r.map((function(t){return t.filter((function(t){return e.field.searchKeys&&e.field.searchKeys.length?e.field.searchKeys.some((function(e){return!!t[e]&&t[e].toString().toLowerCase().indexOf(n)>-1}))||!!e.field.property&&t[e.field.property].toString().toLowerCase().indexOf(n)>-1:e.field.property?t[e.field.property].toString().toLowerCase().indexOf(n)>-1:t.toString().toLowerCase().indexOf(n)>-1}))})))}return e.options$}))).subscribe(this.optionsFiltered$),this.group.controls[this.field.name].valueChanges.pipe(r.takeUntil(this._onDestroy),r.switchMap((function(t){return e.optionsFiltered$.pipe(r.map((function(e){return!!t&&(e.length<t.length?e.length>0&&e.every((function(e){return t.includes(e)})):e.length>0&&e.length===t.length&&t.every((function(t){return e.includes(t)})))})))}))).subscribe((function(t){e.selectAllControl.setValue(t)}))},n.prototype.ngOnDestroy=function(){this._onDestroy.next()},n.prototype.toggleAllSelection=function(t){var e=this;t.checked?this.optionsFiltered$.pipe(r.take(1)).subscribe((function(t){t.length>0&&e.group.controls[e.field.name].patchValue(t.slice())})):this.group.controls[this.field.name].patchValue([])},n.prototype.openChange=function(t){this.field.virtualScroll&&t&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},W([e.ViewChild(a.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([e.ViewChildren(l.MatOption)],n.prototype,"options",void 0),n=W([e.Component({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]=4*48>\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;}"]})],n)}(X),ut=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]})],n)}(X),mt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),dt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([e.Component({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}"]})],n)}(X),ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([e.Component({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'})],n)}(X),gt={label:Y,input:Z,button:tt,select:et,date:nt,radio:ot,checkbox:it,listField:rt,color:at,chip:lt,group:st,icon:pt,selectSearch:ct,lineBreak:ut,link:mt,selectionList:dt,buttonToogleGroup:ft},ht=function(){function t(t,e){this.resolver=t,this.container=e}return t.prototype.ngOnDestroy=function(){this.componentRef&&this.componentRef.destroy()},t.prototype.ngOnInit=function(){this.buildComponent()},t.prototype.ngOnChanges=function(t){t.group&&(this.group=t.group.currentValue),t.field&&(t.field.previousValue&&t.field.currentValue.component!==t.field.previousValue.component?(this.field=t.field.currentValue,this.buildComponent()):this.field=t.field.currentValue)},t.prototype.buildComponent=function(){var t=this.resolver.resolveComponentFactory(this.field.component||gt[this.field.type]);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(t),this.componentRef.instance.field=this.field,this.componentRef.instance.group=this.group,this.componentRef.instance.siblingFields=this.siblingFields},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},W([e.Input()],t.prototype,"field",void 0),W([e.Input()],t.prototype,"group",void 0),W([e.Input()],t.prototype,"siblingFields",void 0),t=W([e.Directive({selector:"[klesDynamicField]"})],t)}(),vt=function(){function t(){}return t.prototype.isErrorState=function(t,e){var n=e&&e.submitted;return!!(t&&t.invalid&&(t.dirty||t.touched||n))},t}(),yt=function(){function t(){}return t=W([e.NgModule({imports:[n.CommonModule,s.MatSliderModule,p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,h.MatFormFieldModule,y.MatInputModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,l.MatNativeDateModule,L.MatSnackBarModule,q.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,$.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,y.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,l.MatNativeDateModule,L.MatSnackBarModule,q.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,$.ColorPickerModule,a.ScrollingModule,a.CdkScrollable,G.MatButtonToggleModule],providers:[v.MatDatepickerModule,V.MatDialogModule]})],t)}(),Ct=function(){function t(){this.name="",this.label="",this.color="accent",this.icon="",this.iconSvg="",this.disabled=!1,this.classButton="",this.value={},this.onChange=function(){},this.onTouched=function(){}}var n;return n=t,t.prototype.ngOnInit=function(){},t.prototype.click=function(t){this.value.event=this.name,this.onChange(this.value)},t.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},t.prototype.setDisabledState=function(t){this.disabled=t},W([e.Input()],t.prototype,"name",void 0),W([e.Input()],t.prototype,"label",void 0),W([e.Input()],t.prototype,"color",void 0),W([e.Input()],t.prototype,"icon",void 0),W([e.Input()],t.prototype,"iconSvg",void 0),W([e.Input()],t.prototype,"disabled",void 0),W([e.Input()],t.prototype,"classButton",void 0),W([e.Input()],t.prototype,"value",void 0),W([e.Input()],t.prototype,"tooltip",void 0),t=n=W([e.Component({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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return n})),multi:!0}]})],t)}(),bt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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    '})],n)}(X),kt=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.value={busy:!1,error:[],event:!1},e}var i;return z(n,t),i=n,n.prototype.countError=function(){return this.value.error?this.value.error.length:0},n=i=W([e.Component({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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Ct),Mt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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    '})],n)}(X),It=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.accept="*.*",e.fileReader=new FileReader,e.value={},e}var i;return z(n,t),i=n,n.prototype.click=function(t){this.file.nativeElement.click()},n.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},n.prototype.onFileLoad=function(t){var e=t.target.result;this.fileContent=e},n.prototype.onFileSelect=function(t){return U(this,void 0,void 0,(function(){var e,n,o,i,r;return H(this,(function(a){switch(a.label){case 0:if(!(t.files.length>0))return[3,8];if(e=t.files,n=[],!e||!e.length)return[3,7];console.log("Filename: "+e[0].name),console.log("Type: "+e[0].type),console.log("Size: "+e[0].size+" bytes"),console.log("Files=",e.length),o=0,a.label=1;case 1:if(!(o<e.length))return[3,6];a.label=2;case 2:return a.trys.push([2,4,,5]),i=n,r=o,[4,this.readUploadedFile(e[o])];case 3:return i[r]=a.sent(),[3,5];case 4:return a.sent(),[3,5];case 5:return o++,[3,1];case 6:1===n.length&&(n=n[0]),a.label=7;case 7:this.value.event=this.name,this.value.fileContent=n,this.onChange(this.value),t.value="",a.label=8;case 8:return[2]}}))}))},n.prototype.readUploadedFile=function(t){var e=new FileReader;return new Promise((function(n,o){e.onerror=function(){e.abort();var t=new DOMException("Problem parsing input file.");o(t)},e.onload=function(){n(e.result)},e.readAsArrayBuffer(t)}))},W([e.ViewChild("file")],n.prototype,"file",void 0),n=i=W([e.Component({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:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Ct),Ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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    '})],n)}(X),xt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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%)}"]})],n)}(X),St=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),Ot=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n=W([e.Component({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%)}"]})],n)}(Z),wt=function(){function t(){}return t.prototype.transform=function(t,e){return e&&e.length>0?e.reduce((function(t,e){return e.options?e.options.forEach((function(n){t=e.pipe.transform(t,n)})):t=e.pipe.transform(t),t}),t):t},t=W([e.Pipe({name:"klesTransform"})],t)}(),Tt=function(){function t(){}return t.prototype.transform=function(t,e){return t&&Array.isArray(t)?e?t.map((function(t){return t[e]})).filter(Boolean).join(", "):t.join(", "):""},t=W([e.Pipe({name:"arrayFormat"})],t)}(),At=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),Vt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return z(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n=W([e.Component({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'})],n)}(X),Et=[J,Y,Z,Ot,tt,Vt,Ct,bt,kt,Mt,It,Ft,et,nt,ot,it,rt,at,xt,St,lt,st,pt,ct,ut,mt,At,dt,ft],Pt=[ht,Q],Bt=[wt,Tt],jt=function(){function t(){}return t=W([e.NgModule({declarations:[Et,Pt,Bt],imports:[n.CommonModule,o.ReactiveFormsModule,D.TranslateModule,K.FlexLayoutModule,o.FormsModule,yt,$.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:l.ErrorStateMatcher,useClass:vt},Bt],entryComponents:[Et],exports:[Et,Bt,Pt,$.ColorPickerModule],schemas:[e.CUSTOM_ELEMENTS_SCHEMA,e.NO_ERRORS_SCHEMA]})],t)}();t.ArrayFormatPipe=Tt,t.KlesButtonCheckerComponent=kt,t.KlesButtonComponent=Ct,t.KlesButtonFileComponent=It,t.KlesComponentDirective=Q,t.KlesDynamicFieldDirective=ht,t.KlesDynamicFormComponent=J,t.KlesFieldAbstract=X,t.KlesFormBadgeComponent=Vt,t.KlesFormButtonCheckerComponent=Mt,t.KlesFormButtonComponent=bt,t.KlesFormButtonFileComponent=Ft,t.KlesFormButtonToogleGroupComponent=ft,t.KlesFormCheckboxComponent=it,t.KlesFormChipComponent=lt,t.KlesFormColorComponent=at,t.KlesFormDateComponent=nt,t.KlesFormErrorStateMatcher=vt,t.KlesFormGroupComponent=st,t.KlesFormIconComponent=pt,t.KlesFormInputClearableComponent=Ot,t.KlesFormInputComponent=Z,t.KlesFormLabelComponent=Y,t.KlesFormLineBreakComponent=ut,t.KlesFormLinkComponent=mt,t.KlesFormListFieldComponent=rt,t.KlesFormRadioComponent=ot,t.KlesFormSelectComponent=et,t.KlesFormSelectSearchComponent=ct,t.KlesFormSelectionListComponent=dt,t.KlesFormSlideToggleComponent=At,t.KlesFormSubmitButtonComponent=tt,t.KlesFormTextComponent=St,t.KlesFormTextareaComponent=xt,t.KlesMaterialDynamicformsModule=jt,t.KlesTransformPipe=wt,t.autocompleteObjectValidator=function(t){return function(e){return null!==e.value&&void 0!==e.value||t?"string"==typeof e.value?""===e.value&&t?null:{invalidAutocompleteObject:{value:e.value}}:null:{invalidAutocompleteObject:{value:e.value}}}},t.autocompleteStringValidator=function(t,e){return function(n){return""!==n.value&&null!==n.value||!e?-1!==t.indexOf(n.value)?null:{invalidAutocompleteString:{value:n.value}}:null}},t.ɵa=yt,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=3kles-kles-material-dynamicforms.umd.min.js.map