ngx-mat-dynamic-form-builder
Version:
Build dynamic forms in Angular Material using Reactive forms.
17 lines (15 loc) • 31.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("lodash"),require("@angular/cdk/keycodes"),require("@angular/material/core"),require("@angular/common"),require("@angular/flex-layout"),require("@angular/material/chips"),require("@angular/material/form-field"),require("@angular/material/autocomplete"),require("@angular/material/progress-spinner"),require("@angular/material/datepicker"),require("@angular/material/input"),require("@angular/material/icon"),require("@angular/material/select"),require("@angular/material/checkbox"),require("@angular/material/button"),require("@angular/material/badge")):"function"==typeof define&&define.amd?define("ngx-mat-dynamic-form-builder",["exports","@angular/core","@angular/forms","rxjs/operators","lodash","@angular/cdk/keycodes","@angular/material/core","@angular/common","@angular/flex-layout","@angular/material/chips","@angular/material/form-field","@angular/material/autocomplete","@angular/material/progress-spinner","@angular/material/datepicker","@angular/material/input","@angular/material/icon","@angular/material/select","@angular/material/checkbox","@angular/material/button","@angular/material/badge"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-mat-dynamic-form-builder"]={},t.ng.core,t.ng.forms,t.rxjs.operators,t.lodash,t.ng.cdk.keycodes,t.ng.material.core,t.ng.common,t.ng.flexLayout,t.ng.material.chips,t.ng.material.formField,t.ng.material.autocomplete,t.ng.material.progressSpinner,t.ng.material.datepicker,t.ng.material.input,t.ng.material.icon,t.ng.material.select,t.ng.material.checkbox,t.ng.material.button,t.ng.material.badge)}(this,(function(t,e,n,o,r,i,a,l,s,u,p,c,m,d,f,h,y,g,v,b){"use strict";var x=function(){};x.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new x},token:x,providedIn:"root"}),x.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],x.ctorParameters=function(){return[]};var q=function(){function t(){}return t.prototype.ngOnInit=function(){},t}();q.decorators=[{type:e.Component,args:[{selector:"ngx-mat-dynamic-form-builder",template:"\n <p>\n ngx-mat-dynamic-form-builder works!\n </p>\n "}]}],q.ctorParameters=function(){return[]};var C=function(){function t(){this.options=[],this.hint="",this.appearance="standard",this.disabled=!1,this.autoClear=!1,this.output=new e.EventEmitter}return t.prototype.ngOnInit=function(){this.setupValidators()},t.prototype.ngOnChanges=function(t){var e=this;t.options&&this.options&&(this.stateCtrl||this.setupValidators(),this.filteredOptions=this.stateCtrl.valueChanges.pipe(o.startWith(""),o.map((function(t){return t?e._filterOptions(t):e.options.slice()}))),this.defaultOption&&this.defaultOptionKey&&this.stateCtrl.setValue(this.options.find((function(t){return t[e.defaultOptionKey]===e.defaultOption}))))},t.prototype.setupValidators=function(){if(!this.stateCtrl)if(this.validators){var t=!1;this.validators.forEach((function(e){"required"===e.name&&(t=!0)})),this.stateCtrl=t?new n.FormControl(null,[n.Validators.required,this.valueSelected()]):new n.FormControl(null,[this.valueSelected()])}else this.stateCtrl=new n.FormControl(null,[this.valueSelected()])},t.prototype.displayFn=function(t){if(t)return t[this.displayKey]},t.prototype.setValue=function(t){this.output.emit(t.option.value),this.autoClear&&this.stateCtrl.reset()},t.prototype.clearValue=function(){this.output.emit(void 0),this.stateCtrl.reset()},t.prototype._filterOptions=function(t){var e=this;if(r.isString(t)&&t.length>=1){var n=t.toLowerCase();return this.options.filter((function(t){return t[e.filterKey?e.filterKey:e.displayKey].toLowerCase().includes(n)}))}return this.options},t.prototype.valueSelected=function(){return function(t){return t.value&&"object"!=typeof t.value?{match:!0}:null}},t}();C.decorators=[{type:e.Component,args:[{selector:"ngx-mat-auto-complete",template:'<mat-form-field [appearance]="appearance" fxFlex>\r\n <mat-label>{{label}}</mat-label>\r\n <input matInput [placeholder]="placeholder" [readonly]="disabled" aria-label="AutoComplete" [matAutocomplete]="auto"\r\n [formControl]="stateCtrl">\r\n <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="setValue($event)"\r\n [displayWith]="displayFn.bind(this)">\r\n <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\r\n <span>{{option[displayKey]}}</span>\r\n </mat-option>\r\n </mat-autocomplete>\r\n <button mat-button *ngIf="stateCtrl.value && !disabled" matSuffix mat-icon-button aria-label="Clear"\r\n (click)="clearValue()">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <mat-hint>{{hint}}</mat-hint>\r\n <mat-error *ngIf="!stateCtrl.valid && stateCtrl.touched">Select valid option</mat-error>\r\n</mat-form-field>',styles:[""]}]}],C.ctorParameters=function(){return[]},C.propDecorators={options:[{type:e.Input}],defaultOption:[{type:e.Input}],defaultOptionKey:[{type:e.Input}],label:[{type:e.Input}],placeholder:[{type:e.Input}],displayKey:[{type:e.Input}],filterKey:[{type:e.Input}],hint:[{type:e.Input}],appearance:[{type:e.Input}],disabled:[{type:e.Input}],autoClear:[{type:e.Input}],validators:[{type:e.Input}],output:[{type:e.Output}]};var I=function(){function t(){this.options=[],this.hint="",this.appearance="standard",this.disabled=!1,this.customChip=!1,this.output=new e.EventEmitter,this.visible=!0,this.selectable=!0,this.separatorKeysCodes=[i.ENTER,i.COMMA],this.selectedObjects=[]}return t.prototype.ngOnInit=function(){this.setupValidators()},t.prototype.ngOnChanges=function(t){var e=this;t.options&&this.options&&(this.formControl||this.setupValidators(),this.filteredObjects=this.formControl.valueChanges.pipe(o.startWith([]),o.map((function(t){return t?e._filter(t):e.options.slice()}))),this.defaultOptions&&this.defaultOptionsKey&&this.addDefaultSelected(this.defaultOptions))},t.prototype.setupValidators=function(){if(!this.formControl)if(this.validators){var t=!1;this.validators.forEach((function(e){"required"===e.name&&(t=!0)})),this.formControl=t?new n.FormControl(this.selectedObjects,[n.Validators.required,this.valueSelected()]):new n.FormControl(this.selectedObjects,[this.valueSelected()])}else this.customChip?this.formControl=new n.FormControl:this.formControl=new n.FormControl(this.selectedObjects,[this.valueSelected()])},t.prototype.add=function(t){var e;if(!this.matAutocomplete.isOpen){var n=t.input,o=t.value;this.customChip&&(o||"").trim()&&(this.selectedObjects.push(((e={})[this.displayKey]=o.trim(),e)),this.output.emit(this.selectedObjects)),n&&(n.value="")}this.formControl.setValue(this.selectedObjects),this.formControl.updateValueAndValidity()},t.prototype.remove=function(t){this.updateFilteredObjects();var e=this.selectedObjects.indexOf(t);e>=0&&(this.selectedObjects.splice(e,1),this.output.emit(this.selectedObjects)),this.formControl.updateValueAndValidity()},t.prototype.updateFilteredObjects=function(){var t=this;this.filteredObjects=this.filteredObjects.pipe(o.map((function(e){return e.filter((function(e){return!t.selectedObjects.includes(e)}))})))},t.prototype.selected=function(t){this.selectedObjects.push(t.option.value),this.output.emit(this.selectedObjects),this.updateFilteredObjects(),this.formInput.nativeElement.value="",this.formInput.nativeElement.blur(),this.formControl.setValue(this.selectedObjects)},t.prototype.addDefaultSelected=function(t){var e=this;Array.isArray(t)?(this.selectedObjects=this.options.filter((function(n){return t.some((function(t){return t===n[e.defaultOptionsKey]}))})),this.output.emit(this.selectedObjects),this.updateFilteredObjects(),this.formControl.setValue(this.selectedObjects)):console.error("Default values not an array")},t.prototype._filter=function(t){var e=this;if(r.isString(t)&&t.length>=1){var n=t.toLowerCase();return this.options.filter((function(t){return t[e.filterKey?e.filterKey:e.displayKey].toLowerCase().includes(n)}))}return this.options},t.prototype.valueSelected=function(){return function(t){return t.value&&"object"!=typeof t.value?{match:!0}:null}},t}();I.decorators=[{type:e.Component,args:[{selector:"ngx-mat-chip-selector",template:'<mat-form-field [appearance]="appearance" fxFlex>\r\n <mat-label>{{label}}</mat-label>\r\n <mat-chip-list #chipList>\r\n <mat-chip *ngFor="let obj of selectedObjects" [selectable]="selectable" [removable]="!disabled"\r\n (removed)="remove(obj)">\r\n {{obj[displayKey]}}\r\n <mat-icon matChipRemove *ngIf="!disabled">cancel</mat-icon>\r\n </mat-chip>\r\n <input [placeholder]="placeholder" [readonly]="disabled" #formInput [matAutocomplete]="auto"\r\n [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"\r\n (matChipInputTokenEnd)="add($event)" [formControl]="formControl">\r\n <mat-error *ngIf="!formControl.valid && formControl.touched">Select valid option</mat-error>\r\n </mat-chip-list>\r\n <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">\r\n <mat-option *ngFor="let obj of filteredObjects | async" [value]="obj">\r\n {{obj[displayKey]}}\r\n </mat-option>\r\n </mat-autocomplete>\r\n <mat-hint>{{hint}} </mat-hint>\r\n</mat-form-field>',styles:[""]}]}],I.propDecorators={options:[{type:e.Input}],defaultOptions:[{type:e.Input}],defaultOptionsKey:[{type:e.Input}],label:[{type:e.Input}],placeholder:[{type:e.Input}],displayKey:[{type:e.Input}],filterKey:[{type:e.Input}],hint:[{type:e.Input}],appearance:[{type:e.Input}],disabled:[{type:e.Input}],customChip:[{type:e.Input}],validators:[{type:e.Input}],output:[{type:e.Output}],formInput:[{type:e.ViewChild,args:["formInput"]}],matAutocomplete:[{type:e.ViewChild,args:["auto"]}]};var F=function(){function t(){}return t.prototype.toFormGroup=function(t){var e={};return t.some((function(t){"spacer"!==t.controlType&&(e[t.key]=t.validators?new n.FormControl({value:void 0!==t.value||null!==t.value?t.value:void 0,disabled:t.disabled},t.validators):new n.FormControl({value:void 0!==t.value||null!==t.value?t.value:void 0,disabled:t.disabled}))})),new n.FormGroup(e)},t}();F.decorators=[{type:e.Injectable}],F.ctorParameters=function(){return[]};var O=function(){function t(t){this.qcs=t,this.questions=[],this.emitOnlyOnChange=!1,this.formResult=new e.EventEmitter}return t.prototype.ngOnInit=function(){var t=this;this.questions&&0!==this.questions.length?(this.form=this.qcs.toFormGroup(this.questions),!this.emitOnlyOnChange&&this.form.valid&&this.emitForm(),this._buttonText=this.buttonText||"Save",this.prepareConditionalControls(),this.prepareFilteredOptions(),this.form.statusChanges.subscribe((function(e){"VALID"===e?t.emitForm():t.formResult.emit(null)}))):console.error("Questions are null or empty.")},t.prototype.emitForm=function(){var t=this.form.getRawValue();this.questions.forEach((function(e){e.type&&"number"===e.type&&t[e.key]&&(t[e.key]=Number(t[e.key]))})),this.formResult.emit(t)},t.prototype.prepareConditionalControls=function(){var t=this;this.changeSubscriptions=[],this.questions.forEach((function(e){if(e.conditional){var n=t.form.controls[e.conditional.controlKey];t.changeSubscriptions.push(n.valueChanges.subscribe((function(t){Array.isArray(t)?t.includes(e.conditional.value)?e.show=!0:e.show=!1:e.conditional.value===t?e.show=!0:e.show=!1}))),Array.isArray(n.value)?n.value.includes(e.conditional.value)?e.show=!0:e.show=!1:n.value&&n.value===e.conditional.value&&(e.show=!0)}}))},t.prototype.prepareFilteredOptions=function(){var t=this;this.filterSubscriptions=[],this.questions.forEach((function(e){if(e.selectionFilter){var n=t.form.controls[e.selectionFilter.controlKey];t.filterSubscriptions.push(n.valueChanges.subscribe((function(t){e.selectionFilter.options$(t).subscribe((function(t){e.options$.next(t)}))}))),n.value&&e.selectionFilter.options$(n.value).subscribe((function(t){e.options$.next(t)}))}}))},t.prototype.ngOnDestroy=function(){this.changeSubscriptions&&this.changeSubscriptions.forEach((function(t){t.unsubscribe})),this.filterSubscriptions&&this.filterSubscriptions.forEach((function(t){t.unsubscribe}))},t}();O.decorators=[{type:e.Component,args:[{selector:"ngx-mat-dynamic-form",template:'<form [formGroup]="form" fxLayout="column">\n <div fxLayout="row wrap" fxLayoutAlign="start center">\n <div *ngFor="let question of questions; let i = index" [fxFlex.xs]="question.xsFlex"\n [fxFlex.gt-xs]="question.flex">\n <ngx-mat-dynamic-form-question *ngIf="question.show" [question]="question" [form]="form">\n </ngx-mat-dynamic-form-question>\n </div>\n <ng-content></ng-content>\n </div>\n</form>',providers:[F],styles:[""]}]}],O.ctorParameters=function(){return[{type:F}]},O.propDecorators={questions:[{type:e.Input}],buttonText:[{type:e.Input}],emitOnlyOnChange:[{type:e.Input}],formResult:[{type:e.Output}]};var k=function(){function t(t){this.adapter=t,this.loading=!1,this.adapter.setLocale("en-GB")}return Object.defineProperty(t.prototype,"isValid",{get:function(){return this.form.controls[this.question.key].valid},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){var t=this;this.question.selectionFilter?console.log("TODO: Do some loading here..."):this.question.options$&&(this.loading=!0,this.question.options$=this.question.options$.pipe(o.tap((function(e){return setTimeout((function(){t.loading=!1}))}))))},t.prototype.setMutlipleValues=function(t){var e=this;this.question.customChip?this.form.controls[this.question.key].setValue(t):this.form.controls[this.question.key].setValue(this.question.emitObject?t:t.map((function(t){return t[e.question.selection.key]})))},t.prototype.setSingleValue=function(t){t?this.form.controls[this.question.key].setValue(this.question.emitObject?t:t[this.question.selection.key]):this.form.controls[this.question.key].setValue(void 0)},t.prototype.dateTimeChange=function(t){this.question.hourControl.value&&t.value.setHours(this.question.hourControl.value),this.question.minuteControl.value&&t.value.setMinutes(this.question.minuteControl.value),this.form.controls[this.question.key].setValue(t.value)},t.prototype.dateChange=function(t){this.form.controls[this.question.key].setValue(t.value)},t.prototype.setFile=function(t){this.form.controls[this.question.key].setValue(t)},t}();k.decorators=[{type:e.Component,args:[{selector:"ngx-mat-dynamic-form-question",template:'<div [formGroup]="form" fxFlex style="margin: 5px;" fxLayout="row" fxLayoutAlign="center center">\r\n\r\n <ng-container [ngSwitch]="question.controlType">\r\n\r\n <span *ngSwitchCase="\'spacer\'" fxFlex></span>\r\n\r\n <mat-form-field [appearance]="question.appearance" *ngSwitchCase="\'textbox\'" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <span *ngIf="question.prefix" matPrefix>{{question.prefix}} </span>\r\n <mat-icon *ngIf="question.prefixIcon" matPrefix>{{question.prefixIcon}}</mat-icon>\r\n <input matInput [placeholder]="question.placeholder" [formControlName]="question.key" [type]="question.type">\r\n <mat-hint *ngIf="question.hint">{{question.hint}}</mat-hint>\r\n <mat-icon *ngIf="question.suffixIcon" matSuffix>{{question.suffixIcon}}</mat-icon>\r\n <span *ngIf="question.suffix" matSuffix> {{question.suffix}}</span>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-form-field [appearance]="question.appearance" *ngSwitchCase="\'textarea\'" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <span *ngIf="question.prefix" matPrefix>{{question.prefix}} </span>\r\n <mat-icon *ngIf="question.prefixIcon" matPrefix>{{question.prefixIcon}}</mat-icon>\r\n <textarea matInput [placeholder]="question.placeholder" [formControlName]="question.key" [type]="question.type"\r\n [cdkAutosizeMinRows]="question.minRows" [cdkAutosizeMaxRows]="question.maxRows"\r\n [cdkTextareaAutosize]="question.autoSize"></textarea>\r\n <mat-hint *ngIf="question.hint">{{question.hint}}</mat-hint>\r\n <mat-icon *ngIf="question.suffixIcon" matSuffix>{{question.suffixIcon}}</mat-icon>\r\n <span *ngIf="question.suffix" matSuffix> {{question.suffix}}</span>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-form-field [appearance]="question.appearance" *ngSwitchCase="\'dropdown\'" fxFlex>\r\n <mat-label>{{question.label}}</mat-label>\r\n <mat-select [formControlName]="question.key">\r\n <ng-container *ngIf="question.options$">\r\n <mat-option *ngIf="question.defaultValue">None</mat-option>\r\n <mat-option *ngFor="let opt of question.options$ | async" [value]="opt[question.selection.key]">\r\n {{opt[question.selection.value]}}\r\n </mat-option>\r\n </ng-container>\r\n <ng-container *ngIf="question.options">\r\n <mat-option *ngFor="let opt of question.options" [value]="opt[question.selection.key]">\r\n {{opt[question.selection.value]}}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n <mat-hint *ngIf="question.hint">{{question.hint}}</mat-hint>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <div *ngSwitchCase="\'chipSelector\'" fxFlex>\r\n <ngx-mat-chip-selector [options]="question.options$ | async" [defaultOptions]="question.value"\r\n [defaultOptionsKey]="question.selection.key" [placeholder]="question.placeholder" [disabled]="question.disabled"\r\n [label]="question.label" [displayKey]="question.selection.value" [filterKey]="question.selection.value"\r\n [appearance]="question.appearance" [hint]="question.hint" [validators]="question.validators"\r\n [customChip]="question.customChip" (output)="setMutlipleValues($event)" fxFlex>\r\n </ngx-mat-chip-selector>\r\n </div>\r\n\r\n <div *ngSwitchCase="\'autoComplete\'" fxFlex>\r\n <ngx-mat-auto-complete [options]="question.options$ | async" [defaultOption]="question.value"\r\n [defaultOptionKey]="question.selection.key" [placeholder]="question.placeholder" [disabled]="question.disabled"\r\n [label]="question.label" [displayKey]="question.selection.value" [filterKey]="question.selection.value"\r\n [appearance]="question.appearance" [hint]="question.hint" [validators]="question.validators"\r\n (output)="setSingleValue($event)" [autoClear]="question.autoClear" fxFlex>\r\n </ngx-mat-auto-complete>\r\n </div>\r\n\r\n <div *ngSwitchCase="\'date-time\'" fxLayout="row wrap" fxFlex>\r\n <mat-form-field fxFlex.gt-xs fxFlex [appearance]="question.appearance">\r\n <mat-label>{{question.label}}</mat-label>\r\n <input matInput [min]="question.minDate" [max]="question.maxDate" [matDatepicker]="picker1"\r\n (dateChange)="dateTimeChange($event)" [placeholder]="question.placeholder"\r\n [formControl]="question.dateControl" readonly>\r\n <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>\r\n <mat-datepicker #picker1 [disabled]="question.disabled"></mat-datepicker>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n <mat-form-field fxFlex.gt-xs="20" fxFlex [appearance]="question.appearance" style="margin-left: 5px;">\r\n <mat-label>Hour</mat-label>\r\n <input type="number" matInput [formControl]="question.hourControl" placeholder="Hour">\r\n </mat-form-field>\r\n <mat-form-field fxFlex.gt-xs="20" fxFlex [appearance]="question.appearance" style="margin-left: 5px;">\r\n <mat-label>Minute</mat-label>\r\n <input type="number" matInput [formControl]="question.minuteControl" placeholder="Minute">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div *ngSwitchCase="\'date\'" fxLayout="row wrap" fxFlex>\r\n <mat-form-field fxFlex.gt-xs fxFlex [appearance]="question.appearance">\r\n <mat-label>{{question.label}}</mat-label>\r\n <input matInput [min]="question.minDate" [max]="question.maxDate" [matDatepicker]="picker1"\r\n (dateChange)="dateChange($event)" [placeholder]="question.placeholder" [formControl]="question.dateControl"\r\n readonly>\r\n <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>\r\n <mat-datepicker #picker1 [disabled]="question.disabled"></mat-datepicker>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div *ngSwitchCase="\'checkbox\'" fxFlex>\r\n <mat-checkbox [labelPosition]="question.labelPosition" [checked]="question.checked" [color]="question.color"\r\n [formControlName]="question.key">{{question.label}}</mat-checkbox>\r\n <mat-error>\r\n <ngx-mat-print-input-error [control]="form.controls[question.key]"> </ngx-mat-print-input-error>\r\n </mat-error>\r\n </div>\r\n\r\n <div *ngSwitchCase="\'file-upload\'" fxFlex>\r\n <ngx-mat-file-upload [prefixIcon]="question.prefixIcon" [label]="question.label" [color]="question.color"\r\n [buttonType]="question.buttonType" (file)="setFile($event)">\r\n </ngx-mat-file-upload>\r\n </div>\r\n\r\n </ng-container>\r\n <div *ngIf="loading" style="margin-left: 5px;">\r\n <mat-spinner style="zoom:0.24"></mat-spinner>\r\n </div>\r\n</div>',styles:[""]}]}],k.ctorParameters=function(){return[{type:a.DateAdapter}]},k.propDecorators={question:[{type:e.Input}],form:[{type:e.Input}]};var w=function(){this.console=console};w.decorators=[{type:e.Component,args:[{selector:"ngx-mat-print-input-error",template:'<div class="text-danger" *ngIf="control && control.errors && (control.dirty || control.touched)">\r\n\r\n <div *ngIf="control.errors.required">\r\n <small>Field is required</small>\r\n </div>\r\n\r\n <div *ngIf="control.errors.max"><small>Maximum value is {{control.errors.max.max}} </small></div>\r\n <div *ngIf="control.errors.min"><small>Minimum value is {{control.errors.min.min}} </small></div>\r\n\r\n <div *ngIf="control.errors.maxlength"><small>Maximum number of characters is\r\n {{control.errors.maxlength.requiredLength}} </small></div>\r\n <div *ngIf="control.errors.minlength"><small>Minimum number of characters is\r\n {{control.errors.minlength.requiredLength}} </small></div>\r\n\r\n <div *ngIf="control.errors.email"><small>Invalid email address</small></div>\r\n\r\n\r\n <div *ngIf="control.errors.unique"><small>{{control.errors.unique}}</small></div>\r\n <div *ngIf="control.errors.lessThen"><small>{{control.errors.lessThen}}</small></div>\r\n <div *ngIf="control.errors.greaterThan"><small>{{control.errors.greaterThan}}</small></div>\r\n <div *ngIf="control.errors.mobile"><small>{{control.errors.mobile}}</small></div>\r\n <div *ngIf="control.errors.confirmPassword"><small>{{control.errors.confirmPassword}}</small></div>\r\n</div>',styles:[""]}]}],w.propDecorators={control:[{type:e.Input,args:["control"]}]};var S=function(){function t(){this.file=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.processFile=function(t){this.fileSelected=t.target.files[0],this.file.emit(this.fileSelected)},t}();S.decorators=[{type:e.Component,args:[{selector:"ngx-mat-file-upload",template:'<ng-container *ngIf="buttonType === \'icon\'; else normalButton;">\n <button mat-icon-button (click)="fileInput.click()">\n <mat-icon matBadge="1" [matBadgeHidden]="!fileSelected" matBadgeSize="small" matBadgeColor="accent">\n {{prefixIcon}}</mat-icon>\n <input #fileInput type="file" (change)="processFile($event)" style="display:none;" />\n </button>\n</ng-container>\n<ng-template #normalButton>\n <button mat-flat-button [color]="color ? color : \'primary\'" (click)="fileInput.click()">\n <mat-icon *ngIf="prefixIcon && !fileSelected" style="margin-left: -8px;">{{prefixIcon}}</mat-icon>\n <mat-icon *ngIf="fileSelected">check</mat-icon>\n <span>{{label}}</span>\n <input #fileInput type="file" (change)="processFile($event)" style="display:none;" />\n </button>\n</ng-template>',styles:[""]}]}],S.ctorParameters=function(){return[]},S.propDecorators={buttonType:[{type:e.Input}],prefixIcon:[{type:e.Input}],suffixIcon:[{type:e.Input}],label:[{type:e.Input}],color:[{type:e.Input}],file:[{type:e.Output}]};var V=function(){};V.decorators=[{type:e.NgModule,args:[{declarations:[q,C,I,O,k,w,S],imports:[l.CommonModule,n.FormsModule,n.ReactiveFormsModule,s.FlexLayoutModule,f.MatInputModule,u.MatChipsModule,p.MatFormFieldModule,c.MatAutocompleteModule,m.MatProgressSpinnerModule,d.MatDatepickerModule,h.MatIconModule,y.MatSelectModule,g.MatCheckboxModule,v.MatButtonModule,b.MatBadgeModule],exports:[C,I,O,k,w]}]}];
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var j=function(t,e){return(j=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])})(t,e)};function M(t,e){function n(){this.constructor=t}j(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}Object.create;Object.create;var T=function(t){void 0===t&&(t={}),this.value=t.value,this.key=t.key||"",this.label=t.label||"",this.controlType=t.controlType||"",this.validators=t.validators||null,this.flex=t.flex||100,this.xsFlex=t.xsFlex||100,this.disabled=t.disabled||!1,this.conditional=t.conditional,this.conditional?this.show=!1:this.show=!0},D=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.hint=e.hint||"",n.placeholder=e.placeholder||"",n.appearance=e.appearance||"standard",n.validators=e.validators||null,n.prefix=e.prefix,n.suffix=e.suffix,n.prefixIcon=e.prefixIcon,n.suffixIcon=e.suffixIcon,n}return M(e,t),e}(T),K=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.options=e.options||[],n.options$=e.options$,n.selection=e.selection,n.defaultValue=null!=e.defaultValue&&e.defaultValue,n.selectionFilter=e.selectionFilter,n.emitObject=e.emitObject,n}return M(e,t),e}(D),A=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="autoComplete",n.autoClear=e.autoClear||!1,n}return M(e,t),e}(K),$=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="dropdown",n}return M(e,t),e}(K),P=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="chipSelector",n.customChip=e.customChip,n}return M(e,t),e}(K),E=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="textbox",n.type=e.type||"",n}return M(e,t),e}(D),L=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="checkbox",n.checked=!(!e.value&&!0!==e.value),n.value=n.checked,n.color=e.color||"primary",n.labelPosition=e.labelPosition||"after",n}return M(e,t),e}(T),R=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="textarea",n.type=e.type||"",n.maxRows=e.maxRows||5,n.minRows=e.minRows||2,n.autoSize=e.autoSize||!0,n}return M(e,t),e}(D),_=function(t){function e(e){void 0===e&&(e={});var o=t.call(this,e)||this;return o.controlType="date",o.dateControl=new n.FormControl,o.maxDate=e.maxDate,o.minDate=e.minDate,e.value&&o.dateControl.setValue(e.value),o}return M(e,t),e}(D),B=function(t){function e(e){void 0===e&&(e={});var o=t.call(this,e)||this;return o.controlType="date-time",o.hourControl=new n.FormControl({value:void 0,disabled:null!=e.disabled&&e.disabled},[n.Validators.min(0),n.Validators.max(23)]),o.minuteControl=new n.FormControl({value:void 0,disabled:null!=e.disabled&&e.disabled},[n.Validators.min(0),n.Validators.max(59)]),o.dateControl.value&&(o.hourControl.setValue(o.dateControl.value.getHours()),o.minuteControl.setValue(o.dateControl.value.getMinutes())),o.hourControl.valueChanges.subscribe((function(t){(void 0!==t||null!==t&&o.dateControl.value)&&o.dateControl.value.setHours(t)})),o.minuteControl.valueChanges.subscribe((function(t){(void 0!==t||null!==t&&o.dateControl.value)&&o.dateControl.value.setMinutes(t)})),o}return M(e,t),e}(_),Q=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="file-upload",n.color=e.color||"primary",n.buttonType=e.buttonType||"icon",n}return M(e,t),e}(D),N=function(t){function e(e){void 0===e&&(e={});var n=t.call(this,e)||this;return n.controlType="spacer",n.flex=e.flex||100,n}return M(e,t),e}(D),z=function(){function t(){}return t.get=function(t){var e=this.validators.find((function(e){return e.name===t}));return e?e.validators:[]},t}();z.validators=[{name:"required",validators:[n.Validators.required]},{name:"integer",validators:[n.Validators.pattern(/^[0-9]*$/)]},{name:"positiveInteger",validators:[n.Validators.min(0),n.Validators.pattern(/^[0-9]*$/)]},{name:"positiveNumber",validators:[n.Validators.min(0),n.Validators.pattern(/^[0-9]*$/)]},{name:"string",validators:[n.Validators.pattern(/^[A-Za-z]+$/)]}],t.AutoCompleteComponent=C,t.AutoCompleteQuestion=A,t.CheckboxQuestion=L,t.ChipSelectorComponent=I,t.ChipSelectorQuestion=P,t.DateQuestion=_,t.DateTimeQuestion=B,t.DropdownQuestion=$,t.DynamicFormComponent=O,t.DynamicFormQuestionComponent=k,t.FileUploadQuestion=Q,t.FormValidators=z,t.NgxMatDynamicFormBuilderComponent=q,t.NgxMatDynamicFormBuilderModule=V,t.NgxMatDynamicFormBuilderService=x,t.PrintInputErrorComponent=w,t.Question=T,t.QuestionBase=D,t.Spacer=N,t.TextAreaQuestion=R,t.TextboxQuestion=E,t.ɵa=F,t.ɵb=S,t.ɵc=K,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mat-dynamic-form-builder.umd.min.js.map