ngx-mat-dynamic-form-builder
Version:
Build dynamic forms in Angular Material using Reactive forms.
1,187 lines • 65.5 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(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')) :
typeof define === 'function' && 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'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-mat-dynamic-form-builder'] = {}, global.ng.core, global.ng.forms, global.rxjs.operators, global.lodash, global.ng.cdk.keycodes, global.ng.material.core, global.ng.common, global.ng.flexLayout, global.ng.material.chips, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.progressSpinner, global.ng.material.datepicker, global.ng.material.input, global.ng.material.icon, global.ng.material.select, global.ng.material.checkbox, global.ng.material.button, global.ng.material.badge));
}(this, (function (exports, i0, forms, operators, lodash, keycodes, core, common, flexLayout, chips, formField, autocomplete, progressSpinner, datepicker, input, icon, select, checkbox, button, badge) { 'use strict';
var NgxMatDynamicFormBuilderService = /** @class */ (function () {
function NgxMatDynamicFormBuilderService() {
}
return NgxMatDynamicFormBuilderService;
}());
NgxMatDynamicFormBuilderService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NgxMatDynamicFormBuilderService_Factory() { return new NgxMatDynamicFormBuilderService(); }, token: NgxMatDynamicFormBuilderService, providedIn: "root" });
NgxMatDynamicFormBuilderService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
NgxMatDynamicFormBuilderService.ctorParameters = function () { return []; };
var NgxMatDynamicFormBuilderComponent = /** @class */ (function () {
function NgxMatDynamicFormBuilderComponent() {
}
NgxMatDynamicFormBuilderComponent.prototype.ngOnInit = function () {
};
return NgxMatDynamicFormBuilderComponent;
}());
NgxMatDynamicFormBuilderComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'ngx-mat-dynamic-form-builder',
template: "\n <p>\n ngx-mat-dynamic-form-builder works!\n </p>\n "
},] }
];
NgxMatDynamicFormBuilderComponent.ctorParameters = function () { return []; };
var AutoCompleteComponent = /** @class */ (function () {
function AutoCompleteComponent() {
this.options = [];
this.hint = '';
this.appearance = 'standard';
this.disabled = false;
this.autoClear = false;
this.output = new i0.EventEmitter();
}
AutoCompleteComponent.prototype.ngOnInit = function () {
this.setupValidators();
};
AutoCompleteComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes.options && this.options) {
if (!this.stateCtrl)
this.setupValidators();
this.filteredOptions = this.stateCtrl.valueChanges
.pipe(operators.startWith(''), operators.map(function (state) { return state ? _this._filterOptions(state) : _this.options.slice(); }));
if (this.defaultOption && this.defaultOptionKey) {
this.stateCtrl.setValue(this.options.find(function (o) { return o[_this.defaultOptionKey] === _this.defaultOption; }));
}
}
};
AutoCompleteComponent.prototype.setupValidators = function () {
if (this.stateCtrl)
return;
if (this.validators) {
var isRequired_1 = false;
this.validators.forEach(function (vd) {
if (vd.name === 'required')
isRequired_1 = true;
});
if (isRequired_1) {
this.stateCtrl = new forms.FormControl(null, [forms.Validators.required, this.valueSelected()]);
}
else {
this.stateCtrl = new forms.FormControl(null, [this.valueSelected()]);
}
}
else {
this.stateCtrl = new forms.FormControl(null, [this.valueSelected()]);
}
};
AutoCompleteComponent.prototype.displayFn = function (value) {
if (value)
return value[this.displayKey];
};
AutoCompleteComponent.prototype.setValue = function (event) {
this.output.emit(event.option.value);
if (this.autoClear) {
this.stateCtrl.reset();
}
};
AutoCompleteComponent.prototype.clearValue = function () {
this.output.emit(undefined);
this.stateCtrl.reset();
};
AutoCompleteComponent.prototype._filterOptions = function (value) {
var _this = this;
if (lodash.isString(value) && value.length >= 1) {
var filterValue_1 = value.toLowerCase();
return this.options.filter(function (state) { return state[_this.filterKey ? _this.filterKey : _this.displayKey].toLowerCase().includes(filterValue_1); });
}
return this.options;
};
AutoCompleteComponent.prototype.valueSelected = function () {
return function (c) {
// if value is set and it is not an object, valid option not selected
if (c.value && typeof c.value !== 'object') {
return { match: true };
}
else {
return null;
}
};
};
return AutoCompleteComponent;
}());
AutoCompleteComponent.decorators = [
{ type: i0.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: [""]
},] }
];
AutoCompleteComponent.ctorParameters = function () { return []; };
AutoCompleteComponent.propDecorators = {
options: [{ type: i0.Input }],
defaultOption: [{ type: i0.Input }],
defaultOptionKey: [{ type: i0.Input }],
label: [{ type: i0.Input }],
placeholder: [{ type: i0.Input }],
displayKey: [{ type: i0.Input }],
filterKey: [{ type: i0.Input }],
hint: [{ type: i0.Input }],
appearance: [{ type: i0.Input }],
disabled: [{ type: i0.Input }],
autoClear: [{ type: i0.Input }],
validators: [{ type: i0.Input }],
output: [{ type: i0.Output }]
};
var ChipSelectorComponent = /** @class */ (function () {
function ChipSelectorComponent() {
this.options = [];
this.hint = "";
this.appearance = 'standard';
this.disabled = false;
this.customChip = false;
this.output = new i0.EventEmitter();
this.visible = true;
this.selectable = true;
this.separatorKeysCodes = [keycodes.ENTER, keycodes.COMMA];
this.selectedObjects = [];
}
ChipSelectorComponent.prototype.ngOnInit = function () {
this.setupValidators();
};
ChipSelectorComponent.prototype.ngOnChanges = function (changes) {
var _this = this;
if (changes.options && this.options) {
if (!this.formControl)
this.setupValidators();
this.filteredObjects = this.formControl.valueChanges.pipe(operators.startWith([]), operators.map(function (obj) {
return obj ? _this._filter(obj) : _this.options.slice();
}));
if (this.defaultOptions && this.defaultOptionsKey) {
this.addDefaultSelected(this.defaultOptions);
}
}
};
ChipSelectorComponent.prototype.setupValidators = function () {
if (this.formControl)
return;
if (this.validators) {
var isRequired_1 = false;
this.validators.forEach(function (vd) {
if (vd.name === 'required')
isRequired_1 = true;
});
if (isRequired_1) {
this.formControl = new forms.FormControl(this.selectedObjects, [forms.Validators.required, this.valueSelected()]);
}
else {
this.formControl = new forms.FormControl(this.selectedObjects, [this.valueSelected()]);
}
}
else if (!this.customChip) {
this.formControl = new forms.FormControl(this.selectedObjects, [this.valueSelected()]);
}
else {
this.formControl = new forms.FormControl();
}
};
ChipSelectorComponent.prototype.add = function (event) {
var _a;
// Add fruit only when MatAutocomplete is not open
// To make sure this does not conflict with OptionSelected Event
if (!this.matAutocomplete.isOpen) {
var input = event.input;
var value = event.value;
if (this.customChip && (value || '').trim()) {
this.selectedObjects.push((_a = {}, _a[this.displayKey] = value.trim(), _a));
this.output.emit(this.selectedObjects);
}
// Reset the input value
if (input) {
input.value = '';
}
}
this.formControl.setValue(this.selectedObjects);
this.formControl.updateValueAndValidity();
};
ChipSelectorComponent.prototype.remove = function (item) {
this.updateFilteredObjects();
var index = this.selectedObjects.indexOf(item);
if (index >= 0) {
this.selectedObjects.splice(index, 1);
this.output.emit(this.selectedObjects);
}
this.formControl.updateValueAndValidity();
};
ChipSelectorComponent.prototype.updateFilteredObjects = function () {
var _this = this;
this.filteredObjects = this.filteredObjects.pipe(operators.map(function (data) { return data.filter(function (obj) { return !_this.selectedObjects.includes(obj); }); }));
};
ChipSelectorComponent.prototype.selected = function (event) {
this.selectedObjects.push(event.option.value);
this.output.emit(this.selectedObjects);
this.updateFilteredObjects();
this.formInput.nativeElement.value = '';
this.formInput.nativeElement.blur();
this.formControl.setValue(this.selectedObjects);
};
ChipSelectorComponent.prototype.addDefaultSelected = function (values) {
var _this = this;
if (!Array.isArray(values)) {
console.error('Default values not an array');
return;
}
this.selectedObjects = this.options.filter(function (i) { return values.some(function (t) { return t === i[_this.defaultOptionsKey]; }); });
this.output.emit(this.selectedObjects);
this.updateFilteredObjects();
this.formControl.setValue(this.selectedObjects);
};
ChipSelectorComponent.prototype._filter = function (value) {
var _this = this;
if (lodash.isString(value) && value.length >= 1) {
var filterValue_1 = value.toLowerCase();
return this.options.filter(function (obj) { return obj[_this.filterKey ? _this.filterKey : _this.displayKey].
toLowerCase().includes(filterValue_1); });
}
return this.options;
};
ChipSelectorComponent.prototype.valueSelected = function () {
return function (c) {
// if value is set and it is not an object, valid option not selected
if (c.value && typeof c.value !== 'object') {
return { match: true };
}
else {
return null;
}
};
};
return ChipSelectorComponent;
}());
ChipSelectorComponent.decorators = [
{ type: i0.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: [""]
},] }
];
ChipSelectorComponent.propDecorators = {
options: [{ type: i0.Input }],
defaultOptions: [{ type: i0.Input }],
defaultOptionsKey: [{ type: i0.Input }],
label: [{ type: i0.Input }],
placeholder: [{ type: i0.Input }],
displayKey: [{ type: i0.Input }],
filterKey: [{ type: i0.Input }],
hint: [{ type: i0.Input }],
appearance: [{ type: i0.Input }],
disabled: [{ type: i0.Input }],
customChip: [{ type: i0.Input }],
validators: [{ type: i0.Input }],
output: [{ type: i0.Output }],
formInput: [{ type: i0.ViewChild, args: ['formInput',] }],
matAutocomplete: [{ type: i0.ViewChild, args: ['auto',] }]
};
var QuestionControlService = /** @class */ (function () {
function QuestionControlService() {
}
QuestionControlService.prototype.toFormGroup = function (questions) {
var group = {};
questions.some(function (question) {
if (question.controlType === 'spacer') {
return;
}
group[question.key] = question.validators ? new forms.FormControl({ value: question.value !== undefined || question.value !== null ? question.value : undefined, disabled: question.disabled }, question.validators)
: new forms.FormControl({ value: question.value !== undefined || question.value !== null ? question.value : undefined, disabled: question.disabled });
});
return new forms.FormGroup(group);
};
return QuestionControlService;
}());
QuestionControlService.decorators = [
{ type: i0.Injectable }
];
QuestionControlService.ctorParameters = function () { return []; };
var DynamicFormComponent = /** @class */ (function () {
function DynamicFormComponent(qcs) {
this.qcs = qcs;
this.questions = [];
this.emitOnlyOnChange = false;
this.formResult = new i0.EventEmitter();
}
DynamicFormComponent.prototype.ngOnInit = function () {
var _this = this;
if (!this.questions || this.questions.length === 0) {
console.error('Questions are null or empty.');
return;
}
this.form = this.qcs.toFormGroup(this.questions);
// Emit if the form is valid from begining but not if on change flag is set.
if (!this.emitOnlyOnChange && this.form.valid) {
this.emitForm();
}
this._buttonText = this.buttonText || 'Save';
this.prepareConditionalControls();
this.prepareFilteredOptions();
this.form.statusChanges.subscribe(function (status) {
if (status === 'VALID') {
_this.emitForm();
}
else {
_this.formResult.emit(null);
}
;
});
};
DynamicFormComponent.prototype.emitForm = function () {
var validForm = this.form.getRawValue();
this.questions.forEach(function (q) {
if (q.type && q.type === 'number') {
if (validForm[q.key])
validForm[q.key] = Number(validForm[q.key]);
}
});
this.formResult.emit(validForm);
};
DynamicFormComponent.prototype.prepareConditionalControls = function () {
var _this = this;
this.changeSubscriptions = [];
// Listen for changes on other controlls
this.questions.forEach(function (q) {
if (q.conditional) {
// Subscribe to changes
var targetControl = _this.form.controls[q.conditional.controlKey];
_this.changeSubscriptions.push(targetControl.valueChanges.subscribe(function (value) {
if (Array.isArray(value)) {
value.includes(q.conditional.value) ? q.show = true : q.show = false;
}
else {
q.conditional.value === value ? q.show = true : q.show = false;
}
}));
// If values are set check them now
if (Array.isArray(targetControl.value)) {
targetControl.value.includes(q.conditional.value) ? q.show = true : q.show = false;
}
else if (targetControl.value && targetControl.value === q.conditional.value) {
q.show = true;
}
}
});
};
DynamicFormComponent.prototype.prepareFilteredOptions = function () {
var _this = this;
this.filterSubscriptions = [];
this.questions.forEach(function (q) {
if (q.selectionFilter) {
var targetControl = _this.form.controls[q.selectionFilter.controlKey];
// If the target value changes, subscribe to load new selections
_this.filterSubscriptions.push(targetControl.valueChanges.subscribe(function (value) {
q.selectionFilter.options$(value).subscribe(function (res) {
q.options$.next(res);
});
}));
// if target is set, then load them immediately
if (targetControl.value) {
q.selectionFilter.options$(targetControl.value).subscribe(function (res) {
q.options$.next(res);
});
}
}
});
};
DynamicFormComponent.prototype.ngOnDestroy = function () {
if (this.changeSubscriptions) {
this.changeSubscriptions.forEach(function (s) {
s.unsubscribe;
});
}
if (this.filterSubscriptions) {
this.filterSubscriptions.forEach(function (s) {
s.unsubscribe;
});
}
};
return DynamicFormComponent;
}());
DynamicFormComponent.decorators = [
{ type: i0.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: [QuestionControlService],
styles: [""]
},] }
];
DynamicFormComponent.ctorParameters = function () { return [
{ type: QuestionControlService }
]; };
DynamicFormComponent.propDecorators = {
questions: [{ type: i0.Input }],
buttonText: [{ type: i0.Input }],
emitOnlyOnChange: [{ type: i0.Input }],
formResult: [{ type: i0.Output }]
};
var DynamicFormQuestionComponent = /** @class */ (function () {
function DynamicFormQuestionComponent(adapter) {
this.adapter = adapter;
this.loading = false;
this.adapter.setLocale('en-GB');
}
Object.defineProperty(DynamicFormQuestionComponent.prototype, "isValid", {
get: function () { return this.form.controls[this.question.key].valid; },
enumerable: false,
configurable: true
});
DynamicFormQuestionComponent.prototype.ngOnInit = function () {
var _this = this;
if (this.question.selectionFilter) {
console.log('TODO: Do some loading here...');
}
else if (this.question.options$) {
this.loading = true;
this.question.options$ = this.question.options$.pipe(operators.tap(function (_) { return setTimeout(function () {
_this.loading = false;
}); }));
}
};
DynamicFormQuestionComponent.prototype.setMutlipleValues = function (event) {
var _this = this;
if (this.question.customChip) {
this.form.controls[this.question.key].setValue(event);
}
else {
this.form.controls[this.question.key].setValue(this.question.emitObject ? event : event.map(function (val) { return val[_this.question.selection.key]; }));
}
};
DynamicFormQuestionComponent.prototype.setSingleValue = function (event) {
// Clear input of auto complete
if (!event) {
this.form.controls[this.question.key].setValue(undefined);
}
else {
this.form.controls[this.question.key].setValue(this.question.emitObject ? event : event[this.question.selection.key]);
}
};
DynamicFormQuestionComponent.prototype.dateTimeChange = function (event) {
if (this.question.hourControl.value) {
event.value.setHours(this.question.hourControl.value);
}
if (this.question.minuteControl.value) {
event.value.setMinutes(this.question.minuteControl.value);
}
this.form.controls[this.question.key].setValue(event.value);
};
DynamicFormQuestionComponent.prototype.dateChange = function (event) {
this.form.controls[this.question.key].setValue(event.value);
};
DynamicFormQuestionComponent.prototype.setFile = function (file) {
this.form.controls[this.question.key].setValue(file);
};
return DynamicFormQuestionComponent;
}());
DynamicFormQuestionComponent.decorators = [
{ type: i0.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: [""]
},] }
];
DynamicFormQuestionComponent.ctorParameters = function () { return [
{ type: core.DateAdapter }
]; };
DynamicFormQuestionComponent.propDecorators = {
question: [{ type: i0.Input }],
form: [{ type: i0.Input }]
};
var PrintInputErrorComponent = /** @class */ (function () {
function PrintInputErrorComponent() {
this.console = console;
}
return PrintInputErrorComponent;
}());
PrintInputErrorComponent.decorators = [
{ type: i0.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: [""]
},] }
];
PrintInputErrorComponent.propDecorators = {
control: [{ type: i0.Input, args: ["control",] }]
};
var FileUploadComponent = /** @class */ (function () {
function FileUploadComponent() {
this.file = new i0.EventEmitter();
}
FileUploadComponent.prototype.ngOnInit = function () {
};
FileUploadComponent.prototype.processFile = function (event) {
this.fileSelected = event.target.files[0];
this.file.emit(this.fileSelected);
};
return FileUploadComponent;
}());
FileUploadComponent.decorators = [
{ type: i0.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: [""]
},] }
];
FileUploadComponent.ctorParameters = function () { return []; };
FileUploadComponent.propDecorators = {
buttonType: [{ type: i0.Input }],
prefixIcon: [{ type: i0.Input }],
suffixIcon: [{ type: i0.Input }],
label: [{ type: i0.Input }],
color: [{ type: i0.Input }],
file: [{ type: i0.Output }]
};
var NgxMatDynamicFormBuilderModule = /** @class */ (function () {
function NgxMatDynamicFormBuilderModule() {
}
return NgxMatDynamicFormBuilderModule;
}());
NgxMatDynamicFormBuilderModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [
NgxMatDynamicFormBuilderComponent,
AutoCompleteComponent,
ChipSelectorComponent,
DynamicFormComponent,
DynamicFormQuestionComponent,
PrintInputErrorComponent,
FileUploadComponent
],
imports: [
common.CommonModule,
forms.FormsModule,
forms.ReactiveFormsModule,
flexLayout.FlexLayoutModule,
input.MatInputModule,
chips.MatChipsModule,
formField.MatFormFieldModule,
autocomplete.MatAutocompleteModule,
progressSpinner.MatProgressSpinnerModule,
datepicker.MatDatepickerModule,
icon.MatIconModule,
select.MatSelectModule,
checkbox.MatCheckboxModule,
button.MatButtonModule,
badge.MatBadgeModule
],
exports: [
AutoCompleteComponent,
ChipSelectorComponent,
DynamicFormComponent,
DynamicFormQuestionComponent,
PrintInputErrorComponent
]
},] }
];
/*! *****************************************************************************
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.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (Object.prototype.hasOwnProperty.call(b, p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __createBinding = Object.create ? (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
}) : (function (o, m, k, k2) {
if (k2 === undefined)
k2 = k;
o[k2] = m[k];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
;
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(mod) {
if (mod && mod.__esModule)
return mod;
var result = {};
if (mod != null)
for (var k in mod)
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
__createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
/**
* Base question with no mat form field
*/
var Question = /** @class */ (function () {
function Question(options) {
if (options === void 0) { options = {}; }
this.value = options.value;
this.key = options.key || '';
this.label = options.label || '';
this.controlType = options.controlType || '';
this.validators = options.validators || null;
this.flex = options.flex || 100;
this.xsFlex = options.xsFlex || 100;
this.disabled = options.disabled || false;
this.conditional = options.conditional;
this.conditional ? this.show = false : this.show = true;
}
return Question;
}());
/**
* Base for all mat form field questions:
* Auto complete
* Chip Selector
* Date time
* Date
* Dropdown
* Select
* Text area
* Text Box
*/
var QuestionBase = /** @class */ (function (_super) {
__extends(QuestionBase, _super);
function QuestionBase(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.hint = options.hint || '';
_this.placeholder = options.placeholder || '';
_this.appearance = options.appearance || 'standard';
_this.validators = options.validators || null;
_this.prefix = options.prefix;
_this.suffix = options.suffix;
_this.prefixIcon = options.prefixIcon;
_this.suffixIcon = options.suffixIcon;
return _this;
}
return QuestionBase;
}(Question));
/**
* Base class for any drop down of multiple select
*/
var SelectQuestion = /** @class */ (function (_super) {
__extends(SelectQuestion, _super);
function SelectQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.options = options['options'] || [];
_this.options$ = options['options$'];
_this.selection = options['selection'];
_this.defaultValue = options['defaultValue'] != undefined ? options['defaultValue'] : false;
_this.selectionFilter = options['selectionFilter'];
_this.emitObject = options['emitObject'];
return _this;
}
return SelectQuestion;
}(QuestionBase));
var AutoCompleteQuestion = /** @class */ (function (_super) {
__extends(AutoCompleteQuestion, _super);
function AutoCompleteQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'autoComplete';
_this.autoClear = options['autoClear'] || false;
return _this;
}
return AutoCompleteQuestion;
}(SelectQuestion));
var DropdownQuestion = /** @class */ (function (_super) {
__extends(DropdownQuestion, _super);
function DropdownQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'dropdown';
return _this;
}
return DropdownQuestion;
}(SelectQuestion));
var ChipSelectorQuestion = /** @class */ (function (_super) {
__extends(ChipSelectorQuestion, _super);
function ChipSelectorQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'chipSelector';
_this.customChip = options['customChip'];
return _this;
}
return ChipSelectorQuestion;
}(SelectQuestion));
var TextboxQuestion = /** @class */ (function (_super) {
__extends(TextboxQuestion, _super);
function TextboxQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'textbox';
_this.type = options['type'] || '';
return _this;
}
return TextboxQuestion;
}(QuestionBase));
var CheckboxQuestion = /** @class */ (function (_super) {
__extends(CheckboxQuestion, _super);
function CheckboxQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'checkbox';
_this.checked = options['value'] || options['value'] === true ? true : false;
_this.value = _this.checked;
_this.color = options['color'] || 'primary';
_this.labelPosition = options['labelPosition'] || 'after';
return _this;
}
return CheckboxQuestion;
}(Question));
var TextAreaQuestion = /** @class */ (function (_super) {
__extends(TextAreaQuestion, _super);
function TextAreaQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'textarea';
_this.type = options['type'] || '';
_this.maxRows = options['maxRows'] || 5;
_this.minRows = options['minRows'] || 2;
_this.autoSize = options['autoSize'] || true;
return _this;
}
return TextAreaQuestion;
}(QuestionBase));
var DateQuestion = /** @class */ (function (_super) {
__extends(DateQuestion, _super);
function DateQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'date';
_this.dateControl = new forms.FormControl();
_this.maxDate = options['maxDate'];
_this.minDate = options['minDate'];
if (options['value']) {
_this.dateControl.setValue(options['value']);
}
return _this;
}
return DateQuestion;
}(QuestionBase));
var DateTimeQuestion = /** @class */ (function (_super) {
__extends(DateTimeQuestion, _super);
function DateTimeQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'date-time';
_this.hourControl = new forms.FormControl({ value: undefined, disabled: options['disabled'] != undefined ? options['disabled'] : false }, [forms.Validators.min(0), forms.Validators.max(23)]);
_this.minuteControl = new forms.FormControl({ value: undefined, disabled: options['disabled'] != undefined ? options['disabled'] : false }, [forms.Validators.min(0), forms.Validators.max(59)]);
if (_this.dateControl.value) {
_this.hourControl.setValue(_this.dateControl.value.getHours());
_this.minuteControl.setValue(_this.dateControl.value.getMinutes());
}
_this.hourControl.valueChanges.subscribe(function (hour) {
if (hour !== undefined || hour !== null && _this.dateControl.value) {
_this.dateControl.value.setHours(hour);
}
});
_this.minuteControl.valueChanges.subscribe(function (min) {
if (min !== undefined || min !== null && _this.dateControl.value) {
_this.dateControl.value.setMinutes(min);
}
});
return _this;
}
return DateTimeQuestion;
}(DateQuestion));
var FileUploadQuestion = /** @class */ (function (_super) {
__extends(FileUploadQuestion, _super);
function FileUploadQuestion(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'file-upload';
_this.color = options['color'] || 'primary';
_this.buttonType = options['buttonType'] || 'icon';
return _this;
}
return FileUploadQuestion;
}(QuestionBase));
var Spacer = /** @class */ (function (_super) {
__extends(Spacer, _super);
function Spacer(options) {
if (options === void 0) { options = {}; }
var _this = _super.call(this, options) || this;
_this.controlType = 'spacer';
_this.flex = options['flex'] || 100;
return _this;
}
return Spacer;
}(QuestionBase));
// @dynamic
var FormValidators = /** @class */ (function () {
function FormValidators() {
}
FormValidators.get = function (validatorString) {
var validator = this.validators.find(function (v) { return v.name === validatorString; });
return validator ? validator.validators : [];
};
return FormValidators;
}());
FormValidators.validators = [
{
name: 'required',
validators: [
forms.Validators.required
]
},
{
name: 'integer',
validators: [
forms.Validators.pattern(/^[0-9]*$/)
]
},
{
name: 'positiveInteger',
validators: [
forms.Validators.min(0),
forms.Validators.pattern(/^[0-9]*$/)
]
},
{
name: 'positiveNumber',
validators: [
forms.Validators.min(0),
forms.Validators.pattern(/^[0-9]*$/)
]
},
{
name: 'string',
validators: [
forms.Validators.pattern(/^[A-Za-z]+$/)
]
}
];
/*
* Public API Surface of ngx-mat-dynamic-form-builder
*/
/**
* Generated bundle index. Do not edit.
*/
exports.AutoCompleteComponent = AutoCompleteComponent;
exports.AutoCompleteQuestion = AutoCompleteQuestion;
exports.CheckboxQuestion = CheckboxQuestion;
exports.ChipSelectorComponent = ChipSelectorComponent;
exports.ChipSelectorQuestion = ChipSelectorQuestion;
exports.DateQuestion = DateQuestion;
exports.DateTimeQuestion = DateTimeQuestion;
exports.DropdownQuestion = DropdownQuestion;
exports.DynamicFormComponent = DynamicFormComponent;
exports.DynamicFormQuestionComponent = DynamicFormQuestionComponent;
exports.FileUploadQuestion = FileUploadQuestion;
exports.FormValidators = FormValidators;
exports.NgxMatDynamicFormBuilderComponent = NgxMatDynamicFormBuilderComponent;
exports.NgxMatDynamicFormBuilderModule = NgxMatDynamicFormBuilderModule;
exports.NgxMatDynamicFormBuilderService = NgxMatDynamicFormBuilderService;
exports.PrintInputErrorComponent = PrintInputErrorComponent;
exports.Question = Question;
exports.QuestionBase = QuestionBase;
exports.Spacer = Spacer;
exports.TextAreaQuestion = TextAreaQuestion;
exports.TextboxQuestion = TextboxQuestion;
exports.ɵa = QuestionControlService;
exports.ɵb = FileUploadComponent;
exports.ɵc = SelectQuestion;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-mat-dynamic-form-builder.umd.js.map