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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/3kles-kles-material-dynamicforms.metadata.json +1 -1
  2. package/bundles/3kles-kles-material-dynamicforms.umd.js +4 -4
  3. package/bundles/3kles-kles-material-dynamicforms.umd.js.map +1 -1
  4. package/bundles/3kles-kles-material-dynamicforms.umd.min.js +1 -1
  5. package/bundles/3kles-kles-material-dynamicforms.umd.min.js.map +1 -1
  6. package/esm2015/lib/fields/select.component.js +5 -5
  7. package/esm2015/lib/fields/select.search.component.js +7 -7
  8. package/esm5/lib/fields/select.component.js +2 -2
  9. package/esm5/lib/fields/select.search.component.js +4 -4
  10. package/fesm2015/3kles-kles-material-dynamicforms.js +10 -10
  11. package/fesm2015/3kles-kles-material-dynamicforms.js.map +1 -1
  12. package/fesm5/3kles-kles-material-dynamicforms.js +4 -4
  13. package/fesm5/3kles-kles-material-dynamicforms.js.map +1 -1
  14. package/package.json +1 -1
package/bundles/3kles-kles-material-dynamicforms.umd.min.js CHANGED
@@ -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,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">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *ngFor="let item of options$ | async" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf="field.virtualScroll">\n <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=5*48>\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n\n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n </mat-select>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),it=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-datepicker",template:'\n <mat-form-field class="demo-full-width margin-top" [formGroup]="group">\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate">\n <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n <mat-hint></mat-hint>\n \n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n '})],n)}(Z),rt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-radiobutton",template:'\n <div [formGroup]="group">\n <label class="radio-label-padding">{{field.label}}</label>\n <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name">\n <mat-radio-button *ngFor="let item of field.options" [value]="item">{{item}}</mat-radio-button>\n </mat-radio-group>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </div>\n'})],n)}(Z),lt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-checkbox",template:'\n <div [formGroup]="group" > \n <mat-checkbox matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [indeterminate]="field.indeterminate" [formControlName]="field.name">{{field.label | translate}}</mat-checkbox>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n'})],n)}(Z),at=function(t){function n(e){var n=t.call(this)||this;return n.fb=e,n}return W(n,t),n.prototype.ngOnInit=function(){this.formArray=this.group.controls[this.field.name],t.prototype.ngOnInit.call(this)},n.prototype.createFormGroup=function(){var t=this,e=this.fb.group({});return this.field.collections.forEach((function(n){var o=t.fb.control(null,t.bindValidations(n.validations||[]),t.bindAsyncValidations(n.asyncValidations||[]));e.addControl(n.name,o)})),e},n.prototype.deleteField=function(t){this.formArray.removeAt(t)},n.prototype.addField=function(){this.formArray.push(this.createFormGroup())},n.prototype.bindValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.compose(e)}return null},n.prototype.bindAsyncValidations=function(t){if(t.length>0){var e=[];return t.forEach((function(t){e.push(t.validator)})),o.Validators.composeAsync(e)}return null},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n.ctorParameters=function(){return[{type:o.FormBuilder}]},n=H([e.Component({selector:"kles-form-listfield",template:'\n <div [formGroup]="group" class="form-element">\n {{field.label | translate}}\n <button mat-icon-button color="primary" (click)="addField()">\n <mat-icon>add</mat-icon>\n </button>\n\n <div class="dynamic-form" [formGroupName]="field.name">\n <div *ngFor="let subGroup of formArray.controls let index = index;" fxLayout="row" fxLayoutGap="5px">\n <ng-container *ngFor="let subfield of field.collections;"\n dynamicField [field]="subfield" [group]="subGroup">\n </ng-container>\n <button mat-icon-button (click)="deleteField(index)" color="primary">\n <mat-icon>delete_outlined</mat-icon>\n </button>\n </div>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </div>\n </div>\n '})],n)}(Z),st=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.invertColor=function(t,e){if(0===t.indexOf("#")&&(t=t.slice(1)),3===t.length&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),6!==t.length)return"#000000";var n=parseInt(t.slice(0,2),16),o=parseInt(t.slice(2,4),16),i=parseInt(t.slice(4,6),16);return e?.299*n+.587*o+.114*i>186?"#000000":"#FFFFFF":"#"+(255-n).toString(16)+(255-o).toString(16)+(255-i).toString(16)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-color",template:'\n <mat-form-field [formGroup]="group" class="form-element">\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate"\n [colorPicker]="group.get(field.name).value"\n [value]="group.get(field.name).value"\n (colorPickerChange)="group.get(field.name).setValue($event)"\n class="colorPicker"\n [style.background]="group.get(field.name).value"\n [style.color]="invertColor(group.get(field.name).value,true)"\n [formControlName]="field.name">\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-chip",template:'\n <div [formGroup]="group"> \n <mat-chip-list>\n <mat-chip [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">\n <mat-icon *ngIf="field.icon">{{field.icon}}</mat-icon>\n {{group.controls[field.name].value | klesTransform:field.pipeTransform}}\n </mat-chip>\n </mat-chip-list>\n </div>\n'})],n)}(Z),ct=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){this.subGroup=this.group.controls[this.field.name],t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-group",template:'\n <div [formGroup]="group" class="group-container">\n <div [formGroupName]="field.name" class="group-container" [style.flex-direction]="field.direction || \'inherit\'" [ngClass]="field.ngClass" >\n <ng-container *ngFor="let subfield of field.collections;" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n </ng-container>\n </div>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]})],n)}(Z),ut=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-icon",template:'\n <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">\n {{group.controls[field.name].value}}\n </mat-icon>\n'})],n)}(Z),mt=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.searchControl=new o.FormControl,e.selectAllControl=new o.FormControl(!1),e.optionsFiltered$=new i.ReplaySubject(1),e.compareFn=function(t,n){return e.field.property&&t&&n?t[e.field.property]===n[e.field.property]:t===n},e}return W(n,t),n.prototype.ngOnInit=function(){var e=this;t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.searchControl.valueChanges.pipe(r.startWith(this.searchControl.value),r.takeUntil(this._onDestroy),r.switchMap((function(t){if(t){var n=t.toLowerCase();return e.options$.pipe(r.map((function(t){return t.filter((function(t){return e.field.searchKeys&&e.field.searchKeys.length?e.field.searchKeys.some((function(e){return!!t[e]&&t[e].toString().toLowerCase().indexOf(n)>-1}))||!!e.field.property&&t[e.field.property].toString().toLowerCase().indexOf(n)>-1:e.field.property?t[e.field.property].toString().toLowerCase().indexOf(n)>-1:t.toString().toLowerCase().indexOf(n)>-1}))})))}return e.options$}))).subscribe(this.optionsFiltered$),this.group.controls[this.field.name].valueChanges.pipe(r.takeUntil(this._onDestroy),r.startWith(this.group.controls[this.field.name].value),r.switchMap((function(t){return e.optionsFiltered$.pipe(r.map((function(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)).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">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n \n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n\n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n <ng-container *ngIf="!field.virtualScroll">\n \n <mat-option>\n <ngx-mat-select-search [formControl]="searchControl"\n placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n </mat-option>\n \n <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"\n (change)="toggleAllSelection($event)">\n {{\'selectAll\' | translate}}\n </mat-checkbox>\n\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n\n </mat-select>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]})],n)}(Z),dt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]})],n)}(Z),ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-link",template:'\n <a [href]="group.controls[field.name].value" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">\n {{field.label}}\n </a>\n'})],n)}(Z),gt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-selection-list",template:'\n <div class="margin-top" [formGroup]="group">\n <mat-selection-list [formControlName]="field.name" [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass">\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-list-option [value]="item" *ngFor="let item of options$ | async;">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-list-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-list-option *ngFor="let item of options$ | async;" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-list-option>\n </ng-container>\n </mat-selection-list>\n </div>\n',styles:["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]})],n)}(Z),ht=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-toogle-group",template:'\n <div [formGroup]="group" class="form-element">\n <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple"\n [attr.id]="field.id" [ngClass]="field.ngClass">\n <mat-button-toggle *ngFor="let item of options$ | async" [value]="item">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n'})],n)}(Z),yt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.formArray=this.group.controls[this.field.name]},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-array",template:'\n <div [formGroup]="group">\n <ng-container [formArrayName]="field.name">\n <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"\n [ngClass]="field.direction === \'column\' ? \'column\': \'row\'">\n <ng-container *ngFor="let subfield of field.collections;"\n klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n </ng-container>\n </div>\n </ng-container>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}",".row { gap:10px; flex-direction: row }",".column { flex-direction: column, gap:0px}"]})],n)}(Z),vt={label:tt,input:et,button:nt,select:ot,date:it,radio:rt,checkbox:lt,listField:at,array:yt,color:st,chip:pt,group:ct,icon:ut,selectSearch:mt,lineBreak:dt,link:ft,selectionList:gt,buttonToogleGroup:ht},Ct=function(){function t(t,e){this.resolver=t,this.container=e}return t.prototype.ngOnDestroy=function(){this.componentRef&&this.componentRef.destroy()},t.prototype.ngOnInit=function(){this.buildComponent()},t.prototype.ngOnChanges=function(t){t.group&&(this.group=t.group.currentValue),t.field&&(this.field=t.field.currentValue,this.buildComponent())},t.prototype.buildComponent=function(){var t=this.resolver.resolveComponentFactory(this.field.component||vt[this.field.type]);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(t),this.componentRef.instance.field=this.field,this.componentRef.instance.group=this.group,this.componentRef.instance.siblingFields=this.siblingFields},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},H([e.Input()],t.prototype,"field",void 0),H([e.Input()],t.prototype,"group",void 0),H([e.Input()],t.prototype,"siblingFields",void 0),t=H([e.Directive({selector:"[klesDynamicField]"})],t)}(),bt=function(){function t(){}return t.prototype.isErrorState=function(t,e){var n=e&&e.submitted;return!!(t&&t.invalid&&(t.dirty||t.touched||n))},t}(),kt=function(){function t(){}return t=H([e.NgModule({imports:[n.CommonModule,s.MatSliderModule,p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,h.MatFormFieldModule,v.MatInputModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,v.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,G.MatButtonToggleModule],providers:[y.MatDatepickerModule,D.MatDialogModule]})],t)}(),Mt=function(){function t(){this.name="",this.label="",this.color="accent",this.icon="",this.iconSvg="",this.disabled=!1,this.classButton="",this.value={},this.onChange=function(){},this.onTouched=function(){}}var n;return n=t,t.prototype.ngOnInit=function(){},t.prototype.click=function(t){this.value.event=this.name,this.onChange(this.value)},t.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},t.prototype.setDisabledState=function(t){this.disabled=t},H([e.Input()],t.prototype,"name",void 0),H([e.Input()],t.prototype,"label",void 0),H([e.Input()],t.prototype,"color",void 0),H([e.Input()],t.prototype,"icon",void 0),H([e.Input()],t.prototype,"iconSvg",void 0),H([e.Input()],t.prototype,"disabled",void 0),H([e.Input()],t.prototype,"classButton",void 0),H([e.Input()],t.prototype,"value",void 0),H([e.Input()],t.prototype,"tooltip",void 0),t=n=H([e.Component({selector:"kles-button",template:'\n <span>\n <button mat-button [ngClass]="classButton" [color]="(color)?color:\'primary\'" [disabled]="disabled"\n (click)="click($event)" [matTooltip]="tooltip">\n {{label | translate}}\n <mat-icon *ngIf="icon">{{icon}}</mat-icon>\n <mat-icon svgIcon="{{iconSvg}}" *ngIf="iconSvg"></mat-icon>\n </button>\n </span>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return n})),multi:!0}]})],t)}(),Ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button",template:'\n <div [formGroup]="group">\n <kles-button\n [attr.id]="field.id" [classButton]="field.ngClass" \n [name]="field.name" [label]="field.label" [color]="field.color" \n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name"\n [tooltip]="field.tooltip">\n </kles-button>\n </div>\n '})],n)}(Z),Ot=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.value={busy:!1,error:[],event:!1},e}var i;return W(n,t),i=n,n.prototype.countError=function(){return this.value.error?this.value.error.length:0},n=i=H([e.Component({selector:"kles-button-checker",template:'\n <span *ngIf="value.error && !value.busy">\n <kles-button \n [classButton]="classButton" \n [name]="name" [label]="label" [color]="color" \n [icon]="icon" [iconSvg]="iconSvg"\n [value]="value" \n [tooltip]="tooltip"\n [disabled]="disabled"\n matBadge="{{countError()}}" (click)="click($event)">\n </kles-button>\n </span>\n <span style="text-align: center;">\n <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">\n <mat-spinner [diameter]="25"></mat-spinner>\n </span>\n <span *ngIf="value.message" style="margin-right: 10px">\n {{value.message|translate}}\n </span>\n </span>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Mt),It=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-checker",template:'\n <div [formGroup]="group">\n <kles-button-checker\n [attr.id]="field.id" [classButton]="field.ngClass"\n [name]="field.name" [label]="field.label" [color]="field.color"\n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name"\n [tooltip]="field.tooltip">\n </kles-button-checker>\n </div>\n '})],n)}(Z),xt=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.accept="*.*",e.fileReader=new FileReader,e.value={},e}var i;return W(n,t),i=n,n.prototype.click=function(t){this.file.nativeElement.click()},n.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},n.prototype.onFileLoad=function(t){var e=t.target.result;this.fileContent=e},n.prototype.onFileSelect=function(t){return J(this,void 0,void 0,(function(){var e,n,o,i,r;return Q(this,(function(l){switch(l.label){case 0:if(!(t.files.length>0))return[3,8];if(e=t.files,n=[],!e||!e.length)return[3,7];o=0,l.label=1;case 1:if(!(o<e.length))return[3,6];l.label=2;case 2:return l.trys.push([2,4,,5]),i=n,r=o,[4,this.readUploadedFile(e[o])];case 3:return i[r]=l.sent(),[3,5];case 4:return l.sent(),[3,5];case 5:return o++,[3,1];case 6:1===n.length&&(n=n[0]),l.label=7;case 7:this.value.event=this.name,this.value.fileContent=n,this.onChange(this.value),t.value="",l.label=8;case 8:return[2]}}))}))},n.prototype.readUploadedFile=function(t){var e=new FileReader;return new Promise((function(n,o){e.onerror=function(){e.abort();var t=new DOMException("Problem parsing input file.");o(t)},e.onload=function(){n(e.result)},e.readAsArrayBuffer(t)}))},H([e.ViewChild("file")],n.prototype,"file",void 0),n=i=H([e.Component({selector:"kles-button-file",template:'\n <input type="file" #file style="display: none" accept="{{accept}}" (change)="onFileSelect($event.target)" multiple />\n <kles-button \n [classButton]="classButton" \n [name]="name" [label]="label" [color]="color" \n [icon]="icon" [iconSvg]="iconSvg"\n [disabled]="disabled"\n [value]="value" (click)="click($event)">\n </kles-button>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Mt),St=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-file",template:'\n <div [formGroup]="group">\n <kles-button-file\n [attr.id]="field.id" [classButton]="field.ngClass" \n [name]="field.name" [label]="field.label" [color]="field.color" \n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name">\n </kles-button-file>\n </div>\n '})],n)}(Z),wt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-textarea",template:'\n <mat-form-field [formGroup]="group" class="form-element">\n <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" \n [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"\n [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows" [maxlength]="field.maxLength">\n </textarea>\n\n\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),At=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-text",template:'\n <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">\n {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n </span> \n'})],n)}(Z),Tt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-input-clearable",template:'\n <mat-form-field [formGroup]="group" class="form-element">\n\n <ng-container *ngIf="field.autocomplete; else notAutoComplete">\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"\n [matAutocomplete]="auto">\n\n <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-option *ngFor="let option of filteredOption | async" [value]="option">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *ngFor="let option of filteredOption | async" [value]="option">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n </ng-template>\n <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"\n (click)="group.controls[field.name].reset();">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(et),Dt=function(){function t(){}return t.prototype.transform=function(t,e){return e&&e.length>0?e.reduce((function(t,e){return e.options?e.options.forEach((function(n){t=e.pipe.transform(t,n)})):t=e.pipe.transform(t),t}),t):t},t=H([e.Pipe({name:"klesTransform"})],t)}(),Vt=function(){function t(){}return t.prototype.transform=function(t,e){return t&&Array.isArray(t)?e?t.map((function(t){return t[e]})).filter(Boolean).join(", "):t.join(", "):""},t=H([e.Pipe({name:"arrayFormat"})],t)}(),Et=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-slide-toggle",template:'\n <div [formGroup]="group" >\n <mat-slide-toggle matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{field.label | translate}}</mat-slide-toggle>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n'})],n)}(Z),Pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-badge",template:'\n <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" \n matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" matBadgeColor="{{field.color}}">\n </span>\n'})],n)}(Z),Bt=[X,tt,et,Tt,nt,Pt,Mt,Ft,Ot,It,xt,St,ot,it,rt,lt,at,st,wt,At,pt,ct,ut,mt,dt,ft,Et,gt,ht,yt],jt=[Ct,Y],Lt=[Dt,Vt],Rt=function(){function t(){}return t=H([e.NgModule({declarations:[Bt,jt,Lt],imports:[n.CommonModule,o.ReactiveFormsModule,K.TranslateModule,$.FlexLayoutModule,o.FormsModule,kt,q.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:bt},Lt],entryComponents:[Bt],exports:[Bt,Lt,jt,q.ColorPickerModule],schemas:[e.CUSTOM_ELEMENTS_SCHEMA,e.NO_ERRORS_SCHEMA]})],t)}();t.ArrayFormatPipe=Vt,t.KlesButtonCheckerComponent=Ot,t.KlesButtonComponent=Mt,t.KlesButtonFileComponent=xt,t.KlesComponentDirective=Y,t.KlesDynamicFieldDirective=Ct,t.KlesDynamicFormComponent=X,t.KlesFieldAbstract=Z,t.KlesFormArrayComponent=yt,t.KlesFormBadgeComponent=Pt,t.KlesFormButtonCheckerComponent=It,t.KlesFormButtonComponent=Ft,t.KlesFormButtonFileComponent=St,t.KlesFormButtonToogleGroupComponent=ht,t.KlesFormCheckboxComponent=lt,t.KlesFormChipComponent=pt,t.KlesFormColorComponent=st,t.KlesFormDateComponent=it,t.KlesFormErrorStateMatcher=bt,t.KlesFormGroupComponent=ct,t.KlesFormIconComponent=ut,t.KlesFormInputClearableComponent=Tt,t.KlesFormInputComponent=et,t.KlesFormLabelComponent=tt,t.KlesFormLineBreakComponent=dt,t.KlesFormLinkComponent=ft,t.KlesFormListFieldComponent=at,t.KlesFormRadioComponent=rt,t.KlesFormSelectComponent=ot,t.KlesFormSelectSearchComponent=mt,t.KlesFormSelectionListComponent=gt,t.KlesFormSlideToggleComponent=Et,t.KlesFormSubmitButtonComponent=nt,t.KlesFormTextComponent=At,t.KlesFormTextareaComponent=wt,t.KlesMaterialDynamicformsModule=Rt,t.KlesTransformPipe=Dt,t.autocompleteObjectValidator=function(t){return function(e){return null!==e.value&&void 0!==e.value||t?"string"==typeof e.value?""===e.value&&t?null:{invalidAutocompleteObject:{value:e.value}}:null:{invalidAutocompleteObject:{value:e.value}}}},t.autocompleteStringValidator=function(t,e){return function(n){return""!==n.value&&null!==n.value||!e?-1!==t.indexOf(n.value)?null:{invalidAutocompleteString:{value:n.value}}:null}},t.ɵa=kt,Object.defineProperty(t,"__esModule",{value:!0})}));
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 <ng-container *ngFor="let subfield of field.collections;" klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n </ng-container>\n </div>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}"]})],n)}(Z),ut=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-icon",template:'\n <mat-icon [color]="field.color" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [ngStyle]="field.ngStyle">\n {{group.controls[field.name].value}}\n </mat-icon>\n'})],n)}(Z),mt=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.searchControl=new o.FormControl,e.selectAllControl=new o.FormControl(!1),e.optionsFiltered$=new i.ReplaySubject(1),e.compareFn=function(t,n){return e.field.property&&t&&n?t[e.field.property]===n[e.field.property]:t===n},e}return W(n,t),n.prototype.ngOnInit=function(){var e=this;t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options),this.searchControl.valueChanges.pipe(r.startWith(this.searchControl.value),r.takeUntil(this._onDestroy),r.switchMap((function(t){if(t){var n=t.toLowerCase();return e.options$.pipe(r.map((function(t){return t.filter((function(t){return e.field.searchKeys&&e.field.searchKeys.length?e.field.searchKeys.some((function(e){return!!t[e]&&t[e].toString().toLowerCase().indexOf(n)>-1}))||!!e.field.property&&t[e.field.property].toString().toLowerCase().indexOf(n)>-1:e.field.property?t[e.field.property].toString().toLowerCase().indexOf(n)>-1:t.toString().toLowerCase().indexOf(n)>-1}))})))}return e.options$}))).subscribe(this.optionsFiltered$),this.group.controls[this.field.name].valueChanges.pipe(r.takeUntil(this._onDestroy),r.startWith(this.group.controls[this.field.name].value),r.switchMap((function(t){return e.optionsFiltered$.pipe(r.map((function(t){return t.filter((function(t){return!(null==t?void 0:t.disabled)}))})),r.map((function(e){return!!t&&(e.length<t.length?e.length>0&&e.every((function(e){return t.includes(e)})):e.length>0&&e.length===t.length&&t.every((function(t){return e.includes(t)})))})))}))).subscribe((function(t){e.selectAllControl.setValue(t)}))},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n.prototype.toggleAllSelection=function(t){var e=this;t.checked?this.optionsFiltered$.pipe(r.take(1),r.map((function(t){return t.filter((function(t){return!(null==t?void 0:t.disabled)}))}))).subscribe((function(t){t.length>0&&e.group.controls[e.field.name].patchValue(t.slice())})):this.group.controls[this.field.name].patchValue([])},n.prototype.openChange=function(t){this.field.virtualScroll&&t&&(this.cdkVirtualScrollViewport.scrollToIndex(0),this.cdkVirtualScrollViewport.checkViewportSize())},H([e.ViewChild(l.CdkVirtualScrollViewport)],n.prototype,"cdkVirtualScrollViewport",void 0),H([e.ViewChildren(a.MatOption)],n.prototype,"options",void 0),n=H([e.Component({selector:"kles-form-select-search",template:'\n <mat-form-field class="margin-top" [formGroup]="group">\n <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"\n (openedChange)="openChange($event)" [compareWith]="compareFn"\n [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">\n <mat-select-trigger *ngIf="field.triggerComponent">\n <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>\n </mat-select-trigger>\n\n <ng-container *ngIf="field.virtualScroll">\n <mat-option>\n <ngx-mat-select-search [formControl]="searchControl"\n placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n </mat-option>\n \n <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]=4*48>\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"\n (change)="toggleAllSelection($event)">\n {{\'selectAll\' | translate}}\n </mat-checkbox>\n <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n \n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-option>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n\n <ng-container *ngIf="field.multiple">\n <mat-option *ngFor="let item of group.controls[field.name].value | slice:0:30" [value]="item"\n style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="!field.multiple && group.controls[field.name].value">\n <mat-option *ngFor="let item of [group?.controls[field.name]?.value]" [value]="item" style="display:none">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n\n </ng-container>\n\n <ng-container *ngIf="!field.virtualScroll">\n \n <mat-option>\n <ngx-mat-select-search [formControl]="searchControl"\n placeholderLabel="" noEntriesFoundLabel =""></ngx-mat-select-search>\n </mat-option>\n \n <mat-checkbox *ngIf="field.multiple" class="selectAll" [formControl]="selectAllControl"\n (change)="toggleAllSelection($event)">\n {{\'selectAll\' | translate}}\n </mat-checkbox>\n\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}</mat-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *ngFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-option>\n </ng-container>\n </ng-container>\n\n\n </mat-select>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n',styles:["mat-form-field {width: calc(100%)}",".selectAll {padding: 10px 16px;}"]})],n)}(Z),dt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-line-break",template:"",styles:[":host{\n flex-basis: 100%;\n display: flex;\n height:0;\n }"]})],n)}(Z),ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-link",template:'\n <a [href]="group.controls[field.name].value" matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">\n {{field.label}}\n </a>\n'})],n)}(Z),gt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-selection-list",template:'\n <div class="margin-top" [formGroup]="group">\n <mat-selection-list [formControlName]="field.name" [attr.id]="field.id" [multiple]="field.multiple" [ngClass]="field.ngClass">\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-list-option [value]="item" *ngFor="let item of options$ | async;">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-list-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-list-option *ngFor="let item of options$ | async;" [value]="item">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>\n </mat-list-option>\n </ng-container>\n </mat-selection-list>\n </div>\n',styles:["mat-selection-list {width: calc(100%);height: 250px; overflow:auto}"]})],n)}(Z),ht=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.field.options instanceof i.Observable?this.options$=this.field.options:this.options$=i.of(this.field.options)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-toogle-group",template:'\n <div [formGroup]="group" class="form-element">\n <mat-button-toggle-group [formControlName]="field.name" [multiple]="field.multiple"\n [attr.id]="field.id" [ngClass]="field.ngClass">\n <mat-button-toggle *ngFor="let item of options$ | async" [value]="item">\n {{(field.property ? item[field.property] : item) | klesTransform:field.pipeTransform}}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n'})],n)}(Z),yt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.formArray=this.group.controls[this.field.name]},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-array",template:'\n <div [formGroup]="group">\n <ng-container [formArrayName]="field.name">\n <div class="group-container" *ngFor="let subGroup of formArray.controls let index = index;"\n [ngClass]="field.direction === \'column\' ? \'column\': \'row\'">\n <ng-container *ngFor="let subfield of field.collections;"\n klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="field.collections">\n </ng-container>\n </div>\n </ng-container>\n </div>\n',styles:["mat-form-field {width: calc(100%)}",":host { display:flex; flex-direction: inherit}",".group-container {display:flex; flex-direction: inherit}",".row { gap:10px; flex-direction: row }",".column { flex-direction: column, gap:0px}"]})],n)}(Z),vt={label:tt,input:et,button:nt,select:ot,date:it,radio:rt,checkbox:lt,listField:at,array:yt,color:st,chip:pt,group:ct,icon:ut,selectSearch:mt,lineBreak:dt,link:ft,selectionList:gt,buttonToogleGroup:ht},Ct=function(){function t(t,e){this.resolver=t,this.container=e}return t.prototype.ngOnDestroy=function(){this.componentRef&&this.componentRef.destroy()},t.prototype.ngOnInit=function(){this.buildComponent()},t.prototype.ngOnChanges=function(t){t.group&&(this.group=t.group.currentValue),t.field&&(this.field=t.field.currentValue,this.buildComponent())},t.prototype.buildComponent=function(){var t=this.resolver.resolveComponentFactory(this.field.component||vt[this.field.type]);this.componentRef&&this.componentRef.destroy(),this.componentRef=this.container.createComponent(t),this.componentRef.instance.field=this.field,this.componentRef.instance.group=this.group,this.componentRef.instance.siblingFields=this.siblingFields},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ViewContainerRef}]},H([e.Input()],t.prototype,"field",void 0),H([e.Input()],t.prototype,"group",void 0),H([e.Input()],t.prototype,"siblingFields",void 0),t=H([e.Directive({selector:"[klesDynamicField]"})],t)}(),bt=function(){function t(){}return t.prototype.isErrorState=function(t,e){var n=e&&e.submitted;return!!(t&&t.invalid&&(t.dirty||t.touched||n))},t}(),kt=function(){function t(){}return t=H([e.NgModule({imports:[n.CommonModule,s.MatSliderModule,p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,h.MatFormFieldModule,v.MatInputModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,G.MatButtonToggleModule],exports:[p.MatButtonModule,c.MatToolbarModule,u.MatIconModule,m.MatSidenavModule,d.MatBadgeModule,f.MatListModule,g.MatGridListModule,v.MatInputModule,h.MatFormFieldModule,C.MatSelectModule,b.MatRadioModule,y.MatDatepickerModule,k.MatChipsModule,M.MatTooltipModule,F.MatTableModule,O.MatPaginatorModule,I.MatCardModule,x.MatMenuModule,w.MatTabsModule,S.CdkTableModule,A.MatProgressSpinnerModule,T.MatCheckboxModule,D.MatDialogModule,V.MatAutocompleteModule,E.MatProgressBarModule,P.MatSortModule,B.MatExpansionModule,a.MatNativeDateModule,j.MatSnackBarModule,L.MatTreeModule,s.MatSliderModule,p.MatButtonModule,R.MatSlideToggleModule,q.ColorPickerModule,l.ScrollingModule,l.CdkScrollable,G.MatButtonToggleModule],providers:[y.MatDatepickerModule,D.MatDialogModule]})],t)}(),Mt=function(){function t(){this.name="",this.label="",this.color="accent",this.icon="",this.iconSvg="",this.disabled=!1,this.classButton="",this.value={},this.onChange=function(){},this.onTouched=function(){}}var n;return n=t,t.prototype.ngOnInit=function(){},t.prototype.click=function(t){this.value.event=this.name,this.onChange(this.value)},t.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},t.prototype.setDisabledState=function(t){this.disabled=t},H([e.Input()],t.prototype,"name",void 0),H([e.Input()],t.prototype,"label",void 0),H([e.Input()],t.prototype,"color",void 0),H([e.Input()],t.prototype,"icon",void 0),H([e.Input()],t.prototype,"iconSvg",void 0),H([e.Input()],t.prototype,"disabled",void 0),H([e.Input()],t.prototype,"classButton",void 0),H([e.Input()],t.prototype,"value",void 0),H([e.Input()],t.prototype,"tooltip",void 0),t=n=H([e.Component({selector:"kles-button",template:'\n <span>\n <button mat-button [ngClass]="classButton" [color]="(color)?color:\'primary\'" [disabled]="disabled"\n (click)="click($event)" [matTooltip]="tooltip">\n {{label | translate}}\n <mat-icon *ngIf="icon">{{icon}}</mat-icon>\n <mat-icon svgIcon="{{iconSvg}}" *ngIf="iconSvg"></mat-icon>\n </button>\n </span>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return n})),multi:!0}]})],t)}(),Ft=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button",template:'\n <div [formGroup]="group">\n <kles-button\n [attr.id]="field.id" [classButton]="field.ngClass" \n [name]="field.name" [label]="field.label" [color]="field.color" \n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name"\n [tooltip]="field.tooltip">\n </kles-button>\n </div>\n '})],n)}(Z),Ot=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.value={busy:!1,error:[],event:!1},e}var i;return W(n,t),i=n,n.prototype.countError=function(){return this.value.error?this.value.error.length:0},n=i=H([e.Component({selector:"kles-button-checker",template:'\n <span *ngIf="value.error && !value.busy">\n <kles-button \n [classButton]="classButton" \n [name]="name" [label]="label" [color]="color" \n [icon]="icon" [iconSvg]="iconSvg"\n [value]="value" \n [tooltip]="tooltip"\n [disabled]="disabled"\n matBadge="{{countError()}}" (click)="click($event)">\n </kles-button>\n </span>\n <span style="text-align: center;">\n <span style="text-align: center;margin-right: 10px" *ngIf="value.busy||false">\n <mat-spinner [diameter]="25"></mat-spinner>\n </span>\n <span *ngIf="value.message" style="margin-right: 10px">\n {{value.message|translate}}\n </span>\n </span>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Mt),It=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-checker",template:'\n <div [formGroup]="group">\n <kles-button-checker\n [attr.id]="field.id" [classButton]="field.ngClass"\n [name]="field.name" [label]="field.label" [color]="field.color"\n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name"\n [tooltip]="field.tooltip">\n </kles-button-checker>\n </div>\n '})],n)}(Z),xt=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.accept="*.*",e.fileReader=new FileReader,e.value={},e}var i;return W(n,t),i=n,n.prototype.click=function(t){this.file.nativeElement.click()},n.prototype.writeValue=function(t){if(t||(t={event:this.name}),t.event||(t.event=this.name),t.uiButton){var e=t.uiButton;this.label=e.label?e.label:this.label,this.color=e.color?e.color:this.color,this.icon=e.icon?e.icon:this.icon,this.iconSvg=e.iconSvg?e.iconSvg:this.iconSvg,this.disabled=e.disabled?e.disabled:this.disabled,this.classButton=e.class?e.class:this.classButton}this.value=t},n.prototype.onFileLoad=function(t){var e=t.target.result;this.fileContent=e},n.prototype.onFileSelect=function(t){return J(this,void 0,void 0,(function(){var e,n,o,i,r;return Q(this,(function(l){switch(l.label){case 0:if(!(t.files.length>0))return[3,8];if(e=t.files,n=[],!e||!e.length)return[3,7];o=0,l.label=1;case 1:if(!(o<e.length))return[3,6];l.label=2;case 2:return l.trys.push([2,4,,5]),i=n,r=o,[4,this.readUploadedFile(e[o])];case 3:return i[r]=l.sent(),[3,5];case 4:return l.sent(),[3,5];case 5:return o++,[3,1];case 6:1===n.length&&(n=n[0]),l.label=7;case 7:this.value.event=this.name,this.value.fileContent=n,this.onChange(this.value),t.value="",l.label=8;case 8:return[2]}}))}))},n.prototype.readUploadedFile=function(t){var e=new FileReader;return new Promise((function(n,o){e.onerror=function(){e.abort();var t=new DOMException("Problem parsing input file.");o(t)},e.onload=function(){n(e.result)},e.readAsArrayBuffer(t)}))},H([e.ViewChild("file")],n.prototype,"file",void 0),n=i=H([e.Component({selector:"kles-button-file",template:'\n <input type="file" #file style="display: none" accept="{{accept}}" (change)="onFileSelect($event.target)" multiple />\n <kles-button \n [classButton]="classButton" \n [name]="name" [label]="label" [color]="color" \n [icon]="icon" [iconSvg]="iconSvg"\n [disabled]="disabled"\n [value]="value" (click)="click($event)">\n </kles-button>\n ',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}]})],n)}(Mt),St=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-button-file",template:'\n <div [formGroup]="group">\n <kles-button-file\n [attr.id]="field.id" [classButton]="field.ngClass" \n [name]="field.name" [label]="field.label" [color]="field.color" \n [icon]="field.icon"\n [iconSvg]="field.iconSvg"\n [value]="field.value"\n [formControlName]="field.name">\n </kles-button-file>\n </div>\n '})],n)}(Z),wt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-textarea",template:'\n <mat-form-field [formGroup]="group" class="form-element">\n <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" \n [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"\n [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows" [maxlength]="field.maxLength">\n </textarea>\n\n\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(Z),At=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-text",template:'\n <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass">\n {{(field.property ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform:field.pipeTransform}}\n </span> \n'})],n)}(Z),Tt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-input-clearable",template:'\n <mat-form-field [formGroup]="group" class="form-element">\n\n <ng-container *ngIf="field.autocomplete; else notAutoComplete">\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"\n [matAutocomplete]="auto">\n\n <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">\n <ng-container *ngIf="!field.autocompleteComponent">\n <mat-option *ngFor="let option of filteredOption | async" [value]="option">\n {{field.property ? option[field.property] : option}}\n </mat-option>\n </ng-container>\n\n <ng-container *ngIf="field.autocompleteComponent">\n <mat-option *ngFor="let option of filteredOption | async" [value]="option">\n <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">\n </ng-container>\n </mat-option>\n </ng-container>\n </mat-autocomplete>\n </ng-container>\n\n <ng-template #notAutoComplete>\n <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"\n [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">\n </ng-template>\n <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"\n (click)="group.controls[field.name].reset();">\n <mat-icon>close</mat-icon>\n </button>\n\n <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>\n\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>\n </ng-container>\n </mat-form-field>\n ',styles:["mat-form-field {width: calc(100%)}"]})],n)}(et),Dt=function(){function t(){}return t.prototype.transform=function(t,e){return e&&e.length>0?e.reduce((function(t,e){return e.options?e.options.forEach((function(n){t=e.pipe.transform(t,n)})):t=e.pipe.transform(t),t}),t):t},t=H([e.Pipe({name:"klesTransform"})],t)}(),Vt=function(){function t(){}return t.prototype.transform=function(t,e){return t&&Array.isArray(t)?e?t.map((function(t){return t[e]})).filter(Boolean).join(", "):t.join(", "):""},t=H([e.Pipe({name:"arrayFormat"})],t)}(),Et=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-slide-toggle",template:'\n <div [formGroup]="group" >\n <mat-slide-toggle matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [color]="field.color" [formControlName]="field.name">{{field.label | translate}}</mat-slide-toggle>\n <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">\n <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message}}</mat-error>\n </ng-container>\n </div>\n'})],n)}(Z),Pt=function(t){function n(){return null!==t&&t.apply(this,arguments)||this}return W(n,t),n.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this)},n.prototype.ngOnDestroy=function(){t.prototype.ngOnDestroy.call(this)},n=H([e.Component({selector:"kles-form-badge",template:'\n <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" \n matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" matBadgeColor="{{field.color}}">\n </span>\n'})],n)}(Z),Bt=[X,tt,et,Tt,nt,Pt,Mt,Ft,Ot,It,xt,St,ot,it,rt,lt,at,st,wt,At,pt,ct,ut,mt,dt,ft,Et,gt,ht,yt],jt=[Ct,Y],Lt=[Dt,Vt],Rt=function(){function t(){}return t=H([e.NgModule({declarations:[Bt,jt,Lt],imports:[n.CommonModule,o.ReactiveFormsModule,K.TranslateModule,$.FlexLayoutModule,o.FormsModule,kt,q.ColorPickerModule,N.NgxMatSelectSearchModule],providers:[{provide:a.ErrorStateMatcher,useClass:bt},Lt],entryComponents:[Bt],exports:[Bt,Lt,jt,q.ColorPickerModule],schemas:[e.CUSTOM_ELEMENTS_SCHEMA,e.NO_ERRORS_SCHEMA]})],t)}();t.ArrayFormatPipe=Vt,t.KlesButtonCheckerComponent=Ot,t.KlesButtonComponent=Mt,t.KlesButtonFileComponent=xt,t.KlesComponentDirective=Y,t.KlesDynamicFieldDirective=Ct,t.KlesDynamicFormComponent=X,t.KlesFieldAbstract=Z,t.KlesFormArrayComponent=yt,t.KlesFormBadgeComponent=Pt,t.KlesFormButtonCheckerComponent=It,t.KlesFormButtonComponent=Ft,t.KlesFormButtonFileComponent=St,t.KlesFormButtonToogleGroupComponent=ht,t.KlesFormCheckboxComponent=lt,t.KlesFormChipComponent=pt,t.KlesFormColorComponent=st,t.KlesFormDateComponent=it,t.KlesFormErrorStateMatcher=bt,t.KlesFormGroupComponent=ct,t.KlesFormIconComponent=ut,t.KlesFormInputClearableComponent=Tt,t.KlesFormInputComponent=et,t.KlesFormLabelComponent=tt,t.KlesFormLineBreakComponent=dt,t.KlesFormLinkComponent=ft,t.KlesFormListFieldComponent=at,t.KlesFormRadioComponent=rt,t.KlesFormSelectComponent=ot,t.KlesFormSelectSearchComponent=mt,t.KlesFormSelectionListComponent=gt,t.KlesFormSlideToggleComponent=Et,t.KlesFormSubmitButtonComponent=nt,t.KlesFormTextComponent=At,t.KlesFormTextareaComponent=wt,t.KlesMaterialDynamicformsModule=Rt,t.KlesTransformPipe=Dt,t.autocompleteObjectValidator=function(t){return function(e){return null!==e.value&&void 0!==e.value||t?"string"==typeof e.value?""===e.value&&t?null:{invalidAutocompleteObject:{value:e.value}}:null:{invalidAutocompleteObject:{value:e.value}}}},t.autocompleteStringValidator=function(t,e){return function(n){return""!==n.value&&null!==n.value||!e?-1!==t.indexOf(n.value)?null:{invalidAutocompleteString:{value:n.value}}:null}},t.ɵa=kt,Object.defineProperty(t,"__esModule",{value:!0})}));
16
16
  //# sourceMappingURL=3kles-kles-material-dynamicforms.umd.min.js.map