@ng-dynamic-forms/ui-material - npm Package Compare versions

Comparing version 5.3.0 to 5.4.0

@ng-dynamic-forms/ui-material.es.js

		/*!
		@ng-dynamic-forms/ui-material 5.3.0 2017-12-19 19:02 UTC
		@ng-dynamic-forms/ui-material 5.4.0 2017-12-22 12:26 UTC
		Copyright (c) 2016-2017, Udo Schöfer http://www.udos86.de
		@@ -244,3 +244,3 @@
		selector: "dynamic-material-form-control,dynamic-form-material-control",
		template: "<div [formGroup]=\"group\" [ngClass]=\"[getClass('element', 'container'), getClass('grid', 'container')]\"><label ngIf=\"model.label && type !== 2\" [for]=\"model.id\" [innerHTML]=\"model.label\" [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label><ng-container ngTemplateOutlet=\"templates[0]?.templateRef; context: model\"></ng-container><ng-container [ngSwitch]=\"type\"><div ngSwitchCase=\"1\" [dynamicId]=\"bindId && model.id\" [formArrayName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><div ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\" [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\"><dynamic-material-form-control ngFor=\"let controlModel of groupModel.group\" [bindId]=\"false\" [context]=\"groupModel\" [group]=\"control.at(idx)\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control><ng-container ngTemplateOutlet=\"templates[2]?.templateRef; context: groupModel\"></ng-container></div></div><mat-checkbox ngSwitchCase=\"2\" #matCheckbox [checked]=\"model.checked\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [indeterminate]=\"model.indeterminate\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\" (indeterminateChange)=\"onMatEvent($event, 'indeterminateChange')\"><span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span></mat-checkbox><mat-form-field ngSwitchCase=\"3\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><mat-chip-list #matChipList [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [multiple]=\"true\"><mat-chip ngFor=\"let chip of chipList; let index = index\" [selectable]=\"false\" (removed)=\"onChipRemoved(chip, index)\"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]=\"model.placeholder\" [matChipInputFor]=\"matChipList\" [matChipInputAddOnBlur]=\"true\" [matChipInputSeparatorKeyCodes]=\"[13, 188]\" (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase=\"4\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [autofocus]=\"model.autoFocus\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [max]=\"model.max\" [matDatepicker]=\"matDatepicker\" [min]=\"model.min\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" (blur)=\"onBlur($event)\" (dateChange)=\"onValueChange($event)\" (dateInput)=\"onCustomEvent($event, 'dateInput')\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]=\"getAdditional('opened', false)\" [startAt]=\"model.focusedDate\" [startView]=\"getAdditional('startView', 'month')\" [touchUi]=\"getAdditional('touchUi', false)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"></mat-datepicker><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase=\"5\" role=\"group\" [dynamicId]=\"bindId && model.id\" [formGroupName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><dynamic-material-form-control ngFor=\"let controlModel of model.group\" [group]=\"control\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control></div><ng-container ngSwitchCase=\"6\"><mat-form-field [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [attr.accept]=\"model.accept\" [attr.list]=\"model.listId\" [attr.max]=\"model.max\" [attr.min]=\"model.min\" [attr.multiple]=\"model.multiple\" [attr.step]=\"model.step\" [autocomplete]=\"model.autoComplete\" [autofocus]=\"model.autoFocus\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [maxlength]=\"model.maxLength\" [matAutocomplete]=\"matAutocomplete\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [pattern]=\"model.pattern\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [type]=\"model.inputType\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete=\"matAutocomplete\" (optionSelected)=\"onValueChange($event)\"><mat-option ngFor=\"let option of model.list\" [value]=\"option\">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase=\"7\" #matRadioGroup [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"><mat-radio-button ngFor=\"let option of model.options$ \| async\" [labelPosition]=\"'after'\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase=\"8\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span><mat-select #matSelect [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [multiple]=\"model.multiple\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [required]=\"model.required\" (change)=\"onValueChange($event)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"><mat-option ngFor=\"let option of model.options$ \| async\" [ngClass]=\"getClass('element','option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option></mat-select><span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"showErrorMessages\">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase=\"9\" #matSlider [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [invert]=\"getAdditional('invert', false)\" [min]=\"model.min\" [max]=\"model.max\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" [step]=\"model.step\" [tabIndex]=\"model.tabIndex\" [thumbLabel]=\"getAdditional('thumbLabel', true)\" [tickInterval]=\"getAdditional('tickInterval', 1)\" [vertical]=\"model.vertical\" (change)=\"onValueChange($event)\" (input)=\"onCustomEvent($event, 'input')\"></mat-slider><mat-slide-toggle ngSwitchCase=\"10\" #matSlideToggle [checked]=\"model.checked\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\" (change)=\"onValueChange($event)\"><span ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span> <span ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span></mat-slide-toggle><mat-form-field ngSwitchCase=\"11\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><textarea matInput [dynamicId]=\"bindId && model.id\" [cols]=\"model.cols\" [formControlName]=\"model.id\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [rows]=\"model.rows\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [wrap]=\"model.wrap\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"></textarea><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf=\"!hasMatFormField && hasErrorMessaging\"><mat-error ngFor=\"let message of errorMessages\">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet=\"templates[1]?.templateRef; context: model\"></ng-container><ng-content></ng-content></div>"
		template: "<div [formGroup]=\"group\" [ngClass]=\"[getClass('element', 'container'), getClass('grid', 'container')]\"><label ngIf=\"model.label && !hasMatFormField && type !== 2\" [for]=\"model.id\" [innerHTML]=\"model.label\" [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label><ng-container ngTemplateOutlet=\"templates[0]?.templateRef; context: model\"></ng-container><ng-container [ngSwitch]=\"type\"><div ngSwitchCase=\"1\" [dynamicId]=\"bindId && model.id\" [formArrayName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><div ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\" [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\"><dynamic-material-form-control ngFor=\"let controlModel of groupModel.group\" [bindId]=\"false\" [context]=\"groupModel\" [group]=\"control.at(idx)\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control><ng-container ngTemplateOutlet=\"templates[2]?.templateRef; context: groupModel\"></ng-container></div></div><mat-checkbox ngSwitchCase=\"2\" #matCheckbox [checked]=\"model.checked\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [indeterminate]=\"model.indeterminate\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\" (indeterminateChange)=\"onMatEvent($event, 'indeterminateChange')\"><span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span></mat-checkbox><mat-form-field ngSwitchCase=\"3\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><mat-chip-list #matChipList [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [multiple]=\"true\"><mat-chip ngFor=\"let chip of chipList; let index = index\" [selectable]=\"false\" (removed)=\"onChipRemoved(chip, index)\"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]=\"model.placeholder\" [matChipInputFor]=\"matChipList\" [matChipInputAddOnBlur]=\"true\" [matChipInputSeparatorKeyCodes]=\"[13, 188]\" (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase=\"4\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [autofocus]=\"model.autoFocus\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [max]=\"model.max\" [matDatepicker]=\"matDatepicker\" [min]=\"model.min\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" (blur)=\"onBlur($event)\" (dateChange)=\"onValueChange($event)\" (dateInput)=\"onCustomEvent($event, 'dateInput')\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]=\"getAdditional('opened', false)\" [startAt]=\"model.focusedDate\" [startView]=\"getAdditional('startView', 'month')\" [touchUi]=\"getAdditional('touchUi', false)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"></mat-datepicker><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase=\"5\" role=\"group\" [dynamicId]=\"bindId && model.id\" [formGroupName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><dynamic-material-form-control ngFor=\"let controlModel of model.group\" [group]=\"control\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control></div><ng-container ngSwitchCase=\"6\"><mat-form-field [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [attr.accept]=\"model.accept\" [attr.list]=\"model.listId\" [attr.max]=\"model.max\" [attr.min]=\"model.min\" [attr.multiple]=\"model.multiple\" [attr.step]=\"model.step\" [autocomplete]=\"model.autoComplete\" [autofocus]=\"model.autoFocus\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [maxlength]=\"model.maxLength\" [matAutocomplete]=\"matAutocomplete\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [pattern]=\"model.pattern\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [type]=\"model.inputType\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete=\"matAutocomplete\" (optionSelected)=\"onValueChange($event)\"><mat-option ngFor=\"let option of model.list\" [value]=\"option\">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase=\"7\" #matRadioGroup [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"><mat-radio-button ngFor=\"let option of model.options$ \| async\" [labelPosition]=\"'after'\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase=\"8\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span><mat-select #matSelect [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [multiple]=\"model.multiple\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [required]=\"model.required\" (change)=\"onValueChange($event)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"><mat-option ngFor=\"let option of model.options$ \| async\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option></mat-select><span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"showErrorMessages\">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase=\"9\" #matSlider [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [invert]=\"getAdditional('invert', false)\" [min]=\"model.min\" [max]=\"model.max\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" [step]=\"model.step\" [tabIndex]=\"model.tabIndex\" [thumbLabel]=\"getAdditional('thumbLabel', true)\" [tickInterval]=\"getAdditional('tickInterval', 1)\" [vertical]=\"model.vertical\" (change)=\"onValueChange($event)\" (input)=\"onCustomEvent($event, 'input')\"></mat-slider><mat-slide-toggle ngSwitchCase=\"10\" #matSlideToggle [checked]=\"model.checked\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\" (change)=\"onValueChange($event)\"><span ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span> <span ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span></mat-slide-toggle><mat-form-field ngSwitchCase=\"11\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><textarea matInput [cols]=\"model.cols\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [rows]=\"model.rows\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [wrap]=\"model.wrap\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"></textarea><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf=\"!hasMatFormField && hasErrorMessaging\"><mat-error ngFor=\"let message of errorMessages\">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet=\"templates[1]?.templateRef; context: model\"></ng-container><ng-content></ng-content></div>"
		},] },
		@@ -247,0 +247,0 @@ ];

bundles/ui-material.umd.js

		/*!
		@ng-dynamic-forms/ui-material 5.3.0 2017-12-19 19:02 UTC
		@ng-dynamic-forms/ui-material 5.4.0 2017-12-22 12:26 UTC
		Copyright (c) 2016-2017, Udo Schöfer http://www.udos86.de
		@@ -244,3 +244,3 @@
		selector: "dynamic-material-form-control,dynamic-form-material-control",
		template: "<div [formGroup]=\"group\" [ngClass]=\"[getClass('element', 'container'), getClass('grid', 'container')]\"><label ngIf=\"model.label && type !== 2\" [for]=\"model.id\" [innerHTML]=\"model.label\" [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label><ng-container ngTemplateOutlet=\"templates[0]?.templateRef; context: model\"></ng-container><ng-container [ngSwitch]=\"type\"><div ngSwitchCase=\"1\" [dynamicId]=\"bindId && model.id\" [formArrayName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><div ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\" [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\"><dynamic-material-form-control ngFor=\"let controlModel of groupModel.group\" [bindId]=\"false\" [context]=\"groupModel\" [group]=\"control.at(idx)\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control><ng-container ngTemplateOutlet=\"templates[2]?.templateRef; context: groupModel\"></ng-container></div></div><mat-checkbox ngSwitchCase=\"2\" #matCheckbox [checked]=\"model.checked\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [indeterminate]=\"model.indeterminate\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\" (indeterminateChange)=\"onMatEvent($event, 'indeterminateChange')\"><span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span></mat-checkbox><mat-form-field ngSwitchCase=\"3\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><mat-chip-list #matChipList [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [multiple]=\"true\"><mat-chip ngFor=\"let chip of chipList; let index = index\" [selectable]=\"false\" (removed)=\"onChipRemoved(chip, index)\"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]=\"model.placeholder\" [matChipInputFor]=\"matChipList\" [matChipInputAddOnBlur]=\"true\" [matChipInputSeparatorKeyCodes]=\"[13, 188]\" (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase=\"4\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [autofocus]=\"model.autoFocus\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [max]=\"model.max\" [matDatepicker]=\"matDatepicker\" [min]=\"model.min\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" (blur)=\"onBlur($event)\" (dateChange)=\"onValueChange($event)\" (dateInput)=\"onCustomEvent($event, 'dateInput')\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]=\"getAdditional('opened', false)\" [startAt]=\"model.focusedDate\" [startView]=\"getAdditional('startView', 'month')\" [touchUi]=\"getAdditional('touchUi', false)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"></mat-datepicker><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase=\"5\" role=\"group\" [dynamicId]=\"bindId && model.id\" [formGroupName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><dynamic-material-form-control ngFor=\"let controlModel of model.group\" [group]=\"control\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control></div><ng-container ngSwitchCase=\"6\"><mat-form-field [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [attr.accept]=\"model.accept\" [attr.list]=\"model.listId\" [attr.max]=\"model.max\" [attr.min]=\"model.min\" [attr.multiple]=\"model.multiple\" [attr.step]=\"model.step\" [autocomplete]=\"model.autoComplete\" [autofocus]=\"model.autoFocus\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [maxlength]=\"model.maxLength\" [matAutocomplete]=\"matAutocomplete\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [pattern]=\"model.pattern\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [type]=\"model.inputType\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete=\"matAutocomplete\" (optionSelected)=\"onValueChange($event)\"><mat-option ngFor=\"let option of model.list\" [value]=\"option\">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase=\"7\" #matRadioGroup [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"><mat-radio-button ngFor=\"let option of model.options$ \| async\" [labelPosition]=\"'after'\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase=\"8\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span><mat-select #matSelect [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [multiple]=\"model.multiple\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [required]=\"model.required\" (change)=\"onValueChange($event)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"><mat-option ngFor=\"let option of model.options$ \| async\" [ngClass]=\"getClass('element','option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option></mat-select><span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"showErrorMessages\">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase=\"9\" #matSlider [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [invert]=\"getAdditional('invert', false)\" [min]=\"model.min\" [max]=\"model.max\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" [step]=\"model.step\" [tabIndex]=\"model.tabIndex\" [thumbLabel]=\"getAdditional('thumbLabel', true)\" [tickInterval]=\"getAdditional('tickInterval', 1)\" [vertical]=\"model.vertical\" (change)=\"onValueChange($event)\" (input)=\"onCustomEvent($event, 'input')\"></mat-slider><mat-slide-toggle ngSwitchCase=\"10\" #matSlideToggle [checked]=\"model.checked\" [dynamicId]=\"bindId && model.id\" [formControlName]=\"model.id\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\" (change)=\"onValueChange($event)\"><span ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span> <span ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span></mat-slide-toggle><mat-form-field ngSwitchCase=\"11\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><textarea matInput [dynamicId]=\"bindId && model.id\" [cols]=\"model.cols\" [formControlName]=\"model.id\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [rows]=\"model.rows\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [wrap]=\"model.wrap\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"></textarea><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf=\"!hasMatFormField && hasErrorMessaging\"><mat-error ngFor=\"let message of errorMessages\">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet=\"templates[1]?.templateRef; context: model\"></ng-container><ng-content></ng-content></div>"
		template: "<div [formGroup]=\"group\" [ngClass]=\"[getClass('element', 'container'), getClass('grid', 'container')]\"><label ngIf=\"model.label && !hasMatFormField && type !== 2\" [for]=\"model.id\" [innerHTML]=\"model.label\" [ngClass]=\"[getClass('element', 'label'), getClass('grid', 'label')]\"></label><ng-container ngTemplateOutlet=\"templates[0]?.templateRef; context: model\"></ng-container><ng-container [ngSwitch]=\"type\"><div ngSwitchCase=\"1\" [dynamicId]=\"bindId && model.id\" [formArrayName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><div ngFor=\"let groupModel of model.groups; let idx = index\" role=\"group\" [formGroupName]=\"idx\" [ngClass]=\"[getClass('element', 'group'), getClass('grid', 'group')]\"><dynamic-material-form-control ngFor=\"let controlModel of groupModel.group\" [bindId]=\"false\" [context]=\"groupModel\" [group]=\"control.at(idx)\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control><ng-container ngTemplateOutlet=\"templates[2]?.templateRef; context: groupModel\"></ng-container></div></div><mat-checkbox ngSwitchCase=\"2\" #matCheckbox [checked]=\"model.checked\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [indeterminate]=\"model.indeterminate\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\" (indeterminateChange)=\"onMatEvent($event, 'indeterminateChange')\"><span [ngClass]=\"getClass('element', 'label')\" [innerHTML]=\"model.label\"></span></mat-checkbox><mat-form-field ngSwitchCase=\"3\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><mat-chip-list #matChipList [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [multiple]=\"true\"><mat-chip ngFor=\"let chip of chipList; let index = index\" [selectable]=\"false\" (removed)=\"onChipRemoved(chip, index)\"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]=\"model.placeholder\" [matChipInputFor]=\"matChipList\" [matChipInputAddOnBlur]=\"true\" [matChipInputSeparatorKeyCodes]=\"[13, 188]\" (matChipInputTokenEnd)=\"onChipInputTokenEnd($event)\"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase=\"4\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [autofocus]=\"model.autoFocus\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [max]=\"model.max\" [matDatepicker]=\"matDatepicker\" [min]=\"model.min\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" (blur)=\"onBlur($event)\" (dateChange)=\"onValueChange($event)\" (dateInput)=\"onCustomEvent($event, 'dateInput')\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-datepicker-toggle matSuffix [for]=\"matDatepicker\"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]=\"getAdditional('opened', false)\" [startAt]=\"model.focusedDate\" [startView]=\"getAdditional('startView', 'month')\" [touchUi]=\"getAdditional('touchUi', false)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"></mat-datepicker><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase=\"5\" role=\"group\" [dynamicId]=\"bindId && model.id\" [formGroupName]=\"model.id\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\"><dynamic-material-form-control ngFor=\"let controlModel of model.group\" [group]=\"control\" [hasErrorMessaging]=\"controlModel.hasErrorMessages\" [layout]=\"layout\" [model]=\"controlModel\" [templates]=\"templateList\" [ngClass]=\"[getClass('element', 'host', controlModel), getClass('grid', 'host', controlModel)]\" (dfBlur)=\"onBlur($event)\" (dfChange)=\"onValueChange($event)\" (dfFocus)=\"onFocus($event)\" (matEvent)=\"onCustomEvent($event)\"></dynamic-material-form-control></div><ng-container ngSwitchCase=\"6\"><mat-form-field [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid','control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span> <input matInput [attr.accept]=\"model.accept\" [attr.list]=\"model.listId\" [attr.max]=\"model.max\" [attr.min]=\"model.min\" [attr.multiple]=\"model.multiple\" [attr.step]=\"model.step\" [autocomplete]=\"model.autoComplete\" [autofocus]=\"model.autoFocus\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [maxlength]=\"model.maxLength\" [matAutocomplete]=\"matAutocomplete\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [pattern]=\"model.pattern\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [type]=\"model.inputType\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"> <span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete=\"matAutocomplete\" (optionSelected)=\"onValueChange($event)\"><mat-option ngFor=\"let option of model.list\" [value]=\"option\">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase=\"7\" #matRadioGroup [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [name]=\"model.name\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"><mat-radio-button ngFor=\"let option of model.options$ \| async\" [labelPosition]=\"'after'\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase=\"8\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf=\"model.prefix\" matPrefix [innerHTML]=\"model.prefix\"></span><mat-select #matSelect [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [multiple]=\"model.multiple\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [required]=\"model.required\" (change)=\"onValueChange($event)\" (closed)=\"onCustomEvent($event, 'closed')\" (opened)=\"onCustomEvent($event, 'opened')\"><mat-option ngFor=\"let option of model.options$ \| async\" [ngClass]=\"getClass('element', 'option')\" [value]=\"option.value\"><span [innerHTML]=\"option.label\"></span></mat-option></mat-select><span ngIf=\"model.suffix\" matSuffix [innerHTML]=\"model.suffix\"></span><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"showErrorMessages\">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase=\"9\" #matSlider [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [invert]=\"getAdditional('invert', false)\" [min]=\"model.min\" [max]=\"model.max\" [ngClass]=\"[getClass('element', 'control'), getClass('grid', 'control')]\" [step]=\"model.step\" [tabIndex]=\"model.tabIndex\" [thumbLabel]=\"getAdditional('thumbLabel', true)\" [tickInterval]=\"getAdditional('tickInterval', 1)\" [vertical]=\"model.vertical\" (change)=\"onValueChange($event)\" (input)=\"onCustomEvent($event, 'input')\"></mat-slider><mat-slide-toggle ngSwitchCase=\"10\" #matSlideToggle [checked]=\"model.checked\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [labelPosition]=\"model.labelPosition \|\| 'after'\" [name]=\"model.name\" [ngClass]=\"[getClass('element','control'), getClass('grid','control')]\" (change)=\"onValueChange($event)\"><span ngIf=\"!model.checked\" [innerHTML]=\"model.offLabel\"></span> <span ngIf=\"model.checked\" [innerHTML]=\"model.onLabel\"></span></mat-slide-toggle><mat-form-field ngSwitchCase=\"11\" [color]=\"getAdditional('color', 'primary')\" [ngClass]=\"getClass('grid', 'control')\" [floatLabel]=\"getAdditional('floatLabel', 'auto')\"><ng-container ngIf=\"model.label\" ngProjectAs=\"mat-label\"><mat-label>{{ model.label }}</mat-label></ng-container><textarea matInput [cols]=\"model.cols\" [formControlName]=\"model.id\" [id]=\"bindId ? model.id : null\" [minlength]=\"model.minLength\" [name]=\"model.name\" [ngClass]=\"getClass('element', 'control')\" [placeholder]=\"model.placeholder\" [readonly]=\"model.readOnly\" [required]=\"model.required\" [rows]=\"model.rows\" [spellcheck]=\"model.spellCheck\" [tabindex]=\"model.tabIndex\" [wrap]=\"model.wrap\" (blur)=\"onBlur($event)\" (change)=\"onValueChange($event)\" (focus)=\"onFocus($event)\"></textarea><mat-hint ngIf=\"showHint\" align=\"start\" [innerHTML]=\"model.hint\"></mat-hint><mat-hint ngIf=\"showCharacterHint\" align=\"end\">{{ characterHint }}</mat-hint><ng-container ngFor=\"let message of errorMessages\" ngProjectAs=\"mat-error\"><mat-error ngIf=\"hasErrorMessaging\">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf=\"!hasMatFormField && hasErrorMessaging\"><mat-error ngFor=\"let message of errorMessages\">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet=\"templates[1]?.templateRef; context: model\"></ng-container><ng-content></ng-content></div>"
		},] },
		@@ -247,0 +247,0 @@ ];

bundles/ui-material.umd.min.js

		/*!
		@ng-dynamic-forms/ui-material 5.3.0 2017-12-19 19:02 UTC
		@ng-dynamic-forms/ui-material 5.4.0 2017-12-22 12:26 UTC
		Copyright (c) 2016-2017, Udo Schöfer http://www.udos86.de
		@@ -17,3 +17,3 @@
		*/
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@ng-dynamic-forms/core"),require("@angular/material"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@ng-dynamic-forms/core","@angular/material","@angular/common"],t):t((e.ngDF=e.ngDF\|\|{},e.ngDF.materialUI={}),e.ng.core,e.ng.forms,e.ngDF.core,e.ng.material,e.ng.common)}(this,function(e,t,o,n,a,r){"use strict";var l={Array:1,Checkbox:2,Chips:3,DatePicker:4,Group:5,Input:6,RadioGroup:7,Select:8,Slider:9,SlideToggle:10,TextArea:11};l[l.Array]="Array",l[l.Checkbox]="Checkbox",l[l.Chips]="Chips",l[l.DatePicker]="DatePicker",l[l.Group]="Group",l[l.Input]="Input",l[l.RadioGroup]="RadioGroup",l[l.Select]="Select",l[l.Slider]="Slider",l[l.SlideToggle]="SlideToggle",l[l.TextArea]="TextArea";var i="matAutocomplete,matCheckbox,matDatepicker,matInput,matRadioGroup,matSelect,\n matSlider,matSlideToggle,matTextarea",m=this&&this.__extends\|\|function(){var e=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}\|\|function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),s=function(e){function o(o,n,a){var r=e.call(this,o,n,a)\|\|this;return r.changeDetectorRef=o,r.layoutService=n,r.validationService=a,r.chipList=null,r._showCharacterCount=!1,r.bindId=!0,r.context=null,r.hasErrorMessaging=!1,r.blur=new t.EventEmitter,r.change=new t.EventEmitter,r.focus=new t.EventEmitter,r.customEvent=new t.EventEmitter,r}return m(o,e),Object.defineProperty(o.prototype,"showCharacterHint",{get:function(){return!!(this._showCharacterCount&&this.model.maxLength&&this.characterCount)},set:function(e){this._showCharacterCount=e},enumerable:!0,configurable:!0}),o.prototype.ngOnChanges=function(t){e.prototype.ngOnChanges.call(this,t),t.model&&this.updateFormControlType()},Object.defineProperty(o.prototype,"characterCount",{get:function(){return this.matInput?this.matInput.value.length:null},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"characterHint",{get:function(){return this.characterCount+" / "+this.model.maxLength},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"hasMatFormField",{get:function(){return 3===this.type\|\|4===this.type\|\|6===this.type\|\|8===this.type\|\|11===this.type},enumerable:!0,configurable:!0}),o.prototype.onChipInputTokenEnd=function(e){var t=e.input,o=e.value.trim();Array.isArray(this.chipList)&&o.length>0&&(this.chipList.push(o),this.control.patchValue(this.chipList)),t instanceof HTMLInputElement&&(t.value="")},o.prototype.onChipRemoved=function(e,t){Array.isArray(this.chipList)&&(this.chipList.splice(t,1),this.control.patchValue(this.chipList))},o.prototype.updateFormControlType=function(){this.type=o.getFormControlType(this.model),this.type===l.Chips&&(this.chipList=this.model.value\|\|[])},o.getFormControlType=function(e){switch(e.type){case n.DYNAMIC_FORM_CONTROL_TYPE_ARRAY:return l.Array;case n.DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX:return l.Checkbox;case n.DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP:case n.DYNAMIC_FORM_CONTROL_TYPE_GROUP:return l.Group;case n.DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:return l.DatePicker;case n.DYNAMIC_FORM_CONTROL_TYPE_INPUT:return e.multiple?l.Chips:l.Input;case n.DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP:return l.RadioGroup;case n.DYNAMIC_FORM_CONTROL_TYPE_SELECT:return l.Select;case n.DYNAMIC_FORM_CONTROL_TYPE_SLIDER:return l.Slider;case n.DYNAMIC_FORM_CONTROL_TYPE_SWITCH:return l.SlideToggle;case n.DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA:return l.TextArea;default:return null}},o.decorators=[{type:t.Component,args:[{selector:"dynamic-material-form-control,dynamic-form-material-control",template:'<div [formGroup]="group" [ngClass]="[getClass(\'element\', \'container\'), getClass(\'grid\', \'container\')]"><label ngIf="model.label && type !== 2" [for]="model.id" [innerHTML]="model.label" [ngClass]="[getClass(\'element\', \'label\'), getClass(\'grid\', \'label\')]"></label><ng-container ngTemplateOutlet="templates[0]?.templateRef; context: model"></ng-container><ng-container [ngSwitch]="type"><div ngSwitchCase="1" [dynamicId]="bindId && model.id" [formArrayName]="model.id" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]"><div ngFor="let groupModel of model.groups; let idx = index" role="group" [formGroupName]="idx" [ngClass]="[getClass(\'element\', \'group\'), getClass(\'grid\', \'group\')]"><dynamic-material-form-control ngFor="let controlModel of groupModel.group" [bindId]="false" [context]="groupModel" [group]="control.at(idx)" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [templates]="templateList" [ngClass]="[getClass(\'element\', \'host\', controlModel), getClass(\'grid\', \'host\', controlModel)]" (dfBlur)="onBlur($event)" (dfChange)="onValueChange($event)" (dfFocus)="onFocus($event)" (matEvent)="onCustomEvent($event)"></dynamic-material-form-control><ng-container ngTemplateOutlet="templates[2]?.templateRef; context: groupModel"></ng-container></div></div><mat-checkbox ngSwitchCase="2" #matCheckbox [checked]="model.checked" [dynamicId]="bindId && model.id" [formControlName]="model.id" [indeterminate]="model.indeterminate" [labelPosition]="model.labelPosition \|\| \'after\'" [name]="model.name" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)" (indeterminateChange)="onMatEvent($event, \'indeterminateChange\')"><span [ngClass]="getClass(\'element\', \'label\')" [innerHTML]="model.label"></span></mat-checkbox><mat-form-field ngSwitchCase="3" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><mat-chip-list #matChipList [dynamicId]="bindId && model.id" [formControlName]="model.id" [multiple]="true"><mat-chip ngFor="let chip of chipList; let index = index" [selectable]="false" (removed)="onChipRemoved(chip, index)"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]="model.placeholder" [matChipInputFor]="matChipList" [matChipInputAddOnBlur]="true" [matChipInputSeparatorKeyCodes]="[13, 188]" (matChipInputTokenEnd)="onChipInputTokenEnd($event)"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase="4" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span> <input matInput [autofocus]="model.autoFocus" [dynamicId]="bindId && model.id" [formControlName]="model.id" [max]="model.max" [matDatepicker]="matDatepicker" [min]="model.min" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" (blur)="onBlur($event)" (dateChange)="onValueChange($event)" (dateInput)="onCustomEvent($event, \'dateInput\')" (focus)="onFocus($event)"> <span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]="getAdditional(\'opened\', false)" [startAt]="model.focusedDate" [startView]="getAdditional(\'startView\', \'month\')" [touchUi]="getAdditional(\'touchUi\', false)" (closed)="onCustomEvent($event, \'closed\')" (opened)="onCustomEvent($event, \'opened\')"></mat-datepicker><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase="5" role="group" [dynamicId]="bindId && model.id" [formGroupName]="model.id" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]"><dynamic-material-form-control ngFor="let controlModel of model.group" [group]="control" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [templates]="templateList" [ngClass]="[getClass(\'element\', \'host\', controlModel), getClass(\'grid\', \'host\', controlModel)]" (dfBlur)="onBlur($event)" (dfChange)="onValueChange($event)" (dfFocus)="onFocus($event)" (matEvent)="onCustomEvent($event)"></dynamic-material-form-control></div><ng-container ngSwitchCase="6"><mat-form-field [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\',\'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span> <input matInput [attr.accept]="model.accept" [attr.list]="model.listId" [attr.max]="model.max" [attr.min]="model.min" [attr.multiple]="model.multiple" [attr.step]="model.step" [autocomplete]="model.autoComplete" [autofocus]="model.autoFocus" [dynamicId]="bindId && model.id" [formControlName]="model.id" [maxlength]="model.maxLength" [matAutocomplete]="matAutocomplete" [minlength]="model.minLength" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [pattern]="model.pattern" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" [spellcheck]="model.spellCheck" [tabindex]="model.tabIndex" [type]="model.inputType" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"> <span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-hint ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete="matAutocomplete" (optionSelected)="onValueChange($event)"><mat-option ngFor="let option of model.list" [value]="option">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase="7" #matRadioGroup [dynamicId]="bindId && model.id" [formControlName]="model.id" [name]="model.name" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"><mat-radio-button ngFor="let option of model.options$ \| async" [labelPosition]="\'after\'" [name]="model.name" [ngClass]="getClass(\'element\', \'option\')" [value]="option.value"><span [innerHTML]="option.label"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase="8" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\',\'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span><mat-select #matSelect [dynamicId]="bindId && model.id" [formControlName]="model.id" [multiple]="model.multiple" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [required]="model.required" (change)="onValueChange($event)" (closed)="onCustomEvent($event, \'closed\')" (opened)="onCustomEvent($event, \'opened\')"><mat-option ngFor="let option of model.options$ \| async" [ngClass]="getClass(\'element\',\'option\')" [value]="option.value"><span [innerHTML]="option.label"></span></mat-option></mat-select><span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="showErrorMessages">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase="9" #matSlider [dynamicId]="bindId && model.id" [formControlName]="model.id" [invert]="getAdditional(\'invert\', false)" [min]="model.min" [max]="model.max" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" [step]="model.step" [tabIndex]="model.tabIndex" [thumbLabel]="getAdditional(\'thumbLabel\', true)" [tickInterval]="getAdditional(\'tickInterval\', 1)" [vertical]="model.vertical" (change)="onValueChange($event)" (input)="onCustomEvent($event, \'input\')"></mat-slider><mat-slide-toggle ngSwitchCase="10" #matSlideToggle [checked]="model.checked" [dynamicId]="bindId && model.id" [formControlName]="model.id" [labelPosition]="model.labelPosition \|\| \'after\'" [name]="model.name" [ngClass]="[getClass(\'element\',\'control\'), getClass(\'grid\',\'control\')]" (change)="onValueChange($event)"><span ngIf="!model.checked" [innerHTML]="model.offLabel"></span> <span ngIf="model.checked" [innerHTML]="model.onLabel"></span></mat-slide-toggle><mat-form-field ngSwitchCase="11" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><textarea matInput [dynamicId]="bindId && model.id" [cols]="model.cols" [formControlName]="model.id" [minlength]="model.minLength" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" [rows]="model.rows" [spellcheck]="model.spellCheck" [tabindex]="model.tabIndex" [wrap]="model.wrap" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"></textarea><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-hint ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf="!hasMatFormField && hasErrorMessaging"><mat-error ngFor="let message of errorMessages">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet="templates[1]?.templateRef; context: model"></ng-container><ng-content></ng-content></div>'}]}],o.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:n.DynamicFormLayoutService},{type:n.DynamicFormValidationService}]},o.propDecorators={contentTemplateList:[{type:t.ContentChildren,args:[n.DynamicTemplateDirective]}],inputTemplateList:[{type:t.Input,args:["templates"]}],bindId:[{type:t.Input}],context:[{type:t.Input}],group:[{type:t.Input}],hasErrorMessaging:[{type:t.Input}],layout:[{type:t.Input}],model:[{type:t.Input}],showCharacterHint:[{type:t.Input}],blur:[{type:t.Output,args:["dfBlur"]}],change:[{type:t.Output,args:["dfChange"]}],focus:[{type:t.Output,args:["dfFocus"]}],customEvent:[{type:t.Output,args:["matEvent"]}],matViewChild:[{type:t.ViewChild,args:[i]}],matInput:[{type:t.ViewChild,args:[a.MatInput]}]},o}(n.DynamicFormControlComponent),d=this&&this.__extends\|\|function(){var e=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}\|\|function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),c=function(e){function o(o,n){var a=e.call(this,o,n)\|\|this;return a.formService=o,a.layoutService=n,a.blur=new t.EventEmitter,a.change=new t.EventEmitter,a.focus=new t.EventEmitter,a.customEvent=new t.EventEmitter,a}return d(o,e),o.decorators=[{type:t.Component,args:[{selector:"dynamic-material-form",template:'<dynamic-material-form-control *ngFor="let controlModel of model; trackBy: trackByFn" [group]="group" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [ngClass]="[getClass(controlModel, \'element\', \'host\'), getClass(controlModel, \'grid\', \'host\')]" [showCharacterHint]="controlModel.type === \'INPUT\'" [templates]="templates" (dfBlur)="onEvent($event, \'blur\')" (dfChange)="onEvent($event, \'change\')" (dfFocus)="onEvent($event, \'focus\')" (matEvent)="onEvent($event, \'custom\')"></dynamic-material-form-control>'}]}],o.ctorParameters=function(){return[{type:n.DynamicFormService},{type:n.DynamicFormLayoutService}]},o.propDecorators={group:[{type:t.Input}],model:[{type:t.Input}],layout:[{type:t.Input}],blur:[{type:t.Output,args:["dfBlur"]}],change:[{type:t.Output,args:["dfChange"]}],focus:[{type:t.Output,args:["dfFocus"]}],customEvent:[{type:t.Output,args:["matEvent"]}],templates:[{type:t.ContentChildren,args:[n.DynamicTemplateDirective]}],components:[{type:t.ViewChildren,args:[s]}]},o}(n.DynamicFormComponent),p=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,o.ReactiveFormsModule,a.MatAutocompleteModule,a.MatCheckboxModule,a.MatChipsModule,a.MatDatepickerModule,a.MatIconModule,a.MatInputModule,a.MatRadioModule,a.MatSelectModule,a.MatSliderModule,a.MatSlideToggleModule,n.DynamicFormsCoreModule],declarations:[s,c],exports:[n.DynamicFormsCoreModule,s,c]}]}],e.ctorParameters=function(){return[]},e}();e.DynamicMaterialFormComponent=c,e.MatFormControlType=l,e.MAT_VIEW_CHILD_SELECTOR=i,e.MAT_LABEL_POSITION_AFTER="after",e.MAT_LABEL_POSITION_BEFORE="before",e.DynamicMaterialFormControlComponent=s,e.DynamicFormsMaterialUIModule=p,Object.defineProperty(e,"__esModule",{value:!0})});
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@ng-dynamic-forms/core"),require("@angular/material"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@ng-dynamic-forms/core","@angular/material","@angular/common"],t):t((e.ngDF=e.ngDF\|\|{},e.ngDF.materialUI={}),e.ng.core,e.ng.forms,e.ngDF.core,e.ng.material,e.ng.common)}(this,function(e,t,o,n,a,r){"use strict";var l={Array:1,Checkbox:2,Chips:3,DatePicker:4,Group:5,Input:6,RadioGroup:7,Select:8,Slider:9,SlideToggle:10,TextArea:11};l[l.Array]="Array",l[l.Checkbox]="Checkbox",l[l.Chips]="Chips",l[l.DatePicker]="DatePicker",l[l.Group]="Group",l[l.Input]="Input",l[l.RadioGroup]="RadioGroup",l[l.Select]="Select",l[l.Slider]="Slider",l[l.SlideToggle]="SlideToggle",l[l.TextArea]="TextArea";var i="matAutocomplete,matCheckbox,matDatepicker,matInput,matRadioGroup,matSelect,\n matSlider,matSlideToggle,matTextarea",m=this&&this.__extends\|\|function(){var e=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}\|\|function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),s=function(e){function o(o,n,a){var r=e.call(this,o,n,a)\|\|this;return r.changeDetectorRef=o,r.layoutService=n,r.validationService=a,r.chipList=null,r._showCharacterCount=!1,r.bindId=!0,r.context=null,r.hasErrorMessaging=!1,r.blur=new t.EventEmitter,r.change=new t.EventEmitter,r.focus=new t.EventEmitter,r.customEvent=new t.EventEmitter,r}return m(o,e),Object.defineProperty(o.prototype,"showCharacterHint",{get:function(){return!!(this._showCharacterCount&&this.model.maxLength&&this.characterCount)},set:function(e){this._showCharacterCount=e},enumerable:!0,configurable:!0}),o.prototype.ngOnChanges=function(t){e.prototype.ngOnChanges.call(this,t),t.model&&this.updateFormControlType()},Object.defineProperty(o.prototype,"characterCount",{get:function(){return this.matInput?this.matInput.value.length:null},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"characterHint",{get:function(){return this.characterCount+" / "+this.model.maxLength},enumerable:!0,configurable:!0}),Object.defineProperty(o.prototype,"hasMatFormField",{get:function(){return 3===this.type\|\|4===this.type\|\|6===this.type\|\|8===this.type\|\|11===this.type},enumerable:!0,configurable:!0}),o.prototype.onChipInputTokenEnd=function(e){var t=e.input,o=e.value.trim();Array.isArray(this.chipList)&&o.length>0&&(this.chipList.push(o),this.control.patchValue(this.chipList)),t instanceof HTMLInputElement&&(t.value="")},o.prototype.onChipRemoved=function(e,t){Array.isArray(this.chipList)&&(this.chipList.splice(t,1),this.control.patchValue(this.chipList))},o.prototype.updateFormControlType=function(){this.type=o.getFormControlType(this.model),this.type===l.Chips&&(this.chipList=this.model.value\|\|[])},o.getFormControlType=function(e){switch(e.type){case n.DYNAMIC_FORM_CONTROL_TYPE_ARRAY:return l.Array;case n.DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX:return l.Checkbox;case n.DYNAMIC_FORM_CONTROL_TYPE_CHECKBOX_GROUP:case n.DYNAMIC_FORM_CONTROL_TYPE_GROUP:return l.Group;case n.DYNAMIC_FORM_CONTROL_TYPE_DATEPICKER:return l.DatePicker;case n.DYNAMIC_FORM_CONTROL_TYPE_INPUT:return e.multiple?l.Chips:l.Input;case n.DYNAMIC_FORM_CONTROL_TYPE_RADIO_GROUP:return l.RadioGroup;case n.DYNAMIC_FORM_CONTROL_TYPE_SELECT:return l.Select;case n.DYNAMIC_FORM_CONTROL_TYPE_SLIDER:return l.Slider;case n.DYNAMIC_FORM_CONTROL_TYPE_SWITCH:return l.SlideToggle;case n.DYNAMIC_FORM_CONTROL_TYPE_TEXTAREA:return l.TextArea;default:return null}},o.decorators=[{type:t.Component,args:[{selector:"dynamic-material-form-control,dynamic-form-material-control",template:'<div [formGroup]="group" [ngClass]="[getClass(\'element\', \'container\'), getClass(\'grid\', \'container\')]"><label ngIf="model.label && !hasMatFormField && type !== 2" [for]="model.id" [innerHTML]="model.label" [ngClass]="[getClass(\'element\', \'label\'), getClass(\'grid\', \'label\')]"></label><ng-container ngTemplateOutlet="templates[0]?.templateRef; context: model"></ng-container><ng-container [ngSwitch]="type"><div ngSwitchCase="1" [dynamicId]="bindId && model.id" [formArrayName]="model.id" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]"><div ngFor="let groupModel of model.groups; let idx = index" role="group" [formGroupName]="idx" [ngClass]="[getClass(\'element\', \'group\'), getClass(\'grid\', \'group\')]"><dynamic-material-form-control ngFor="let controlModel of groupModel.group" [bindId]="false" [context]="groupModel" [group]="control.at(idx)" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [templates]="templateList" [ngClass]="[getClass(\'element\', \'host\', controlModel), getClass(\'grid\', \'host\', controlModel)]" (dfBlur)="onBlur($event)" (dfChange)="onValueChange($event)" (dfFocus)="onFocus($event)" (matEvent)="onCustomEvent($event)"></dynamic-material-form-control><ng-container ngTemplateOutlet="templates[2]?.templateRef; context: groupModel"></ng-container></div></div><mat-checkbox ngSwitchCase="2" #matCheckbox [checked]="model.checked" [formControlName]="model.id" [id]="bindId ? model.id : null" [indeterminate]="model.indeterminate" [labelPosition]="model.labelPosition \|\| \'after\'" [name]="model.name" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)" (indeterminateChange)="onMatEvent($event, \'indeterminateChange\')"><span [ngClass]="getClass(\'element\', \'label\')" [innerHTML]="model.label"></span></mat-checkbox><mat-form-field ngSwitchCase="3" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><mat-chip-list #matChipList [formControlName]="model.id" [id]="bindId ? model.id : null" [multiple]="true"><mat-chip ngFor="let chip of chipList; let index = index" [selectable]="false" (removed)="onChipRemoved(chip, index)"><span>{{ chip }}</span><mat-icon matChipRemove>cancel</mat-icon></mat-chip><input matInput [placeholder]="model.placeholder" [matChipInputFor]="matChipList" [matChipInputAddOnBlur]="true" [matChipInputSeparatorKeyCodes]="[13, 188]" (matChipInputTokenEnd)="onChipInputTokenEnd($event)"></mat-chip-list></mat-form-field><mat-form-field ngSwitchCase="4" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><ng-container ngIf="model.label" ngProjectAs="mat-label"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span> <input matInput [autofocus]="model.autoFocus" [formControlName]="model.id" [id]="bindId ? model.id : null" [max]="model.max" [matDatepicker]="matDatepicker" [min]="model.min" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" (blur)="onBlur($event)" (dateChange)="onValueChange($event)" (dateInput)="onCustomEvent($event, \'dateInput\')" (focus)="onFocus($event)"> <span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle><mat-datepicker #matDatepicker [opened]="getAdditional(\'opened\', false)" [startAt]="model.focusedDate" [startView]="getAdditional(\'startView\', \'month\')" [touchUi]="getAdditional(\'touchUi\', false)" (closed)="onCustomEvent($event, \'closed\')" (opened)="onCustomEvent($event, \'opened\')"></mat-datepicker><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field><div ngSwitchCase="5" role="group" [dynamicId]="bindId && model.id" [formGroupName]="model.id" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]"><dynamic-material-form-control ngFor="let controlModel of model.group" [group]="control" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [templates]="templateList" [ngClass]="[getClass(\'element\', \'host\', controlModel), getClass(\'grid\', \'host\', controlModel)]" (dfBlur)="onBlur($event)" (dfChange)="onValueChange($event)" (dfFocus)="onFocus($event)" (matEvent)="onCustomEvent($event)"></dynamic-material-form-control></div><ng-container ngSwitchCase="6"><mat-form-field [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\',\'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><ng-container ngIf="model.label" ngProjectAs="mat-label"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span> <input matInput [attr.accept]="model.accept" [attr.list]="model.listId" [attr.max]="model.max" [attr.min]="model.min" [attr.multiple]="model.multiple" [attr.step]="model.step" [autocomplete]="model.autoComplete" [autofocus]="model.autoFocus" [formControlName]="model.id" [id]="bindId ? model.id : null" [maxlength]="model.maxLength" [matAutocomplete]="matAutocomplete" [minlength]="model.minLength" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [pattern]="model.pattern" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" [spellcheck]="model.spellCheck" [tabindex]="model.tabIndex" [type]="model.inputType" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"> <span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-hint ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field><mat-autocomplete #matAutocomplete="matAutocomplete" (optionSelected)="onValueChange($event)"><mat-option ngFor="let option of model.list" [value]="option">{{ option }}</mat-option></mat-autocomplete></ng-container><mat-radio-group ngSwitchCase="7" #matRadioGroup [formControlName]="model.id" [id]="bindId ? model.id : null" [name]="model.name" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"><mat-radio-button ngFor="let option of model.options$ \| async" [labelPosition]="\'after\'" [name]="model.name" [ngClass]="getClass(\'element\', \'option\')" [value]="option.value"><span [innerHTML]="option.label"></span></mat-radio-button></mat-radio-group><mat-form-field ngSwitchCase="8" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><ng-container ngIf="model.label" ngProjectAs="mat-label"><mat-label>{{ model.label }}</mat-label></ng-container><span ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span><mat-select #matSelect [formControlName]="model.id" [id]="bindId ? model.id : null" [multiple]="model.multiple" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [required]="model.required" (change)="onValueChange($event)" (closed)="onCustomEvent($event, \'closed\')" (opened)="onCustomEvent($event, \'opened\')"><mat-option ngFor="let option of model.options$ \| async" [ngClass]="getClass(\'element\', \'option\')" [value]="option.value"><span [innerHTML]="option.label"></span></mat-option></mat-select><span ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="showErrorMessages">{{ message }}</mat-error></ng-container></mat-form-field><mat-slider ngSwitchCase="9" #matSlider [formControlName]="model.id" [id]="bindId ? model.id : null" [invert]="getAdditional(\'invert\', false)" [min]="model.min" [max]="model.max" [ngClass]="[getClass(\'element\', \'control\'), getClass(\'grid\', \'control\')]" [step]="model.step" [tabIndex]="model.tabIndex" [thumbLabel]="getAdditional(\'thumbLabel\', true)" [tickInterval]="getAdditional(\'tickInterval\', 1)" [vertical]="model.vertical" (change)="onValueChange($event)" (input)="onCustomEvent($event, \'input\')"></mat-slider><mat-slide-toggle ngSwitchCase="10" #matSlideToggle [checked]="model.checked" [formControlName]="model.id" [id]="bindId ? model.id : null" [labelPosition]="model.labelPosition \|\| \'after\'" [name]="model.name" [ngClass]="[getClass(\'element\',\'control\'), getClass(\'grid\',\'control\')]" (change)="onValueChange($event)"><span ngIf="!model.checked" [innerHTML]="model.offLabel"></span> <span ngIf="model.checked" [innerHTML]="model.onLabel"></span></mat-slide-toggle><mat-form-field ngSwitchCase="11" [color]="getAdditional(\'color\', \'primary\')" [ngClass]="getClass(\'grid\', \'control\')" [floatLabel]="getAdditional(\'floatLabel\', \'auto\')"><ng-container ngIf="model.label" ngProjectAs="mat-label"><mat-label>{{ model.label }}</mat-label></ng-container><textarea matInput [cols]="model.cols" [formControlName]="model.id" [id]="bindId ? model.id : null" [minlength]="model.minLength" [name]="model.name" [ngClass]="getClass(\'element\', \'control\')" [placeholder]="model.placeholder" [readonly]="model.readOnly" [required]="model.required" [rows]="model.rows" [spellcheck]="model.spellCheck" [tabindex]="model.tabIndex" [wrap]="model.wrap" (blur)="onBlur($event)" (change)="onValueChange($event)" (focus)="onFocus($event)"></textarea><mat-hint ngIf="showHint" align="start" [innerHTML]="model.hint"></mat-hint><mat-hint ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint><ng-container ngFor="let message of errorMessages" ngProjectAs="mat-error"><mat-error ngIf="hasErrorMessaging">{{ message }}</mat-error></ng-container></mat-form-field></ng-container><ng-container ngIf="!hasMatFormField && hasErrorMessaging"><mat-error ngFor="let message of errorMessages">{{ message }}</mat-error></ng-container><ng-container ngTemplateOutlet="templates[1]?.templateRef; context: model"></ng-container><ng-content></ng-content></div>'}]}],o.ctorParameters=function(){return[{type:t.ChangeDetectorRef},{type:n.DynamicFormLayoutService},{type:n.DynamicFormValidationService}]},o.propDecorators={contentTemplateList:[{type:t.ContentChildren,args:[n.DynamicTemplateDirective]}],inputTemplateList:[{type:t.Input,args:["templates"]}],bindId:[{type:t.Input}],context:[{type:t.Input}],group:[{type:t.Input}],hasErrorMessaging:[{type:t.Input}],layout:[{type:t.Input}],model:[{type:t.Input}],showCharacterHint:[{type:t.Input}],blur:[{type:t.Output,args:["dfBlur"]}],change:[{type:t.Output,args:["dfChange"]}],focus:[{type:t.Output,args:["dfFocus"]}],customEvent:[{type:t.Output,args:["matEvent"]}],matViewChild:[{type:t.ViewChild,args:[i]}],matInput:[{type:t.ViewChild,args:[a.MatInput]}]},o}(n.DynamicFormControlComponent),d=this&&this.__extends\|\|function(){var e=Object.setPrototypeOf\|\|{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}\|\|function(e,t){for(var o in t)t.hasOwnProperty(o)&&(e[o]=t[o])};return function(t,o){function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}}(),c=function(e){function o(o,n){var a=e.call(this,o,n)\|\|this;return a.formService=o,a.layoutService=n,a.blur=new t.EventEmitter,a.change=new t.EventEmitter,a.focus=new t.EventEmitter,a.customEvent=new t.EventEmitter,a}return d(o,e),o.decorators=[{type:t.Component,args:[{selector:"dynamic-material-form",template:'<dynamic-material-form-control *ngFor="let controlModel of model; trackBy: trackByFn" [group]="group" [hasErrorMessaging]="controlModel.hasErrorMessages" [layout]="layout" [model]="controlModel" [ngClass]="[getClass(controlModel, \'element\', \'host\'), getClass(controlModel, \'grid\', \'host\')]" [showCharacterHint]="controlModel.type === \'INPUT\'" [templates]="templates" (dfBlur)="onEvent($event, \'blur\')" (dfChange)="onEvent($event, \'change\')" (dfFocus)="onEvent($event, \'focus\')" (matEvent)="onEvent($event, \'custom\')"></dynamic-material-form-control>'}]}],o.ctorParameters=function(){return[{type:n.DynamicFormService},{type:n.DynamicFormLayoutService}]},o.propDecorators={group:[{type:t.Input}],model:[{type:t.Input}],layout:[{type:t.Input}],blur:[{type:t.Output,args:["dfBlur"]}],change:[{type:t.Output,args:["dfChange"]}],focus:[{type:t.Output,args:["dfFocus"]}],customEvent:[{type:t.Output,args:["matEvent"]}],templates:[{type:t.ContentChildren,args:[n.DynamicTemplateDirective]}],components:[{type:t.ViewChildren,args:[s]}]},o}(n.DynamicFormComponent),u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule,o.ReactiveFormsModule,a.MatAutocompleteModule,a.MatCheckboxModule,a.MatChipsModule,a.MatDatepickerModule,a.MatIconModule,a.MatInputModule,a.MatRadioModule,a.MatSelectModule,a.MatSliderModule,a.MatSlideToggleModule,n.DynamicFormsCoreModule],declarations:[s,c],exports:[n.DynamicFormsCoreModule,s,c]}]}],e.ctorParameters=function(){return[]},e}();e.DynamicMaterialFormComponent=c,e.MatFormControlType=l,e.MAT_VIEW_CHILD_SELECTOR=i,e.MAT_LABEL_POSITION_AFTER="after",e.MAT_LABEL_POSITION_BEFORE="before",e.DynamicMaterialFormControlComponent=s,e.DynamicFormsMaterialUIModule=u,Object.defineProperty(e,"__esModule",{value:!0})});
		//# sourceMappingURL=ui-material.umd.min.js.map

package.json

		{
		"name": "@ng-dynamic-forms/ui-material",
		"version": "5.3.0",
		"version": "5.4.0",
		"description": "Material UI package for NG Dynamic Forms",
		@@ -37,5 +37,5 @@ "main": "./bundles/ui-material.umd.js",
		"@angular/material": "^5.0.0",
		"@ng-dynamic-forms/core": "^5.3.0",
		"@ng-dynamic-forms/core": "^5.4.0",
		"rxjs": "^5.5.2"
		}
		}

bundles/ui-material.umd.min.js.map

Sorry, the diff of this file is not supported yet

src/dynamic-material-form-control.component.html

Sorry, the diff of this file is not supported yet

@ng-dynamic-forms/ui-material - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics