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