@3kles/kles-material-dynamicforms 1.1.10 → 1.1.13

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

@@ -1,4 +1,4 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(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"],t):t(((e=e||self)["3kles"]=e["3kles"]||{},e["3kles"]["kles-material-dynamicforms"]={}),e.ng.core,e.ng.common,e.ng.forms,e.rxjs,e.rxjs.operators,e.ng.cdk.scrolling,e.ng.material.core,e.ng.material.slider,e.ng.material.button,e.ng.material.toolbar,e.ng.material.icon,e.ng.material.sidenav,e.ng.material.badge,e.ng.material.list,e.ng.material.gridList,e.ng.material.formField,e.ng.material.datepicker,e.ng.material.input,e.ng.material.select,e.ng.material.radio,e.ng.material.chips,e.ng.material.tooltip,e.ng.material.table,e.ng.material.paginator,e.ng.material.card,e.ng.material.menu,e.ng.cdk.table,e.ng.material.tabs,e.ng.material.progressSpinner,e.ng.material.checkbox,e.ng.material.dialog,e.ng.material.autocomplete,e.ng.material.progressBar,e.ng.material.sort,e.ng.material.expansion,e.ng.material.snackBar,e.ng.material.tree,e.ng.material.slideToggle,e.ngxColorPicker,e.ng.material.buttonToggle,e.ng.flexLayout,e.core$2,e.ngxMatSelectSearch)}(this,(function(e,t,n,o,i,r,l,a,s,p,c,u,m,d,f,g,h,v,y,C,b,k,M,F,I,x,S,O,w,A,T,V,E,P,B,j,L,R,q,G,$,K,D,N){"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,l,a,s,p,c,u,m,d,f,g,h,y,v,C,b,k,M,F,O,I,x,S,w,A,T,D,V,E,P,B,j,L,R,q,G,$,K,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 _=function(e,t){return(_=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function z(e,t){function n(){this.constructor=e}_(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var W,U=function(){return(U=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var i in t=arguments[n])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e}).apply(this,arguments)};function H(e,t,n,o){var i,r=arguments.length,l=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(l=(r<3?i(l):r>3?i(t,n,l):i(t,n))||l);return r>3&&l&&Object.defineProperty(t,n,l),l}function J(e,t,n,o){return new(n||(n=Promise))((function(i,r){function l(e){try{s(o.next(e))}catch(e){r(e)}}function a(e){try{s(o.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(l,a)}s((o=o.apply(e,t||[])).next())}))}function Q(e,t){var n,o,i,r,l={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(r){return function(a){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;l;)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 l.label++,{value:r[1],done:!1};case 5:l.label++,o=r[1],r=[0];continue;case 7:r=l.ops.pop(),l.trys.pop();continue;default:if(!(i=l.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){l=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){l.label=r[1];break}if(6===r[0]&&l.label<i[1]){l.label=i[1],i=r;break}if(i&&l.label<i[2]){l.label=i[2],l.ops.push(r);break}i[2]&&l.ops.pop(),l.trys.pop();continue}r=t.call(e,l)}catch(e){r=[6,e],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,a])}}}(W=e.EnumType||(e.EnumType={})).text="text",W.button="button",W.checkbox="checkbox",W.number="number",W.time="time",W.date="date",W.color="color",W.list="list",W.multi="multi",W.array="array",W.group="group",W.lineBreak="lineBreak";var X=function(){function n(e){this.fb=e,this.fields=[],this.validators=[],this.asyncValidators=[],this.submit=new t.EventEmitter,this._onLoaded=new t.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(e){var t,n,o,i;(null===(t=e.fields)||void 0===t?void 0:t.firstChange)||(this.updateForm(),this._onLoaded.emit()),!(null===(n=e.validators)||void 0===n?void 0:n.firstChange)&&this.form&&this.form.setValidators(this.validators.map((function(e){return e.validator}))),!(null===(o=e.asyncValidators)||void 0===o?void 0:o.firstChange)&&this.form&&this.form.setAsyncValidators(this.asyncValidators.map((function(e){return e.validator}))),(null===(i=e.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(e){e.preventDefault(),e.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 t=this;Object.keys(this.form.controls).filter((function(e){return!t.fields.map((function(e){return e.name})).includes(e)})).forEach((function(e){t.form.removeControl(e)})),this.fields.filter((function(e){return!t.form.controls[e.name]})).forEach((function(n){if(n.type!==e.EnumType.lineBreak){var o=t.createControl(n);t.form.addControl(n.name,o)}}))},n.prototype.createControl=function(t){var n=this;if(t.type===e.EnumType.array){var o=this.fb.array([]);if(t.value&&Array.isArray(t.value))t.collections&&Array.isArray(t.collections)&&t.value.forEach((function(e){var i=n.fb.group({});t.collections.forEach((function(t){var o=e[t.name]||null,r=n.createControl(U(U({},t),o&&{value:o}));i.addControl(t.name,r)})),o.push(i)}));else{var i=this.fb.group({});t.collections.forEach((function(e){var t=n.createControl(U({},e));i.addControl(e.name,t)})),o.push(i)}return o}if(t.type===e.EnumType.group){var r=this.fb.group({});return t.collections&&Array.isArray(t.collections)&&t.collections.forEach((function(e){var t=n.createControl(e);r.addControl(e.name,t)})),r}var l=this.fb.control(t.value,{validators:this.bindValidations(t.validations||[]),asyncValidators:this.bindAsyncValidations(t.asyncValidations||[]),updateOn:t.updateOn||"change"});return t.disabled&&l.disable(),l},n.prototype.createForm=function(){var t=this,n=this.fb.group({});return this.fields.forEach((function(o){if(o.type!==e.EnumType.lineBreak){var i=t.createControl(o);n.addControl(o.name,i)}})),n.setValidators(this.validators.map((function(e){return e.validator}))),n.setAsyncValidators(this.asyncValidators.map((function(e){return e.validator}))),n},n.prototype.bindValidations=function(e){if(e.length>0){var t=[];return e.forEach((function(e){t.push(e.validator)})),o.Validators.compose(t)}return null},n.prototype.bindAsyncValidations=function(e){if(e.length>0){var t=[];return e.forEach((function(e){t.push(e.validator)})),o.Validators.composeAsync(t)}return null},n.prototype.validateAllFormFields=function(e){Object.keys(e.controls).forEach((function(t){e.get(t).markAsTouched({onlySelf:!0})}))},n.ctorParameters=function(){return[{type:o.FormBuilder}]},H([t.Input()],n.prototype,"fields",void 0),H([t.Input()],n.prototype,"validators",void 0),H([t.Input()],n.prototype,"asyncValidators",void 0),H([t.Output()],n.prototype,"submit",void 0),H([t.Output()],n.prototype,"_onLoaded",void 0),H([t.Input()],n.prototype,"direction",void 0),n=H([t.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)}(),Y=function(){function e(e,t){this.resolver=e,this.container=t}return e.prototype.ngOnInit=function(){this.buildComponent()},e.prototype.ngOnChanges=function(e){e.component&&!e.component.isFirstChange()&&(this.component=e.component.currentValue,this.buildComponent()),e.value&&!e.value.isFirstChange()&&(this.value=e.value.currentValue,this.componentRef.instance.value=this.value)},e.prototype.buildComponent=function(){var e=this.resolver.resolveComponentFactory(this.component);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(e),this.componentRef.instance.component=this.component,this.componentRef.instance.value=this.value,this.componentRef.instance.field=this.field},e.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ViewContainerRef}]},H([t.Input()],e.prototype,"component",void 0),H([t.Input()],e.prototype,"value",void 0),H([t.Input()],e.prototype,"field",void 0),e=H([t.Directive({selector:"[klesComponent]"})],e)}(),Z=function(){function e(){}return e.prototype.ngOnInit=function(){var e,t=this;this.field.valueChanges&&this.field.valueChanges(this.field,this.group,this.siblingFields),null===(e=this.group.controls[this.field.name])||void 0===e||e.valueChanges.pipe().subscribe((function(e){t.field.valueChanges&&t.field.valueChanges(t.field,t.group,t.siblingFields,e)}))},e.prototype.ngAfterViewInit=function(){},e.prototype.applyPipeTransform=function(){if(this.group&&this.field){var e=this.group.controls[this.field.name];if(e){var t=this.group.controls[this.field.name].value;this.field.pipeTransform&&this.field.pipeTransform.forEach((function(n){var o=e.value;n.options?n.options.forEach((function(e){o=n.pipe.transform(t,e)})):o=n.pipe.transform(t),e.patchValue(o,{onlySelf:!0,emitEvent:!1})}))}}},e}(),ee=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){this.group.controls[this.field.name].disable(),e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),te=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){var t=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(e){return e?t.filterData(e):t.options$}))),this.field.maxLength||(this.field.maxLength=524288),e.prototype.ngOnInit.call(this)},n.prototype.isPending=function(){return this.group.controls[this.field.name].pending||this.field.pending},n.prototype.filterData=function(e){var t,n=this;return t="string"==typeof e&&"[object String]"===Object.prototype.toString.call(e)?e.toLowerCase():e[this.field.property].toLowerCase(),this.field.property?this.options$.pipe(r.map((function(e){return e.filter((function(e){return 0===e[n.field.property].toLowerCase().indexOf(t)}))}))):this.options$.pipe(r.map((function(e){return e.filter((function(e){return 0===e.toLowerCase().indexOf(t)}))})))},n.prototype.displayFn=function(e){return this.field.displayWith?this.field.displayWith(e):e&&this.field&&this.field.property?e[this.field.property]?e[this.field.property]:"":e||""},n=H([t.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" [field]="field">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n        </ng-template>\n\n        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),ne=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),oe=function(e){function n(){var t=e.call(this)||this;return t.compareFn=function(e,n){return t.field.property&&e&&n?e[t.field.property]===n[t.field.property]:e===n},t}return z(n,e),n.prototype.ngOnInit=function(){e.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(e){this.field.virtualScroll&&e&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},H([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),H([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=H([t.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)" [compareWith]="compareFn"\n        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">\n        <mat-select-trigger *ngIf="field.triggerComponent">\n            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>\n        </mat-select-trigger>\n\n\n        <ng-container *ngIf="!field.virtualScroll">\n            <ng-container *ngIf="!field.autocompleteComponent">\n                <mat-option *ngFor="let item of options$ | async" [value]="item">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf="field.autocompleteComponent">\n                <mat-option *ngFor="let item of options$ | async" [value]="item">\n                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf="field.virtualScroll">\n            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=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" [field]="field"></ng-container>\n                    </mat-option>\n                    <ng-container *ngIf="field.multiple">\n                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n                        style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        </mat-select>\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),ie=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),re=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),le=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),ae=function(e){function n(t){var n=e.call(this)||this;return n.fb=t,n}return z(n,e),n.prototype.ngOnInit=function(){this.formArray=this.group.controls[this.field.name],e.prototype.ngOnInit.call(this)},n.prototype.createFormGroup=function(){var e=this,t=this.fb.group({});return this.field.collections.forEach((function(n){var o=e.fb.control(null,e.bindValidations(n.validations||[]),e.bindAsyncValidations(n.asyncValidations||[]));t.addControl(n.name,o)})),t},n.prototype.deleteField=function(e){this.formArray.removeAt(e)},n.prototype.addField=function(){this.formArray.push(this.createFormGroup())},n.prototype.bindValidations=function(e){if(e.length>0){var t=[];return e.forEach((function(e){t.push(e.validator)})),o.Validators.compose(t)}return null},n.prototype.bindAsyncValidations=function(e){if(e.length>0){var t=[];return e.forEach((function(e){t.push(e.validator)})),o.Validators.composeAsync(t)}return null},n.ctorParameters=function(){return[{type:o.FormBuilder}]},n=H([t.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)}(Z),se=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n.prototype.invertColor=function(e,t){if(0===e.indexOf("#")&&(e=e.slice(1)),3===e.length&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),6!==e.length)return"#000000";var n=parseInt(e.slice(0,2),16),o=parseInt(e.slice(2,4),16),i=parseInt(e.slice(4,6),16);return t?.299*n+.587*o+.114*i>186?"#000000":"#FFFFFF":"#"+(255-n).toString(16)+(255-o).toString(16)+(255-i).toString(16)},n=H([t.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)}(Z),pe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),ce=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){this.subGroup=this.group.controls[this.field.name],e.prototype.ngOnInit.call(this)},n=H([t.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" [siblingFields]="field.collections">\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)}(Z),ue=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),me=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.searchControl=new o.FormControl,t.selectAllControl=new o.FormControl(!1),t.optionsFiltered$=new i.ReplaySubject(1),t._onDestroy=new i.Subject,t.compareFn=function(e,n){return t.field.property&&e&&n?e[t.field.property]===n[t.field.property]:e===n},t}return z(n,e),n.prototype.ngOnInit=function(){var t=this;e.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(e){if(e){var n=e.toLowerCase();return t.options$.pipe(r.map((function(e){return e.filter((function(e){return t.field.searchKeys&&t.field.searchKeys.length?t.field.searchKeys.some((function(t){return!!e[t]&&e[t].toString().toLowerCase().indexOf(n)>-1}))||!!t.field.property&&e[t.field.property].toString().toLowerCase().indexOf(n)>-1:t.field.property?e[t.field.property].toString().toLowerCase().indexOf(n)>-1:e.toString().toLowerCase().indexOf(n)>-1}))})))}return t.options$}))).subscribe(this.optionsFiltered$),this.group.controls[this.field.name].valueChanges.pipe(r.takeUntil(this._onDestroy),r.startWith(this.group.controls[this.field.name].value),r.switchMap((function(e){return t.optionsFiltered$.pipe(r.map((function(t){return!!e&&(t.length<e.length?t.length>0&&t.every((function(t){return e.includes(t)})):t.length>0&&t.length===e.length&&e.every((function(e){return t.includes(e)})))})))}))).subscribe((function(e){t.selectAllControl.setValue(e)}))},n.prototype.ngOnDestroy=function(){this._onDestroy.next()},n.prototype.toggleAllSelection=function(e){var t=this;e.checked?this.optionsFiltered$.pipe(r.take(1)).subscribe((function(e){e.length>0&&t.group.controls[t.field.name].patchValue(e.slice())})):this.group.controls[this.field.name].patchValue([])},n.prototype.openChange=function(e){this.field.virtualScroll&&e&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},H([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),H([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=H([t.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)" [compareWith]="compareFn"\n        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">\n        <mat-select-trigger *ngIf="field.triggerComponent">\n            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>\n        </mat-select-trigger>\n\n        <ng-container *ngIf="field.virtualScroll">\n            <mat-option>\n                <ngx-mat-select-search [formControl]="searchControl"\n                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n            </mat-option>\n                \n            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=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" [field]="field"></ng-container>\n                    </mat-option>\n\n                    <ng-container *ngIf="field.multiple">\n                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n                        style="display:none">\n                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        <ng-container *ngIf="!field.virtualScroll">\n           \n            <mat-option>\n                <ngx-mat-select-search [formControl]="searchControl"\n                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n            </mat-option>\n            \n            <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"\n                    (change)="toggleAllSelection($event)">\n                    {{\'selectAll\' | translate}}\n            </mat-checkbox>\n\n            <ng-container *ngIf="!field.autocompleteComponent">\n                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n            </ng-container>\n\n            <ng-container *ngIf="field.autocompleteComponent">\n                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item">\n                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n\n        </mat-select>\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]})],n)}(Z),de=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]})],n)}(Z),fe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),ge=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=H([t.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" [field]="field"></ng-container>\n                </mat-list-option>\n            </ng-container>\n        </mat-selection-list>\n    </div>\n',styles:["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]})],n)}(Z),he=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=H([t.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)}(Z),ve=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this),this.formArray=this.group.controls[this.field.name],console.log("on arrive ici"),console.log(this.field),console.log(this.formArray)},n=H([t.Component({selector:"kles-array",template:'\n    <div [formGroup]="group">\n        <ng-container [formArrayName]="field.name">\n            <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"\n            [ngClass]="field.direction === \'column\' ? \'column\': \'row\'">\n                <ng-container *ngFor="let subfield of field.collections;"\n                    klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}",".row { gap:10px; flex-direction: row }",".column { flex-direction: column, gap:0px}"]})],n)}(Z),ye={label:ee,input:te,button:ne,select:oe,date:ie,radio:re,checkbox:le,listField:ae,array:ve,color:se,chip:pe,group:ce,icon:ue,selectSearch:me,lineBreak:de,link:fe,selectionList:ge,buttonToogleGroup:he},Ce=function(){function e(e,t){this.resolver=e,this.container=t}return e.prototype.ngOnDestroy=function(){this.componentRef&&this.componentRef.destroy()},e.prototype.ngOnInit=function(){this.buildComponent()},e.prototype.ngOnChanges=function(e){console.log("ngOnCHange",e),e.group&&(this.group=e.group.currentValue),e.field&&(this.field=e.field.currentValue,this.buildComponent())},e.prototype.buildComponent=function(){var e=this.resolver.resolveComponentFactory(this.field.component||ye[this.field.type]);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(e),this.componentRef.instance.field=this.field,this.componentRef.instance.group=this.group,this.componentRef.instance.siblingFields=this.siblingFields},e.ctorParameters=function(){return[{type:t.ComponentFactoryResolver},{type:t.ViewContainerRef}]},H([t.Input()],e.prototype,"field",void 0),H([t.Input()],e.prototype,"group",void 0),H([t.Input()],e.prototype,"siblingFields",void 0),e=H([t.Directive({selector:"[klesDynamicField]"})],e)}(),be=function(){function e(){}return e.prototype.isErrorState=function(e,t){var n=t&&t.submitted;return!!(e&&e.invalid&&(e.dirty||e.touched||n))},e}(),ke=function(){function e(){}return e=H([t.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,F.MatTableModule,I.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,a.MatNativeDateModule,L.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,G.ColorPickerModule,$.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,F.MatTableModule,I.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,a.MatNativeDateModule,L.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,G.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,$.MatButtonToggleModule],providers:[v.MatDatepickerModule,V.MatDialogModule]})],e)}(),Me=function(){function e(){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=e,e.prototype.ngOnInit=function(){},e.prototype.click=function(e){this.value.event=this.name,this.onChange(this.value)},e.prototype.writeValue=function(e){if(e||(e={event:this.name}),e.event||(e.event=this.name),e.uiButton){var t=e.uiButton;this.label=t.label?t.label:this.label,this.color=t.color?t.color:this.color,this.icon=t.icon?t.icon:this.icon,this.iconSvg=t.iconSvg?t.iconSvg:this.iconSvg,this.disabled=t.disabled?t.disabled:this.disabled,this.classButton=t.class?t.class:this.classButton}this.value=e},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e},H([t.Input()],e.prototype,"name",void 0),H([t.Input()],e.prototype,"label",void 0),H([t.Input()],e.prototype,"color",void 0),H([t.Input()],e.prototype,"icon",void 0),H([t.Input()],e.prototype,"iconSvg",void 0),H([t.Input()],e.prototype,"disabled",void 0),H([t.Input()],e.prototype,"classButton",void 0),H([t.Input()],e.prototype,"value",void 0),H([t.Input()],e.prototype,"tooltip",void 0),e=n=H([t.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:t.forwardRef((function(){return n})),multi:!0}]})],e)}(),Fe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),Ie=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.value={busy:!1,error:[],event:!1},t}var i;return z(n,e),i=n,n.prototype.countError=function(){return this.value.error?this.value.error.length:0},n=i=H([t.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                [disabled]="disabled"\n                matBadge="{{countError()}}" (click)="click($event)">\n            </kles-button>\n        </span>\n        <span style="text-align: center;">\n            <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">\n                <mat-spinner [diameter]="25"></mat-spinner>\n            </span>\n            <span *ngIf="value.message" style="margin-right: 10px">\n                {{value.message|translate}}\n            </span>\n        </span>\n    ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return i})),multi:!0}]})],n)}(Me),xe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),Se=function(e){function n(){var t=null!==e&&e.apply(this,arguments)||this;return t.accept="*.*",t.fileReader=new FileReader,t.value={},t}var i;return z(n,e),i=n,n.prototype.click=function(e){this.file.nativeElement.click()},n.prototype.writeValue=function(e){if(e||(e={event:this.name}),e.event||(e.event=this.name),e.uiButton){var t=e.uiButton;this.label=t.label?t.label:this.label,this.color=t.color?t.color:this.color,this.icon=t.icon?t.icon:this.icon,this.iconSvg=t.iconSvg?t.iconSvg:this.iconSvg,this.disabled=t.disabled?t.disabled:this.disabled,this.classButton=t.class?t.class:this.classButton}this.value=e},n.prototype.onFileLoad=function(e){var t=e.target.result;this.fileContent=t},n.prototype.onFileSelect=function(e){return J(this,void 0,void 0,(function(){var t,n,o,i,r;return Q(this,(function(l){switch(l.label){case 0:if(!(e.files.length>0))return[3,8];if(t=e.files,n=[],!t||!t.length)return[3,7];console.log("Filename: "+t[0].name),console.log("Type: "+t[0].type),console.log("Size: "+t[0].size+" bytes"),console.log("Files=",t.length),o=0,l.label=1;case 1:if(!(o<t.length))return[3,6];l.label=2;case 2:return l.trys.push([2,4,,5]),i=n,r=o,[4,this.readUploadedFile(t[o])];case 3:return i[r]=l.sent(),[3,5];case 4:return l.sent(),[3,5];case 5:return o++,[3,1];case 6:1===n.length&&(n=n[0]),l.label=7;case 7:this.value.event=this.name,this.value.fileContent=n,this.onChange(this.value),e.value="",l.label=8;case 8:return[2]}}))}))},n.prototype.readUploadedFile=function(e){var t=new FileReader;return new Promise((function(n,o){t.onerror=function(){t.abort();var e=new DOMException("Problem parsing input file.");o(e)},t.onload=function(){n(t.result)},t.readAsArrayBuffer(e)}))},H([t.ViewChild("file")],n.prototype,"file",void 0),n=i=H([t.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            [disabled]="disabled"\n            [value]="value" (click)="click($event)">\n        </kles-button>\n    ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return i})),multi:!0}]})],n)}(Me),Oe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),we=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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"  [maxlength]="field.maxLength">\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)}(Z),Ae=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),Te=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n=H([t.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" [field]="field">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n        </ng-template>\n        <button mat-button matSuffix mat-icon-button aria-label="Clear" type="button"\n            (click)="group.controls[field.name].reset();">\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(te),Ve=function(){function e(){}return e.prototype.transform=function(e,t){return t&&t.length>0?t.reduce((function(e,t){return t.options?t.options.forEach((function(n){e=t.pipe.transform(e,n)})):e=t.pipe.transform(e),e}),e):e},e=H([t.Pipe({name:"klesTransform"})],e)}(),Ee=function(){function e(){}return e.prototype.transform=function(e,t){return e&&Array.isArray(e)?t?e.map((function(e){return e[t]})).filter(Boolean).join(", "):e.join(", "):""},e=H([t.Pipe({name:"arrayFormat"})],e)}(),Pe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),Be=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},n=H([t.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)}(Z),je=[X,ee,te,Te,ne,Be,Me,Fe,Ie,xe,Se,Oe,oe,ie,re,le,ae,se,we,Ae,pe,ce,ue,me,de,fe,Pe,ge,he,ve],Le=[Ce,Y],Re=[Ve,Ee],qe=function(){function e(){}return e=H([t.NgModule({declarations:[je,Le,Re],imports:[n.CommonModule,o.ReactiveFormsModule,D.TranslateModule,K.FlexLayoutModule,o.FormsModule,ke,G.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:be},Re],entryComponents:[je],exports:[je,Re,Le,G.ColorPickerModule],schemas:[t.CUSTOM_ELEMENTS_SCHEMA,t.NO_ERRORS_SCHEMA]})],e)}();e.ArrayFormatPipe=Ee,e.KlesButtonCheckerComponent=Ie,e.KlesButtonComponent=Me,e.KlesButtonFileComponent=Se,e.KlesComponentDirective=Y,e.KlesDynamicFieldDirective=Ce,e.KlesDynamicFormComponent=X,e.KlesFieldAbstract=Z,e.KlesFormArrayComponent=ve,e.KlesFormBadgeComponent=Be,e.KlesFormButtonCheckerComponent=xe,e.KlesFormButtonComponent=Fe,e.KlesFormButtonFileComponent=Oe,e.KlesFormButtonToogleGroupComponent=he,e.KlesFormCheckboxComponent=le,e.KlesFormChipComponent=pe,e.KlesFormColorComponent=se,e.KlesFormDateComponent=ie,e.KlesFormErrorStateMatcher=be,e.KlesFormGroupComponent=ce,e.KlesFormIconComponent=ue,e.KlesFormInputClearableComponent=Te,e.KlesFormInputComponent=te,e.KlesFormLabelComponent=ee,e.KlesFormLineBreakComponent=de,e.KlesFormLinkComponent=fe,e.KlesFormListFieldComponent=ae,e.KlesFormRadioComponent=re,e.KlesFormSelectComponent=oe,e.KlesFormSelectSearchComponent=me,e.KlesFormSelectionListComponent=ge,e.KlesFormSlideToggleComponent=Pe,e.KlesFormSubmitButtonComponent=ne,e.KlesFormTextComponent=Ae,e.KlesFormTextareaComponent=we,e.KlesMaterialDynamicformsModule=qe,e.KlesTransformPipe=Ve,e.autocompleteObjectValidator=function(e){return function(t){return null!==t.value&&void 0!==t.value||e?"string"==typeof t.value?""===t.value&&e?null:{invalidAutocompleteObject:{value:t.value}}:null:{invalidAutocompleteObject:{value:t.value}}}},e.autocompleteStringValidator=function(e,t){return function(n){return""!==n.value&&null!==n.value||!t?-1!==e.indexOf(n.value)?null:{invalidAutocompleteString:{value:n.value}}:null}},e.ɵa=ke,Object.defineProperty(e,"__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 W(t,e){function n(){this.constructor=t}_(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var z,U=function(){return(U=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function H(t,e,n,o){var i,r=arguments.length,l=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,n,o);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(l=(r<3?i(l):r>3?i(e,n,l):i(e,n))||l);return r>3&&l&&Object.defineProperty(e,n,l),l}function J(t,e,n,o){return new(n||(n=Promise))((function(i,r){function l(t){try{s(o.next(t))}catch(t){r(t)}}function a(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(l,a)}s((o=o.apply(t,e||[])).next())}))}function Q(t,e){var n,o,i,r,l={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function a(r){return function(a){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;l;)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 l.label++,{value:r[1],done:!1};case 5:l.label++,o=r[1],r=[0];continue;case 7:r=l.ops.pop(),l.trys.pop();continue;default:if(!(i=l.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){l=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){l.label=r[1];break}if(6===r[0]&&l.label<i[1]){l.label=i[1],i=r;break}if(i&&l.label<i[2]){l.label=i[2],l.ops.push(r);break}i[2]&&l.ops.pop(),l.trys.pop();continue}r=e.call(t,l)}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,a])}}}(z=t.EnumType||(t.EnumType={})).text="text",z.button="button",z.checkbox="checkbox",z.number="number",z.time="time",z.date="date",z.color="color",z.list="list",z.multi="multi",z.array="array",z.group="group",z.lineBreak="lineBreak";var X=function(){function n(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(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(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")},n.prototype.onSubmit=function(t){t.preventDefault(),t.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 e=this;Object.keys(this.form.controls).filter((function(t){return!e.fields.map((function(t){return t.name})).includes(t)})).forEach((function(t){e.form.removeControl(t)})),this.fields.filter((function(t){return!e.form.controls[t.name]})).forEach((function(n){if(n.type!==t.EnumType.lineBreak){var o=e.createControl(n);e.form.addControl(n.name,o)}}))},n.prototype.createControl=function(e){var n=this;if(e.type===t.EnumType.array){var o=this.fb.array([]);if(e.value&&Array.isArray(e.value))e.collections&&Array.isArray(e.collections)&&e.value.forEach((function(t){var i=n.fb.group({});e.collections.forEach((function(e){var o=t[e.name]||null,r=n.createControl(U(U({},e),o&&{value:o}));i.addControl(e.name,r)})),o.push(i)}));else{var i=this.fb.group({});e.collections.forEach((function(t){var e=n.createControl(U({},t));i.addControl(t.name,e)})),o.push(i)}return o}if(e.type===t.EnumType.group){var r=this.fb.group({});return e.collections&&Array.isArray(e.collections)&&e.collections.forEach((function(t){var e=n.createControl(t);r.addControl(t.name,e)})),r}var l=this.fb.control(e.value,{validators:this.bindValidations(e.validations||[]),asyncValidators:this.bindAsyncValidations(e.asyncValidations||[]),updateOn:e.updateOn||"change"});return e.disabled&&l.disable(),l},n.prototype.createForm=function(){var e=this,n=this.fb.group({});return this.fields.forEach((function(o){if(o.type!==t.EnumType.lineBreak){var i=e.createControl(o);n.addControl(o.name,i)}})),n.setValidators(this.validators.map((function(t){return t.validator}))),n.setAsyncValidators(this.asyncValidators.map((function(t){return t.validator}))),n},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.prototype.validateAllFormFields=function(t){Object.keys(t.controls).forEach((function(e){t.get(e).markAsTouched({onlySelf:!0})}))},n.ctorParameters=function(){return[{type:o.FormBuilder}]},H([e.Input()],n.prototype,"fields",void 0),H([e.Input()],n.prototype,"validators",void 0),H([e.Input()],n.prototype,"asyncValidators",void 0),H([e.Output()],n.prototype,"submit",void 0),H([e.Output()],n.prototype,"_onLoaded",void 0),H([e.Input()],n.prototype,"direction",void 0),n=H([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)}(),Y=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,this.componentRef.instance.field=this.field},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},H([e.Input()],t.prototype,"component",void 0),H([e.Input()],t.prototype,"value",void 0),H([e.Input()],t.prototype,"field",void 0),t=H([e.Directive({selector:"[klesComponent]"})],t)}(),Z=function(){function t(){this._onDestroy=new i.Subject}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(r.takeUntil(this._onDestroy)).subscribe((function(t){e.field.valueChanges&&e.field.valueChanges(e.field,e.group,e.siblingFields,t)}))},t.prototype.ngAfterViewInit=function(){},t.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},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}(),tt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){this.group.controls[this.field.name].disable(),t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),et=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(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.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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" [field]="field">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n        </ng-template>\n\n        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),nt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),ot=function(t){function n(){var e=t.call(this)||this;return e.compareFn=function(t,n){return e.field.property&&t&&n?t[e.field.property]===n[e.field.property]:t===n},e}return W(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.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n.prototype.openChange=function(t){this.field.virtualScroll&&t&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},H([e.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),H([e.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=H([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)" [compareWith]="compareFn"\n        [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">\n        <mat-select-trigger *ngIf="field.triggerComponent">\n            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>\n        </mat-select-trigger>\n\n\n        <ng-container *ngIf="!field.virtualScroll">\n            <ng-container *ngIf="!field.autocompleteComponent">\n                <mat-option *ngFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">{{(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" [disabled]="item?.disabled">\n                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf="field.virtualScroll">\n            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>\n                <ng-container *ngIf="!field.autocompleteComponent">\n                    <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item"  [disabled]="item?.disabled">\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" [disabled]="item?.disabled">\n                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                    </mat-option>\n                    <ng-container *ngIf="field.multiple">\n                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n                        style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        </mat-select>\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),it=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),rt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),lt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),at=function(t){function n(e){var n=t.call(this)||this;return n.fb=e,n}return W(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.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n.ctorParameters=function(){return[{type:o.FormBuilder}]},n=H([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)}(Z),st=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(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.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),ct=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){this.subGroup=this.group.controls[this.field.name],t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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" [siblingFields]="field.collections">\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)}(Z),ut=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),mt=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.compareFn=function(t,n){return e.field.property&&t&&n?t[e.field.property]===n[e.field.property]:t===n},e}return W(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.startWith(this.group.controls[this.field.name].value),r.switchMap((function(t){return e.optionsFiltered$.pipe(r.map((function(t){return t.filter((function(t){return!(null==t?void 0:t.disabled)}))})),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(){t.prototype.ngOnDestroy.call(this)},n.prototype.toggleAllSelection=function(t){var e=this;t.checked?this.optionsFiltered$.pipe(r.take(1),r.map((function(t){return t.filter((function(t){return!(null==t?void 0:t.disabled)}))}))).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())},H([e.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),H([e.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=H([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)" [compareWith]="compareFn"\n        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">\n        <mat-select-trigger *ngIf="field.triggerComponent">\n            <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>\n        </mat-select-trigger>\n\n        <ng-container *ngIf="field.virtualScroll">\n            <mat-option>\n                <ngx-mat-select-search [formControl]="searchControl"\n                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n            </mat-option>\n                \n            <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=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" [disabled]="item?.disabled">{{(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" [disabled]="item?.disabled">\n                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                    </mat-option>\n\n                    <ng-container *ngIf="field.multiple">\n                        <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n                        style="display:none">\n                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n\n                    <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n                        <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                        </mat-option>\n                    </ng-container>\n                </ng-container>\n            </cdk-virtual-scroll-viewport>\n\n        </ng-container>\n\n        <ng-container *ngIf="!field.virtualScroll">\n           \n            <mat-option>\n                <ngx-mat-select-search [formControl]="searchControl"\n                placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n            </mat-option>\n            \n            <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"\n                    (change)="toggleAllSelection($event)">\n                    {{\'selectAll\' | translate}}\n            </mat-checkbox>\n\n            <ng-container *ngIf="!field.autocompleteComponent">\n                <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(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" [disabled]="item?.disabled">\n                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n                </mat-option>\n            </ng-container>\n        </ng-container>\n\n\n        </mat-select>\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n            <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n                <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n            </ng-container>\n    </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]})],n)}(Z),dt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n            flex-basis: 100%;\n            display: flex;\n            height:0;\n        }"]})],n)}(Z),ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),gt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(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.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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" [field]="field"></ng-container>\n                </mat-list-option>\n            </ng-container>\n        </mat-selection-list>\n    </div>\n',styles:["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]})],n)}(Z),ht=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(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.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),yt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.formArray=this.group.controls[this.field.name]},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-array",template:'\n    <div [formGroup]="group">\n        <ng-container [formArrayName]="field.name">\n            <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"\n            [ngClass]="field.direction === \'column\' ? \'column\': \'row\'">\n                <ng-container *ngFor="let subfield of field.collections;"\n                    klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}",".row { gap:10px; flex-direction: row }",".column { flex-direction: column, gap:0px}"]})],n)}(Z),vt={label:tt,input:et,button:nt,select:ot,date:it,radio:rt,checkbox:lt,listField:at,array:yt,color:st,chip:pt,group:ct,icon:ut,selectSearch:mt,lineBreak:dt,link:ft,selectionList:gt,buttonToogleGroup:ht},Ct=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&&(this.field=t.field.currentValue,this.buildComponent())},t.prototype.buildComponent=function(){var t=this.resolver.resolveComponentFactory(this.field.component||vt[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}]},H([e.Input()],t.prototype,"field",void 0),H([e.Input()],t.prototype,"group",void 0),H([e.Input()],t.prototype,"siblingFields",void 0),t=H([e.Directive({selector:"[klesDynamicField]"})],t)}(),bt=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}(),kt=function(){function t(){}return t=H([e.NgModule({imports:[n.CommonModule,s.MatSliderModule,p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,h.MatFormFieldModule,v.MatInputModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,v.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,G.MatButtonToggleModule],providers:[y.MatDatepickerModule,D.MatDialogModule]})],t)}(),Mt=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},H([e.Input()],t.prototype,"name",void 0),H([e.Input()],t.prototype,"label",void 0),H([e.Input()],t.prototype,"color",void 0),H([e.Input()],t.prototype,"icon",void 0),H([e.Input()],t.prototype,"iconSvg",void 0),H([e.Input()],t.prototype,"disabled",void 0),H([e.Input()],t.prototype,"classButton",void 0),H([e.Input()],t.prototype,"value",void 0),H([e.Input()],t.prototype,"tooltip",void 0),t=n=H([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)}(),Ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),Ot=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 W(n,t),i=n,n.prototype.countError=function(){return this.value.error?this.value.error.length:0},n=i=H([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                [disabled]="disabled"\n                matBadge="{{countError()}}" (click)="click($event)">\n            </kles-button>\n        </span>\n        <span style="text-align: center;">\n            <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">\n                <mat-spinner [diameter]="25"></mat-spinner>\n            </span>\n            <span *ngIf="value.message" style="margin-right: 10px">\n                {{value.message|translate}}\n            </span>\n        </span>\n    ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Mt),It=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),xt=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 W(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 J(this,void 0,void 0,(function(){var e,n,o,i,r;return Q(this,(function(l){switch(l.label){case 0:if(!(t.files.length>0))return[3,8];if(e=t.files,n=[],!e||!e.length)return[3,7];o=0,l.label=1;case 1:if(!(o<e.length))return[3,6];l.label=2;case 2:return l.trys.push([2,4,,5]),i=n,r=o,[4,this.readUploadedFile(e[o])];case 3:return i[r]=l.sent(),[3,5];case 4:return l.sent(),[3,5];case 5:return o++,[3,1];case 6:1===n.length&&(n=n[0]),l.label=7;case 7:this.value.event=this.name,this.value.fileContent=n,this.onChange(this.value),t.value="",l.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)}))},H([e.ViewChild("file")],n.prototype,"file",void 0),n=i=H([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            [disabled]="disabled"\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)}(Mt),St=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),wt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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"  [maxlength]="field.maxLength">\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)}(Z),At=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),Tt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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" [field]="field">\n                        </ng-container>\n                    </mat-option>\n                </ng-container>\n            </mat-autocomplete>\n        </ng-container>\n\n        <ng-template #notAutoComplete>\n            <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n        </ng-template>\n        <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"\n            (click)="group.controls[field.name].reset();">\n            <mat-icon>close</mat-icon>\n        </button>\n\n        <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n        </ng-container>\n    </mat-form-field>\n    ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(et),Dt=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=H([e.Pipe({name:"klesTransform"})],t)}(),Vt=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=H([e.Pipe({name:"arrayFormat"})],t)}(),Et=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),Pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([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)}(Z),Bt=[X,tt,et,Tt,nt,Pt,Mt,Ft,Ot,It,xt,St,ot,it,rt,lt,at,st,wt,At,pt,ct,ut,mt,dt,ft,Et,gt,ht,yt],jt=[Ct,Y],Lt=[Dt,Vt],Rt=function(){function t(){}return t=H([e.NgModule({declarations:[Bt,jt,Lt],imports:[n.CommonModule,o.ReactiveFormsModule,K.TranslateModule,$.FlexLayoutModule,o.FormsModule,kt,q.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:bt},Lt],entryComponents:[Bt],exports:[Bt,Lt,jt,q.ColorPickerModule],schemas:[e.CUSTOM_ELEMENTS_SCHEMA,e.NO_ERRORS_SCHEMA]})],t)}();t.ArrayFormatPipe=Vt,t.KlesButtonCheckerComponent=Ot,t.KlesButtonComponent=Mt,t.KlesButtonFileComponent=xt,t.KlesComponentDirective=Y,t.KlesDynamicFieldDirective=Ct,t.KlesDynamicFormComponent=X,t.KlesFieldAbstract=Z,t.KlesFormArrayComponent=yt,t.KlesFormBadgeComponent=Pt,t.KlesFormButtonCheckerComponent=It,t.KlesFormButtonComponent=Ft,t.KlesFormButtonFileComponent=St,t.KlesFormButtonToogleGroupComponent=ht,t.KlesFormCheckboxComponent=lt,t.KlesFormChipComponent=pt,t.KlesFormColorComponent=st,t.KlesFormDateComponent=it,t.KlesFormErrorStateMatcher=bt,t.KlesFormGroupComponent=ct,t.KlesFormIconComponent=ut,t.KlesFormInputClearableComponent=Tt,t.KlesFormInputComponent=et,t.KlesFormLabelComponent=tt,t.KlesFormLineBreakComponent=dt,t.KlesFormLinkComponent=ft,t.KlesFormListFieldComponent=at,t.KlesFormRadioComponent=rt,t.KlesFormSelectComponent=ot,t.KlesFormSelectSearchComponent=mt,t.KlesFormSelectionListComponent=gt,t.KlesFormSlideToggleComponent=Et,t.KlesFormSubmitButtonComponent=nt,t.KlesFormTextComponent=At,t.KlesFormTextareaComponent=wt,t.KlesMaterialDynamicformsModule=Rt,t.KlesTransformPipe=Dt,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=kt,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=3kles-kles-material-dynamicforms.umd.min.js.map