@3kles/kles-material-dynamicforms 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/3kles-kles-material-dynamicforms.metadata.json +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.js +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.js.map +1 -1
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js +2 -2
- package/bundles/3kles-kles-material-dynamicforms.umd.min.js.map +1 -1
- package/esm2015/lib/fields/textarea.component.js +2 -2
- package/esm5/lib/fields/textarea.component.js +2 -2
- package/fesm2015/3kles-kles-material-dynamicforms.js +1 -1
- package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js +1 -1
- package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!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,I,F,x,S,O,w,T,A,V,E,P,B,j,
|
|
1
|
+
!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,I,F,x,S,O,w,T,A,V,E,P,B,L,j,R,q,$,G,K,D,N){"use strict";
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|
|
@@ -12,5 +12,5 @@
|
|
|
12
12
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
13
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
14
|
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
-
***************************************************************************** */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)}function W(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 U(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 H(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])}}}var J=function(){function e(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(e.prototype,"value",{get:function(){return this.form.value},enumerable:!0,configurable:!0}),e.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()},e.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")},e.prototype.onSubmit=function(e){e.preventDefault(),e.stopPropagation(),this.form.valid?this.submit.emit(this.form.value):this.validateAllFormFields(this.form)},e.prototype.reset=function(){this.form.reset()},e.prototype.updateForm=function(){var e=this;Object.keys(this.form.controls).filter((function(t){return!e.fields.map((function(e){return e.name})).includes(t)})).forEach((function(t){e.form.removeControl(t)})),this.fields.filter((function(t){return!e.form.controls[t.name]})).forEach((function(t){if("lineBreak"!==t.type){var n=e.createControl(t);e.form.addControl(t.name,n)}}))},e.prototype.createControl=function(e){var t=this;if("listField"===e.type){var n=this.fb.array([]);return e.value.forEach((function(o){var i=t.fb.group({});e.collections.forEach((function(e){var n=t.createControl(e);i.addControl(e.name,n)})),n.push(i)})),n}if("group"===e.type){var o=this.fb.group({});return e.collections&&Array.isArray(e.collections)&&e.collections.forEach((function(e){var n=t.createControl(e);o.addControl(e.name,n)})),o}var i=this.fb.control(e.value,{validators:this.bindValidations(e.validations||[]),asyncValidators:this.bindAsyncValidations(e.asyncValidations||[]),updateOn:e.updateOn||"change"});return e.disabled&&i.disable(),i},e.prototype.createForm=function(){var e=this,t=this.fb.group({});return this.fields.forEach((function(n){if("lineBreak"!==n.type){var o=e.createControl(n);t.addControl(n.name,o)}})),t.setValidators(this.validators.map((function(e){return e.validator}))),t.setAsyncValidators(this.asyncValidators.map((function(e){return e.validator}))),t},e.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},e.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},e.prototype.validateAllFormFields=function(e){Object.keys(e.controls).forEach((function(t){e.get(t).markAsTouched({onlySelf:!0})}))},e.ctorParameters=function(){return[{type:o.FormBuilder}]},W([t.Input()],e.prototype,"fields",void 0),W([t.Input()],e.prototype,"validators",void 0),W([t.Input()],e.prototype,"asyncValidators",void 0),W([t.Output()],e.prototype,"submit",void 0),W([t.Output()],e.prototype,"_onLoaded",void 0),W([t.Input()],e.prototype,"direction",void 0),e=W([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; }"]})],e)}(),Q=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}]},W([t.Input()],e.prototype,"component",void 0),W([t.Input()],e.prototype,"value",void 0),W([t.Input()],e.prototype,"field",void 0),e=W([t.Directive({selector:"[klesComponent]"})],e)}(),X=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}(),Y=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=W([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)}(X),Z=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=W([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)}(X),ee=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=W([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)}(X),te=function(e){function n(){return e.call(this)||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.prototype.openChange=function(e){this.field.virtualScroll&&e&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},W([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=W([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)"\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)}(X),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=W([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)}(X),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=W([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)}(X),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=W([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)}(X),re=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=W([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)}(X),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.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=W([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)}(X),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=W([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)}(X),se=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=W([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">\n </ng-container>\n </div>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]})],n)}(X),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=W([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)}(X),ce=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}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())},W([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=W([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)"\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)}(X),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=W([t.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]})],n)}(X),me=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=W([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)}(X),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),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([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)}(X),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),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([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)}(X),ge={label:Y,input:Z,button:ee,select:te,date:ne,radio:oe,checkbox:ie,listField:re,color:le,chip:ae,group:se,icon:pe,selectSearch:ce,lineBreak:ue,link:me,selectionList:de,buttonToogleGroup:fe},he=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){e.group&&(this.group=e.group.currentValue),e.field&&(e.field.previousValue&&e.field.currentValue.component!==e.field.previousValue.component?(this.field=e.field.currentValue,this.buildComponent()):this.field=e.field.currentValue)},e.prototype.buildComponent=function(){var e=this.resolver.resolveComponentFactory(this.field.component||ge[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}]},W([t.Input()],e.prototype,"field",void 0),W([t.Input()],e.prototype,"group",void 0),W([t.Input()],e.prototype,"siblingFields",void 0),e=W([t.Directive({selector:"[klesDynamicField]"})],e)}(),ve=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}(),ye=function(){function e(){}return e=W([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,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,a.MatNativeDateModule,L.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,y.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,j.MatExpansionModule,a.MatNativeDateModule,L.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,G.MatButtonToggleModule],providers:[v.MatDatepickerModule,V.MatDialogModule]})],e)}(),Ce=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},W([t.Input()],e.prototype,"name",void 0),W([t.Input()],e.prototype,"label",void 0),W([t.Input()],e.prototype,"color",void 0),W([t.Input()],e.prototype,"icon",void 0),W([t.Input()],e.prototype,"iconSvg",void 0),W([t.Input()],e.prototype,"disabled",void 0),W([t.Input()],e.prototype,"classButton",void 0),W([t.Input()],e.prototype,"value",void 0),W([t.Input()],e.prototype,"tooltip",void 0),e=n=W([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)}(),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=W([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)}(X),ke=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=W([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)}(Ce),Me=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=W([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)}(X),Ie=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 U(this,void 0,void 0,(function(){var t,n,o,i,r;return H(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)}))},W([t.ViewChild("file")],n.prototype,"file",void 0),n=i=W([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)}(Ce),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=W([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)}(X),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=W([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">\n </textarea>\n\n\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(X),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=W([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)}(X),Oe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n=W([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)}(Z),we=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=W([t.Pipe({name:"klesTransform"})],e)}(),Te=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=W([t.Pipe({name:"arrayFormat"})],e)}(),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=W([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)}(X),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)},n=W([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)}(X),Ee=[J,Y,Z,Oe,ee,Ve,Ce,be,ke,Me,Ie,Fe,te,ne,oe,ie,re,le,xe,Se,ae,se,pe,ce,ue,me,Ae,de,fe],Pe=[he,Q],Be=[we,Te],je=function(){function e(){}return e=W([t.NgModule({declarations:[Ee,Pe,Be],imports:[n.CommonModule,o.ReactiveFormsModule,D.TranslateModule,K.FlexLayoutModule,o.FormsModule,ye,$.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:ve},Be],entryComponents:[Ee],exports:[Ee,Be,Pe,$.ColorPickerModule],schemas:[t.CUSTOM_ELEMENTS_SCHEMA,t.NO_ERRORS_SCHEMA]})],e)}();e.ArrayFormatPipe=Te,e.KlesButtonCheckerComponent=ke,e.KlesButtonComponent=Ce,e.KlesButtonFileComponent=Ie,e.KlesComponentDirective=Q,e.KlesDynamicFieldDirective=he,e.KlesDynamicFormComponent=J,e.KlesFieldAbstract=X,e.KlesFormBadgeComponent=Ve,e.KlesFormButtonCheckerComponent=Me,e.KlesFormButtonComponent=be,e.KlesFormButtonFileComponent=Fe,e.KlesFormButtonToogleGroupComponent=fe,e.KlesFormCheckboxComponent=ie,e.KlesFormChipComponent=ae,e.KlesFormColorComponent=le,e.KlesFormDateComponent=ne,e.KlesFormErrorStateMatcher=ve,e.KlesFormGroupComponent=se,e.KlesFormIconComponent=pe,e.KlesFormInputClearableComponent=Oe,e.KlesFormInputComponent=Z,e.KlesFormLabelComponent=Y,e.KlesFormLineBreakComponent=ue,e.KlesFormLinkComponent=me,e.KlesFormListFieldComponent=re,e.KlesFormRadioComponent=oe,e.KlesFormSelectComponent=te,e.KlesFormSelectSearchComponent=ce,e.KlesFormSelectionListComponent=de,e.KlesFormSlideToggleComponent=Ae,e.KlesFormSubmitButtonComponent=ee,e.KlesFormTextComponent=Se,e.KlesFormTextareaComponent=xe,e.KlesMaterialDynamicformsModule=je,e.KlesTransformPipe=we,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=ye,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
15
|
+
***************************************************************************** */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)}function W(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 U(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 H(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])}}}var J=function(){function e(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(e.prototype,"value",{get:function(){return this.form.value},enumerable:!0,configurable:!0}),e.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()},e.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")},e.prototype.onSubmit=function(e){e.preventDefault(),e.stopPropagation(),this.form.valid?this.submit.emit(this.form.value):this.validateAllFormFields(this.form)},e.prototype.reset=function(){this.form.reset()},e.prototype.updateForm=function(){var e=this;Object.keys(this.form.controls).filter((function(t){return!e.fields.map((function(e){return e.name})).includes(t)})).forEach((function(t){e.form.removeControl(t)})),this.fields.filter((function(t){return!e.form.controls[t.name]})).forEach((function(t){if("lineBreak"!==t.type){var n=e.createControl(t);e.form.addControl(t.name,n)}}))},e.prototype.createControl=function(e){var t=this;if("listField"===e.type){var n=this.fb.array([]);return e.value.forEach((function(o){var i=t.fb.group({});e.collections.forEach((function(e){var n=t.createControl(e);i.addControl(e.name,n)})),n.push(i)})),n}if("group"===e.type){var o=this.fb.group({});return e.collections&&Array.isArray(e.collections)&&e.collections.forEach((function(e){var n=t.createControl(e);o.addControl(e.name,n)})),o}var i=this.fb.control(e.value,{validators:this.bindValidations(e.validations||[]),asyncValidators:this.bindAsyncValidations(e.asyncValidations||[]),updateOn:e.updateOn||"change"});return e.disabled&&i.disable(),i},e.prototype.createForm=function(){var e=this,t=this.fb.group({});return this.fields.forEach((function(n){if("lineBreak"!==n.type){var o=e.createControl(n);t.addControl(n.name,o)}})),t.setValidators(this.validators.map((function(e){return e.validator}))),t.setAsyncValidators(this.asyncValidators.map((function(e){return e.validator}))),t},e.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},e.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},e.prototype.validateAllFormFields=function(e){Object.keys(e.controls).forEach((function(t){e.get(t).markAsTouched({onlySelf:!0})}))},e.ctorParameters=function(){return[{type:o.FormBuilder}]},W([t.Input()],e.prototype,"fields",void 0),W([t.Input()],e.prototype,"validators",void 0),W([t.Input()],e.prototype,"asyncValidators",void 0),W([t.Output()],e.prototype,"submit",void 0),W([t.Output()],e.prototype,"_onLoaded",void 0),W([t.Input()],e.prototype,"direction",void 0),e=W([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; }"]})],e)}(),Q=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}]},W([t.Input()],e.prototype,"component",void 0),W([t.Input()],e.prototype,"value",void 0),W([t.Input()],e.prototype,"field",void 0),e=W([t.Directive({selector:"[klesComponent]"})],e)}(),X=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}(),Y=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=W([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)}(X),Z=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=W([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)}(X),ee=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=W([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)}(X),te=function(e){function n(){return e.call(this)||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.prototype.openChange=function(e){this.field.virtualScroll&&e&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},W([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=W([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)"\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)}(X),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=W([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)}(X),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=W([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)}(X),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=W([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)}(X),re=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=W([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)}(X),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.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=W([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)}(X),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=W([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)}(X),se=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=W([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">\n </ng-container>\n </div>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]})],n)}(X),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=W([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)}(X),ce=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}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())},W([t.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),W([t.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=W([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)"\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)}(X),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=W([t.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]})],n)}(X),me=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=W([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)}(X),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),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([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)}(X),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),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n=W([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)}(X),ge={label:Y,input:Z,button:ee,select:te,date:ne,radio:oe,checkbox:ie,listField:re,color:le,chip:ae,group:se,icon:pe,selectSearch:ce,lineBreak:ue,link:me,selectionList:de,buttonToogleGroup:fe},he=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){e.group&&(this.group=e.group.currentValue),e.field&&(e.field.previousValue&&e.field.currentValue.component!==e.field.previousValue.component?(this.field=e.field.currentValue,this.buildComponent()):this.field=e.field.currentValue)},e.prototype.buildComponent=function(){var e=this.resolver.resolveComponentFactory(this.field.component||ge[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}]},W([t.Input()],e.prototype,"field",void 0),W([t.Input()],e.prototype,"group",void 0),W([t.Input()],e.prototype,"siblingFields",void 0),e=W([t.Directive({selector:"[klesDynamicField]"})],e)}(),ve=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}(),ye=function(){function e(){}return e=W([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,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,L.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,y.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,v.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,I.MatTableModule,F.MatPaginatorModule,x.MatCardModule,S.MatMenuModule,w.MatTabsModule,O.CdkTableModule,T.MatProgressSpinnerModule,A.MatCheckboxModule,V.MatDialogModule,E.MatAutocompleteModule,P.MatProgressBarModule,B.MatSortModule,L.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,R.MatTreeModule,s.MatSliderModule,p.MatButtonModule,q.MatSlideToggleModule,$.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,G.MatButtonToggleModule],providers:[v.MatDatepickerModule,V.MatDialogModule]})],e)}(),Ce=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},W([t.Input()],e.prototype,"name",void 0),W([t.Input()],e.prototype,"label",void 0),W([t.Input()],e.prototype,"color",void 0),W([t.Input()],e.prototype,"icon",void 0),W([t.Input()],e.prototype,"iconSvg",void 0),W([t.Input()],e.prototype,"disabled",void 0),W([t.Input()],e.prototype,"classButton",void 0),W([t.Input()],e.prototype,"value",void 0),W([t.Input()],e.prototype,"tooltip",void 0),e=n=W([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)}(),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=W([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)}(X),ke=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=W([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)}(Ce),Me=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=W([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)}(X),Ie=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 U(this,void 0,void 0,(function(){var t,n,o,i,r;return H(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)}))},W([t.ViewChild("file")],n.prototype,"file",void 0),n=i=W([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)}(Ce),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=W([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)}(X),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=W([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)}(X),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=W([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)}(X),Oe=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return z(n,e),n=W([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)}(Z),we=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=W([t.Pipe({name:"klesTransform"})],e)}(),Te=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=W([t.Pipe({name:"arrayFormat"})],e)}(),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=W([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)}(X),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)},n=W([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)}(X),Ee=[J,Y,Z,Oe,ee,Ve,Ce,be,ke,Me,Ie,Fe,te,ne,oe,ie,re,le,xe,Se,ae,se,pe,ce,ue,me,Ae,de,fe],Pe=[he,Q],Be=[we,Te],Le=function(){function e(){}return e=W([t.NgModule({declarations:[Ee,Pe,Be],imports:[n.CommonModule,o.ReactiveFormsModule,D.TranslateModule,K.FlexLayoutModule,o.FormsModule,ye,$.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:ve},Be],entryComponents:[Ee],exports:[Ee,Be,Pe,$.ColorPickerModule],schemas:[t.CUSTOM_ELEMENTS_SCHEMA,t.NO_ERRORS_SCHEMA]})],e)}();e.ArrayFormatPipe=Te,e.KlesButtonCheckerComponent=ke,e.KlesButtonComponent=Ce,e.KlesButtonFileComponent=Ie,e.KlesComponentDirective=Q,e.KlesDynamicFieldDirective=he,e.KlesDynamicFormComponent=J,e.KlesFieldAbstract=X,e.KlesFormBadgeComponent=Ve,e.KlesFormButtonCheckerComponent=Me,e.KlesFormButtonComponent=be,e.KlesFormButtonFileComponent=Fe,e.KlesFormButtonToogleGroupComponent=fe,e.KlesFormCheckboxComponent=ie,e.KlesFormChipComponent=ae,e.KlesFormColorComponent=le,e.KlesFormDateComponent=ne,e.KlesFormErrorStateMatcher=ve,e.KlesFormGroupComponent=se,e.KlesFormIconComponent=pe,e.KlesFormInputClearableComponent=Oe,e.KlesFormInputComponent=Z,e.KlesFormLabelComponent=Y,e.KlesFormLineBreakComponent=ue,e.KlesFormLinkComponent=me,e.KlesFormListFieldComponent=re,e.KlesFormRadioComponent=oe,e.KlesFormSelectComponent=te,e.KlesFormSelectSearchComponent=ce,e.KlesFormSelectionListComponent=de,e.KlesFormSlideToggleComponent=Ae,e.KlesFormSubmitButtonComponent=ee,e.KlesFormTextComponent=Se,e.KlesFormTextareaComponent=xe,e.KlesMaterialDynamicformsModule=Le,e.KlesTransformPipe=we,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=ye,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
16
16
|
//# sourceMappingURL=3kles-kles-material-dynamicforms.umd.min.js.map
|