ngx-mat-dynamic-form-builder
Version:
Build dynamic forms in Angular Material using Reactive forms.
1 lines • 35 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxMatDynamicFormBuilderService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"NgxMatDynamicFormBuilderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"ngx-mat-dynamic-form-builder","template":"\n <p>\n ngx-mat-dynamic-form-builder works!\n </p>\n ","styles":[]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"NgxMatDynamicFormBuilderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":23,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxMatDynamicFormBuilderComponent"},{"__symbolic":"reference","name":"AutoCompleteComponent"},{"__symbolic":"reference","name":"ChipSelectorComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"},{"__symbolic":"reference","name":"DynamicFormQuestionComponent"},{"__symbolic":"reference","name":"PrintInputErrorComponent"},{"__symbolic":"reference","name":"ɵb"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":34,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":35,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":36,"character":4},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":37,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":38,"character":4},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":39,"character":4},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":40,"character":4},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":41,"character":4},{"__symbolic":"reference","module":"@angular/material/progress-spinner","name":"MatProgressSpinnerModule","line":42,"character":4},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":43,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":44,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":45,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":46,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":47,"character":4},{"__symbolic":"reference","module":"@angular/material/badge","name":"MatBadgeModule","line":48,"character":4}],"exports":[{"__symbolic":"reference","name":"AutoCompleteComponent"},{"__symbolic":"reference","name":"ChipSelectorComponent"},{"__symbolic":"reference","name":"DynamicFormComponent"},{"__symbolic":"reference","name":"DynamicFormQuestionComponent"},{"__symbolic":"reference","name":"PrintInputErrorComponent"}]}]}],"members":{}},"QuestionBase":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"Question"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":69,"character":25,"module":"./lib/components/helper-classes/question-base"}]}]}},"Question":{"__symbolic":"class","arity":1,"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":19,"character":25,"module":"./lib/components/helper-classes/question-base"}]}]}},"AutoCompleteQuestion":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ɵc"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":5,"character":25,"module":"./lib/components/helper-classes/question-auto-complete"}]}]}},"DropdownQuestion":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ɵc"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":5,"character":23,"module":"./lib/components/helper-classes/question-dropdown"}]}]}},"ChipSelectorQuestion":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ɵc"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":7,"character":23,"module":"./lib/components/helper-classes/question-chip-selector"}]}]}},"TextboxQuestion":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":6,"character":23,"module":"./lib/components/helper-classes/question-textbox"}]}]}},"CheckboxQuestion":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"Question"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":9,"character":25,"module":"./lib/components/helper-classes/question-checkbox"}]}]}},"TextAreaQuestion":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":9,"character":25,"module":"./lib/components/helper-classes/question-text-area"}]}]}},"DateTimeQuestion":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"DateQuestion"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":10,"character":25,"module":"./lib/components/helper-classes/question-date-time"}]}]}},"DateQuestion":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":11,"character":25,"module":"./lib/components/helper-classes/question-date"}]}]}},"FileUploadQuestion":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":8,"character":25,"module":"./lib/components/helper-classes/question-file-upload"}]}]}},"Spacer":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":7,"character":25,"module":"./lib/components/helper-classes/spacer"}]}]}},"FormValidators":{"__symbolic":"class","members":{},"statics":{"validators":[{"name":"required","validators":[{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":13,"character":16},"member":"required"}]},{"name":"integer","validators":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":19,"character":16},"member":"pattern"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":19,"character":35}]}]},{"name":"positiveInteger","validators":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":25,"character":16},"member":"min"},"arguments":[0]},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":26,"character":16},"member":"pattern"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":26,"character":35}]}]},{"name":"positiveNumber","validators":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":32,"character":16},"member":"min"},"arguments":[0]},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":33,"character":16},"member":"pattern"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":33,"character":35}]}]},{"name":"string","validators":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/forms","name":"Validators","line":39,"character":16},"member":"pattern"},"arguments":[{"__symbolic":"error","message":"Expression form not supported","line":39,"character":35}]}]}]}},"AutoCompleteComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"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":[""]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"defaultOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"defaultOptionKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"filterKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"autoClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"validators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"output":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":30,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setupValidators":[{"__symbolic":"method"}],"displayFn":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"clearValue":[{"__symbolic":"method"}],"_filterOptions":[{"__symbolic":"method"}],"valueSelected":[{"__symbolic":"method"}]}},"ChipSelectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"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":[""]}]}],"members":{"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"defaultOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"defaultOptionsKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"displayKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"filterKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"customChip":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"validators":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"output":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"formInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":36,"character":3},"arguments":["formInput"]}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":37,"character":3},"arguments":["auto"]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setupValidators":[{"__symbolic":"method"}],"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"updateFilteredObjects":[{"__symbolic":"method"}],"selected":[{"__symbolic":"method"}],"addDefaultSelected":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"valueSelected":[{"__symbolic":"method"}]}},"DynamicFormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"ngx-mat-dynamic-form","providers":[{"__symbolic":"reference","name":"ɵa"}],"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>","styles":[""]}]}],"members":{"questions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"buttonText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"emitOnlyOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"formResult":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"ngOnInit":[{"__symbolic":"method"}],"emitForm":[{"__symbolic":"method"}],"prepareConditionalControls":[{"__symbolic":"method"}],"prepareFilteredOptions":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"DynamicFormQuestionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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":[""]}]}],"members":{"question":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"reference","name":"Date"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"setMutlipleValues":[{"__symbolic":"method"}],"setSingleValue":[{"__symbolic":"method"}],"dateTimeChange":[{"__symbolic":"method"}],"dateChange":[{"__symbolic":"method"}],"setFile":[{"__symbolic":"method"}]}},"PrintInputErrorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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":[""]}]}],"members":{"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3},"arguments":["control"]}]}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"toFormGroup":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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":[""]}]}],"members":{"buttonType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"prefixIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"suffixIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"file":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"processFile":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"QuestionBase"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Expression form not supported","line":23,"character":25,"module":"./lib/components/helper-classes/question-select"}]}]}}},"origins":{"NgxMatDynamicFormBuilderService":"./lib/ngx-mat-dynamic-form-builder.service","NgxMatDynamicFormBuilderComponent":"./lib/ngx-mat-dynamic-form-builder.component","NgxMatDynamicFormBuilderModule":"./lib/ngx-mat-dynamic-form-builder.module","QuestionBase":"./lib/components/helper-classes/question-base","Question":"./lib/components/helper-classes/question-base","AutoCompleteQuestion":"./lib/components/helper-classes/question-auto-complete","DropdownQuestion":"./lib/components/helper-classes/question-dropdown","ChipSelectorQuestion":"./lib/components/helper-classes/question-chip-selector","TextboxQuestion":"./lib/components/helper-classes/question-textbox","CheckboxQuestion":"./lib/components/helper-classes/question-checkbox","TextAreaQuestion":"./lib/components/helper-classes/question-text-area","DateTimeQuestion":"./lib/components/helper-classes/question-date-time","DateQuestion":"./lib/components/helper-classes/question-date","FileUploadQuestion":"./lib/components/helper-classes/question-file-upload","Spacer":"./lib/components/helper-classes/spacer","FormValidators":"./lib/components/helper-classes/validators","AutoCompleteComponent":"./lib/components/auto-complete/auto-complete.component","ChipSelectorComponent":"./lib/components/chip-selector/chip-selector.component","DynamicFormComponent":"./lib/components/dynamic-form/dynamic-form.component","DynamicFormQuestionComponent":"./lib/components/dynamic-form-question/dynamic-form-question.component","PrintInputErrorComponent":"./lib/components/print-input-error/print-input-error.component","ɵa":"./lib/components/services/question-control.service","ɵb":"./lib/components/file-upload/file-upload.component","ɵc":"./lib/components/helper-classes/question-select"},"importAs":"ngx-mat-dynamic-form-builder"}