{"__symbolic":"module","version":4,"metadata":{"DynamicMaterialFormInputControlComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":9,"character":71},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":13,"character":51},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":14,"character":55}]}]}},"DynamicMaterialCheckboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":17,"character":54},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"dynamic-material-checkbox","template":"<ng-container [formGroup]=\"group\">\n\n    <mat-checkbox #matCheckbox\n                  [checked]=\"model.checked\"\n                  [color]=\"model.getAdditional('color', 'accent')\"\n                  [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                  [formControlName]=\"model.id\"\n                  [id]=\"elementId\"\n                  [indeterminate]=\"model.indeterminate\"\n                  [labelPosition]=\"model.labelPosition || 'after'\"\n                  [name]=\"model.name\"\n                  [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                  (blur)=\"onBlur($event)\"\n                  (change)=\"onChange($event)\"\n                  (focus)=\"onFocus($event)\"\n                  (indeterminateChange)=\"onCustomEvent($event, 'indeterminateChange')\">\n\n        <span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span>\n\n    </mat-checkbox>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"matCheckbox":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":["matCheckbox",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_RIPPLE_GLOBAL_OPTIONS","line":32,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":32,"character":52}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":30,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":31,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"RippleGlobalOptions","line":32,"character":86}]}]}},"DynamicMaterialChipsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":34,"character":51},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":30,"character":1},"arguments":[{"selector":"dynamic-material-chips","template":"<mat-form-field [appearance]=\"model.getAdditional('appearance', 'legacy')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <mat-chip-list #matChipList [formControlName]=\"model.id\" [id]=\"elementId\" [multiple]=\"true\">\n\n        <mat-chip *ngFor=\"let chip of chips; let index = index\"\n                  [selectable]=\"false\"\n                  (removed)=\"onChipRemoved(chip, index)\">\n\n            <span>{{ chip }}</span>\n\n            <mat-icon matChipRemove>cancel</mat-icon>\n\n        </mat-chip>\n\n        <input matInput\n               [matAutocomplete]=\"matAutocomplete\"\n               [matChipInputAddOnBlur]=\"model.getAdditional('matChipInputAddOnBlur', true)\"\n               [matChipInputFor]=\"matChipList\"\n               [matChipInputSeparatorKeyCodes]=\"model.getAdditional('matChipInputSeparatorKeyCodes', CHIPS_OPTIONS['separatorKeyCodes'])\"\n               [placeholder]=\"model.placeholder\"\n               (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"\n               (blur)=\"onBlur($event)\"\n               (focus)=\"onFocus($event)\"/>\n\n        <mat-autocomplete #matAutocomplete=\"matAutocomplete\"\n                          [autoActiveFirstOption]=\"model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])\"\n                          [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                          [displayWith]=\"model.getAdditional('displayWith', null)\"\n                          (optionSelected)=\"onChipSelected($event)\">\n\n            <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">{{ option }}</mat-option>\n\n        </mat-autocomplete>\n\n    </mat-chip-list>\n\n</mat-form-field>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":40,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":42,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":43,"character":5}}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":5},"arguments":["matAutocomplete",{"static":true}]}]}],"matChipList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":5},"arguments":["matChipList",{"static":true}]}]}],"matInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":47,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":47,"character":15},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":51,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MAT_AUTOCOMPLETE_DEFAULT_OPTIONS","line":51,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":52,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/chips","name":"MAT_CHIPS_DEFAULT_OPTIONS","line":52,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":53,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_LABEL_GLOBAL_OPTIONS","line":53,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":53,"character":51}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":54,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_RIPPLE_GLOBAL_OPTIONS","line":54,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":54,"character":52}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":49,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":50,"character":45},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteDefaultOptions","line":51,"character":87},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsDefaultOptions","line":52,"character":73},{"__symbolic":"reference","module":"@angular/material/core","name":"LabelOptions","line":53,"character":84},{"__symbolic":"reference","module":"@angular/material/core","name":"RippleGlobalOptions","line":54,"character":86}]}],"onChipInputTokenEnd":[{"__symbolic":"method"}],"onChipSelected":[{"__symbolic":"method"}],"onChipRemoved":[{"__symbolic":"method"}]}},"DynamicMaterialDatePickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":18,"character":56},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"dynamic-material-datepicker","template":"<mat-form-field [appearance]=\"model.getAdditional('appearance', 'legacy')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <input matInput\n           [autofocus]=\"model.autoFocus\"\n           [formControlName]=\"model.id\"\n           [id]=\"elementId\"\n           [max]=\"model.max\"\n           [matDatepicker]=\"matDatepicker\"\n           [min]=\"model.min\"\n           [name]=\"model.name\"\n           [ngClass]=\"getClass('element', 'control')\"\n           [placeholder]=\"model.placeholder\"\n           [readonly]=\"model.readOnly\"\n           [required]=\"model.required\"\n           (blur)=\"onBlur($event)\"\n           (dateChange)=\"onChange($event)\"\n           (dateInput)=\"onCustomEvent($event, 'dateInput')\"\n           (focus)=\"onFocus($event)\"/>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n\n    <mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle>\n\n    <mat-datepicker #matDatepicker\n                    [opened]=\"model.getAdditional('opened', false)\"\n                    [startAt]=\"model.focusedDate\"\n                    [startView]=\"model.getAdditional('startView', 'month')\"\n                    [touchUi]=\"model.getAdditional('touchUi', false)\"\n                    (closed)=\"onCustomEvent($event, 'closed')\"\n                    (monthSelected)=\"onCustomEvent($event, 'monthSelected')\"\n                    (opened)=\"onCustomEvent($event, 'opened')\"\n                    (yearSelected)=\"onCustomEvent($event, 'yearSelected')\"></mat-datepicker>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":5}}]}],"matDatePicker":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":5},"arguments":["matDatepicker",{"static":true}]}]}],"matInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":30,"character":15},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":34,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_LABEL_GLOBAL_OPTIONS","line":34,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":34,"character":51}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":32,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":33,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"LabelOptions","line":34,"character":84}]}]}},"DynamicMaterialFormArrayComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormArrayComponent","line":16,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"dynamic-material-form-array","template":"<ng-container [formGroup]=\"group\">\n\n    <div [formArrayName]=\"model.id\" [id]=\"elementId\" [ngClass]=\"getClass('element', 'control')\">\n\n        <div *ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\"\n             [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\">\n\n            <ng-container *ngTemplateOutlet=\"startTemplate?.templateRef; context: groupModel\"></ng-container>\n\n            <dynamic-material-form-control *ngFor=\"let _model of groupModel.group\"\n                                           [context]=\"groupModel\"\n                                           [group]=\"array.at(idx)\"\n                                           [hidden]=\"_model.hidden\"\n                                           [layout]=\"layout\"\n                                           [model]=\"_model\"\n                                           [templates]=\"templates\"\n                                           [ngClass]=\"[getClass('element', 'host', _model), getClass('grid', 'host', _model),\n                                                       getClass('element','children'), getClass('grid','children')]\"\n                                           (blur)=\"onBlur($event)\"\n                                           (change)=\"onChange($event)\"\n                                           (focus)=\"onFocus($event)\"\n                                           (matEvent)=\"onCustomEvent($event, null, true)\"></dynamic-material-form-control>\n\n            <ng-container *ngTemplateOutlet=\"endTemplate?.templateRef; context: groupModel\"></ng-container>\n\n        </div>\n\n    </div>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":28,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":29,"character":45}]}]}},"DynamicMaterialFormGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":16,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"dynamic-material-form-group","template":"<ng-container [formGroup]=\"group\">\n\n    <div role=\"group\"\n         [formGroupName]=\"model.id\"\n         [id]=\"elementId\"\n         [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\">\n\n        <dynamic-material-form-control *ngFor=\"let _model of model.group\"\n                                       [group]=\"control\"\n                                       [hidden]=\"_model.hidden\"\n                                       [layout]=\"layout\"\n                                       [model]=\"_model\"\n                                       [templates]=\"templates\"\n                                       [ngClass]=\"[getClass('element', 'host', _model), getClass('grid', 'host', _model),\n                                                   getClass('element','children'), getClass('grid','children')]\"\n                                       (blur)=\"onBlur($event)\"\n                                       (change)=\"onChange($event)\"\n                                       (focus)=\"onFocus($event)\"\n                                       (matEvent)=\"onCustomEvent($event, null, true)\"></dynamic-material-form-control>\n    </div>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":28,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":29,"character":45}]}]}},"DynamicMaterialInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"DynamicMaterialFormInputControlComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"dynamic-material-input","template":"<mat-form-field [appearance]=\"model.getAdditional('appearance', 'legacy')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid','control')\"\n                [textMask]=\"{mask: (model.mask || false), showMask: model.mask && !(model.placeholder)}\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <input matInput\n           [attr.accept]=\"model.accept\"\n           [attr.max]=\"model.max\"\n           [attr.min]=\"model.min\"\n           [attr.multiple]=\"model.multiple\"\n           [attr.step]=\"model.step\"\n           [autocomplete]=\"model.autoComplete\"\n           [autofocus]=\"model.autoFocus\"\n           [errorStateMatcher]=\"model.getAdditional('errorStateMatcher', errorStateMatcher)\"\n           [formControlName]=\"model.id\"\n           [id]=\"elementId\"\n           [maxlength]=\"model.maxLength\"\n           [matAutocomplete]=\"matAutocomplete\"\n           [minlength]=\"model.minLength\"\n           [name]=\"model.name\"\n           [ngClass]=\"getClass('element', 'control')\"\n           [pattern]=\"model.pattern\"\n           [placeholder]=\"model.placeholder\"\n           [readonly]=\"model.readOnly\"\n           [required]=\"model.required\"\n           [spellcheck]=\"model.spellCheck\"\n           [tabindex]=\"model.tabIndex\"\n           [type]=\"model.inputType\"\n           (blur)=\"onBlur($event)\"\n           (change)=\"onChange($event)\"\n           (focus)=\"onFocus($event)\"/>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-hint *ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n\n<mat-autocomplete #matAutocomplete=\"matAutocomplete\"\n                  [autoActiveFirstOption]=\"model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])\"\n                  [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                  [displayWith]=\"model.getAdditional('displayWith', null)\"\n                  (optionSelected)=\"onChange($event)\">\n\n    <ng-container *ngIf=\"model.getAdditional('matAutocomplete', null) === null; else displayWith\">\n        <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">{{ option }}</mat-option>\n    </ng-container>\n    <ng-template #displayWith>\n        <mat-option *ngFor=\"let option of model.list$ | async\" [value]=\"option\">\n            {{ option[model.getAdditional('optionLabel', 'label')] }}\n        </mat-option>\n    </ng-template>\n\n</mat-autocomplete>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":5}}]}],"matAutocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":29,"character":5},"arguments":["matAutocomplete",{"static":true}]}]}],"matInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":30,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":30,"character":15},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":34,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":34,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":35,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MAT_AUTOCOMPLETE_DEFAULT_OPTIONS","line":35,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":36,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_LABEL_GLOBAL_OPTIONS","line":36,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":36,"character":51}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":37,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_RIPPLE_GLOBAL_OPTIONS","line":37,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":37,"character":52}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":32,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":33,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":34,"character":69},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteDefaultOptions","line":35,"character":87},{"__symbolic":"reference","module":"@angular/material/core","name":"LabelOptions","line":36,"character":84},{"__symbolic":"reference","module":"@angular/material/core","name":"RippleGlobalOptions","line":37,"character":86}]}]}},"DynamicMaterialRadioGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":16,"character":56},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"dynamic-material-radio-group","template":"<ng-container [formGroup]=\"group\">\n\n    <mat-radio-group #matRadioGroup\n                     [formControlName]=\"model.id\"\n                     [id]=\"elementId\"\n                     [labelPosition]=\"model.getAdditional('labelPosition', 'after')\"\n                     [name]=\"model.name\"\n                     [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                     (blur)=\"onBlur($event)\"\n                     (change)=\"onChange($event)\"\n                     (focus)=\"onFocus($event)\">\n\n        <mat-radio-button *ngFor=\"let option of model.options$ | async\"\n                          [name]=\"model.name\"\n                          [ngClass]=\"getClass('element', 'option')\"\n                          [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button>\n\n    </mat-radio-group>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"matRadioGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":5},"arguments":["matRadioGroup",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":29,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":30,"character":45}]}]}},"DynamicMaterialSelectComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":17,"character":52},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"dynamic-material-select","template":"<mat-form-field [appearance]=\"model.getAdditional('appearance', 'legacy')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [ngClass]=\"getClass('grid', 'control')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')\"\n                [formGroup]=\"group\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <span *ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span>\n\n    <mat-select #matSelect\n                [compareWith]=\"model.compareWithFn\"\n                [disableOptionCentering]=\"model.getAdditional('disableOptionCentering', false)\"\n                [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                [errorStateMatcher]=\"model.getAdditional('errorStateMatcher', errorStateMatcher)\"\n                [formControlName]=\"model.id\"\n                [id]=\"elementId\"\n                [multiple]=\"model.multiple\"\n                [ngClass]=\"getClass('element', 'control')\"\n                [placeholder]=\"model.placeholder\"\n                [required]=\"model.required\"\n                (openedChange)=\"onCustomEvent($event, 'openedChange')\"\n                (selectionChange)=\"onChange($event)\">\n\n        <mat-option *ngFor=\"let option of model.options$ | async\"\n                    [disabled]=\"option.disabled\"\n                    [ngClass]=\"getClass('element', 'option')\"\n                    [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option>\n    </mat-select>\n\n    <span *ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"matSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":["matSelect",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":32,"character":24}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":33,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_LABEL_GLOBAL_OPTIONS","line":33,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":33,"character":51}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":34,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_RIPPLE_GLOBAL_OPTIONS","line":34,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":34,"character":52}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":30,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":31,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"ErrorStateMatcher","line":32,"character":69},{"__symbolic":"reference","module":"@angular/material/core","name":"LabelOptions","line":33,"character":84},{"__symbolic":"reference","module":"@angular/material/core","name":"RippleGlobalOptions","line":34,"character":86}]}]}},"DynamicMaterialSlideToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":17,"character":57},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"dynamic-material-slide-toggle","template":"<ng-container [formGroup]=\"group\">\n\n    <mat-slide-toggle #matSlideToggle\n                      [checked]=\"model.checked\"\n                      [color]=\"model.getAdditional('color', 'accent')\"\n                      [disableRipple]=\"model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)\"\n                      [formControlName]=\"model.id\"\n                      [id]=\"elementId\"\n                      [labelPosition]=\"model.labelPosition || 'after'\"\n                      [name]=\"model.name\"\n                      [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\"\n                      (change)=\"onChange($event)\"\n                      (dragChange)=\"onCustomEvent($event, 'dragChange')\"\n                      (toggleChange)=\"onCustomEvent($event, 'toggleChange')\">\n\n        <span *ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span>\n\n        <span *ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span>\n\n    </mat-slide-toggle>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"matSlideToggle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":["matSlideToggle",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_RIPPLE_GLOBAL_OPTIONS","line":32,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":32,"character":52}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":30,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":31,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"RippleGlobalOptions","line":32,"character":86}]}]}},"DynamicMaterialSliderComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlComponent","line":16,"character":52},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"dynamic-material-slider","template":"<ng-container [formGroup]=\"group\">\n\n    <mat-slider #matSlider\n                [color]=\"model.getAdditional('color', 'accent')\"\n                [formControlName]=\"model.id\"\n                [id]=\"elementId\"\n                [invert]=\"model.getAdditional('invert', false)\"\n                [min]=\"model.min\"\n                [max]=\"model.max\"\n                [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"\n                [step]=\"model.step\"\n                [tabIndex]=\"model.tabIndex\"\n                [thumbLabel]=\"model.getAdditional('thumbLabel', true)\"\n                [tickInterval]=\"model.getAdditional('tickInterval', 1)\"\n                [vertical]=\"model.vertical\"\n                (change)=\"onChange($event)\"\n                (input)=\"onCustomEvent($event, 'input')\"></mat-slider>\n\n</ng-container>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":22,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"matSlider":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":5},"arguments":["matSlider",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":29,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":30,"character":45}]}]}},"DynamicMaterialTextAreaComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"DynamicMaterialFormInputControlComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"dynamic-material-textarea","template":"<mat-form-field [appearance]=\"model.getAdditional('appearance', 'legacy')\"\n                [color]=\"model.getAdditional('color', 'primary')\"\n                [floatLabel]=\"model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')\"\n                [formGroup]=\"group\"\n                [hideRequiredMarker]=\"model.getAdditional('hideRequiredMarker', false)\"\n                [ngClass]=\"getClass('grid', 'control')\">\n\n    <ng-container *ngIf=\"model.label\" ngProjectAs=\"mat-label\">\n\n        <mat-label [innerHTML]=\"model.label\"></mat-label>\n\n    </ng-container>\n\n    <textarea matInput\n              [cdkTextareaAutosize]=\"model.getAdditional('cdkTextareaAutosize', true)\"\n              [cols]=\"model.cols\"\n              [formControlName]=\"model.id\"\n              [id]=\"elementId\"\n              [maxlength]=\"model.maxLength\"\n              [minlength]=\"model.minLength\"\n              [name]=\"model.name\"\n              [ngClass]=\"getClass('element', 'control')\"\n              [placeholder]=\"model.placeholder\"\n              [readonly]=\"model.readOnly\"\n              [required]=\"model.required\"\n              [rows]=\"model.rows\"\n              [spellcheck]=\"model.spellCheck\"\n              [tabindex]=\"model.tabIndex\"\n              [wrap]=\"model.wrap\"\n              (blur)=\"onBlur($event)\"\n              (change)=\"onChange($event)\"\n              (focus)=\"onFocus($event)\"></textarea>\n\n    <mat-hint *ngIf=\"model.hint !== null\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint>\n\n    <mat-hint *ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint>\n\n    <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n</mat-form-field>\n"}]}],"members":{"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5}}]}],"matInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":28,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":28,"character":15},{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":32,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_LABEL_GLOBAL_OPTIONS","line":32,"character":24}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":32,"character":51}}]],"parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":30,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":31,"character":45},{"__symbolic":"reference","module":"@angular/material/core","name":"LabelOptions","line":32,"character":84}]}]}},"DynamicMaterialFormComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormComponent","line":17,"character":50},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"dynamic-material-form","template":"<dynamic-material-form-control *ngFor=\"let model of formModel; trackBy: trackByFn\"\n                               [group]=\"formGroup\"\n                               [hidden]=\"model.hidden\"\n                               [layout]=\"formLayout\"\n                               [model]=\"model\"\n                               [ngClass]=\"[getClass(model, 'element', 'host'), getClass(model, 'grid', 'host')]\"\n                               [templates]=\"templates\"\n                               (blur)=\"onEvent($event, 'blur')\"\n                               (change)=\"onEvent($event, 'change')\"\n                               (focus)=\"onEvent($event, 'focus')\"\n                               (matEvent)=\"onEvent($event, 'custom')\"></dynamic-material-form-control>"}]}],"members":{"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5},"arguments":["group"]}]}],"formModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":5},"arguments":["model"]}]}],"formLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":5},"arguments":["layout"]}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":23,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":24,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":25,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":26,"character":5},"arguments":["matEvent"]}]}],"templates":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":28,"character":5},"arguments":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicTemplateDirective","line":28,"character":21}]}]}],"components":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":30,"character":5},"arguments":[{"__symbolic":"reference","name":"DynamicMaterialFormControlContainerComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormService","line":32,"character":39},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":32,"character":84}]}]}},"DynamicMaterialFormControlContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormControlContainerComponent","line":55,"character":66},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":51,"character":1},"arguments":[{"selector":"dynamic-material-form-control","template":"<div [formGroup]=\"group\" [ngClass]=\"['ng-dynamic-forms-'+model.type.toLowerCase(), getClass('element', 'container'), getClass('grid', 'container')]\">\n\n    <label *ngIf=\"!hasMatFormField && !isCheckbox && hasLabel\"\n           [for]=\"elementId\"\n           [innerHTML]=\"model.label\"\n           [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label>\n\n    <ng-container *ngTemplateOutlet=\"startTemplate?.templateRef; context: model\"></ng-container>\n\n    <ng-container #componentViewContainer></ng-container>\n\n    <ng-container *ngIf=\"!hasMatFormField\">\n\n        <mat-error *ngFor=\"let message of errorMessages\">{{ message }}</mat-error>\n\n    </ng-container>\n\n    <ng-container *ngTemplateOutlet=\"endTemplate?.templateRef; context: model\"></ng-container>\n\n    <ng-content></ng-content>\n\n</div>\n"}]}],"members":{"contentTemplateList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":57,"character":5},"arguments":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicTemplateDirective","line":57,"character":21}]}]}],"inputTemplateList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5},"arguments":["templates"]}]}],"context":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":60,"character":5}}]}],"group":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"layout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":5}}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":5}}]}],"change":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":66,"character":5}}]}],"focus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":67,"character":5}}]}],"customEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":68,"character":5},"arguments":["matEvent"]}]}],"componentViewContainerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":70,"character":5},"arguments":["componentViewContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":70,"character":49},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":72,"character":52},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormLayoutService","line":73,"character":41},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormValidationService","line":74,"character":45},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormComponentService","line":75,"character":44},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormRelationService","line":76,"character":43}]}]}},"materialUIFormControlMapFn":{"__symbolic":"function"},"DynamicFormsMaterialUIModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":29,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/autocomplete","name":"MatAutocompleteModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":37,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":38,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":40,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":41,"character":8},{"__symbolic":"reference","module":"@angular/material/slide-toggle","name":"MatSlideToggleModule","line":42,"character":8},{"__symbolic":"reference","module":"angular2-text-mask","name":"TextMaskModule","line":43,"character":8},{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormsCoreModule","line":44,"character":8}],"declarations":[{"__symbolic":"reference","name":"DynamicMaterialCheckboxComponent"},{"__symbolic":"reference","name":"DynamicMaterialChipsComponent"},{"__symbolic":"reference","name":"DynamicMaterialDatePickerComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormArrayComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormControlContainerComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialInputComponent"},{"__symbolic":"reference","name":"DynamicMaterialRadioGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialSelectComponent"},{"__symbolic":"reference","name":"DynamicMaterialSlideToggleComponent"},{"__symbolic":"reference","name":"DynamicMaterialSliderComponent"},{"__symbolic":"reference","name":"DynamicMaterialTextAreaComponent"}],"entryComponents":[{"__symbolic":"reference","name":"DynamicMaterialCheckboxComponent"},{"__symbolic":"reference","name":"DynamicMaterialChipsComponent"},{"__symbolic":"reference","name":"DynamicMaterialDatePickerComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormArrayComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialInputComponent"},{"__symbolic":"reference","name":"DynamicMaterialRadioGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialSelectComponent"},{"__symbolic":"reference","name":"DynamicMaterialSlideToggleComponent"},{"__symbolic":"reference","name":"DynamicMaterialSliderComponent"},{"__symbolic":"reference","name":"DynamicMaterialTextAreaComponent"}],"exports":[{"__symbolic":"reference","module":"@ng-dynamic-forms/core","name":"DynamicFormsCoreModule","line":75,"character":8},{"__symbolic":"reference","name":"DynamicMaterialCheckboxComponent"},{"__symbolic":"reference","name":"DynamicMaterialChipsComponent"},{"__symbolic":"reference","name":"DynamicMaterialDatePickerComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormArrayComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormControlContainerComponent"},{"__symbolic":"reference","name":"DynamicMaterialFormGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialInputComponent"},{"__symbolic":"reference","name":"DynamicMaterialRadioGroupComponent"},{"__symbolic":"reference","name":"DynamicMaterialSelectComponent"},{"__symbolic":"reference","name":"DynamicMaterialSlideToggleComponent"},{"__symbolic":"reference","name":"DynamicMaterialSliderComponent"},{"__symbolic":"reference","name":"DynamicMaterialTextAreaComponent"}]}]}],"members":{}}},"origins":{"DynamicMaterialFormInputControlComponent":"./lib/dynamic-material-form-input-control.component","DynamicMaterialCheckboxComponent":"./lib/checkbox/dynamic-material-checkbox.component","DynamicMaterialChipsComponent":"./lib/chips/dynamic-material-chips.component","DynamicMaterialDatePickerComponent":"./lib/datepicker/dynamic-material-datepicker.component","DynamicMaterialFormArrayComponent":"./lib/form-array/dynamic-material-form-array.component","DynamicMaterialFormGroupComponent":"./lib/form-group/dynamic-material-form-group.component","DynamicMaterialInputComponent":"./lib/input/dynamic-material-input.component","DynamicMaterialRadioGroupComponent":"./lib/radio-group/dynamic-material-radio-group.component","DynamicMaterialSelectComponent":"./lib/select/dynamic-material-select.component","DynamicMaterialSlideToggleComponent":"./lib/slide-toggle/dynamic-material-slide-toggle.component","DynamicMaterialSliderComponent":"./lib/slider/dynamic-material-slider.component","DynamicMaterialTextAreaComponent":"./lib/textarea/dynamic-material-textarea.component","DynamicMaterialFormComponent":"./lib/dynamic-material-form.component","DynamicMaterialFormControlContainerComponent":"./lib/dynamic-material-form-control-container.component","materialUIFormControlMapFn":"./lib/dynamic-material-form-control-container.component","DynamicFormsMaterialUIModule":"./lib/dynamic-material-form-ui.module"},"importAs":"@ng-dynamic-forms/ui-material"}