ng2-simple-forms
Version:
A simple(ish) module for creating accessible, reactive forms.
1 lines • 181 kB
JavaScript
!function(n,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("rxjs/Subject"),require("@angular/core"),require("@angular/forms"),require("number-to-words"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","rxjs/Subject","@angular/core","@angular/forms","number-to-words","@angular/common"],o):o(n["ng2-simple-forms"]={},n.Rx,n.ng.core,n.ng.forms,n.numberToWords,n.ng.common)}(this,function(n,o,e,t,i,r){"use strict";var a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,o){n.__proto__=o}||function(n,o){for(var e in o)o.hasOwnProperty(e)&&(n[e]=o[e])};function l(n,o){function e(){this.constructor=n}a(n,o),n.prototype=null===o?Object.create(o):(e.prototype=o.prototype,new e)}var p=function(){return function(n){var e=this;this.setArrayValues=function(n){e.formArrayValue.next(n)},this.setConfig=function(n,o){return e.config[n]=o,e},this.getConfig=function(n){return e.config[n]},this.setProperty=function(n,o){return e[n]=o,e},this.setAccessibility=function(n,o){return e.accessibilityConfig[n]=o,e},this.setStyle=function(n,o){return e.stylesConfig[n]=o,e},this.getStyle=function(n){return e.stylesConfig[n]},this.getAccessibility=function(n){return e.accessibilityConfig[n]},this.getTestId=function(n){return n?e.inputId+"_"+n+"_"+e.type:e.inputId+"_"+e.type},this.inputId=n.inputId,this.type=n.type,this.subType=n.subType,this.label=n.label,this.required=n.required,this.minLength=n.minLength,this.maxLength=n.maxLength,this.regex=n.regex,this.helpText=n.helpText,this.errorText=n.errorText,this.options=n.options,this.optionGroups=n.optionGroups,this.optionObjects=n.optionObjects,this.config=n.config||{},this.accessibilityConfig=n.accessibilityConfig||{},this.stylesConfig=n.stylesConfig||{},this.formArrayControls=n.formArrayControls,this.formArrayValue=n.formArrayValue||new o.Subject,this.formArraySingularName=n.formArraySingularName}}(),s=function(){return function(n){this.inputId=n.inputId,this.value=n.value,this.isValid=n.isValid}}(),c=function(){return function(n){this.value=n.value,this.display=n.display}}(),d=function(){return function(n){this.groupName=n.groupName,this.options=n.options}}(),u=function(){return function(n){this.groupName=n.groupName,this.objects=n.objects}}(),b=function(){return function(n){var o=this;this.get=function(n){var e;return o.elements.forEach(function(o){o.inputId===n&&(e=o.element)}),e},this.setConfig=function(n,e,t){var i=o.get(n);return i.setConfig(e,t),o.elements.forEach(function(n){n.inputId===i.inputId&&(n.element=i)}),o},this.setStyle=function(n,e,t){var i=o.get(n);return i.setStyle(e,t),o.elements.forEach(function(n){n.inputId===i.inputId&&(n.element=i)}),o},this.setGlobalStyle=function(n,e){return o.elements.forEach(function(o){var t=o.element;t.setStyle(n,e),o.element=t}),o},this.setAccessibility=function(n,e,t){var i=o.get(n);return i.setAccessibility(e,t),o.elements.forEach(function(n){n.inputId===i.inputId&&(n.element=i)}),o},this.elements=n?n.elements:[],this.formGroup=n?n.formGroup:undefined}}(),h=function(){return function(){}}();h.Text="text",h.Select="select",h.Checkbox="checkbox",h.Radio="radio",h.Password="password",h.Datepicker="date",h.Range="range",h.Textarea="textarea",h.ObjectSelector="object",h.FormArray="formArray";var m=function(){return function(){}}();m.InputId="inputId",m.Required="required",m.MinLength="minLength",m.MaxLength="maxLength",m.Regex="regex",m.HelpText="helpText",m.ErrorText="errorText",m.Options="options",m.OptionGroups="optionGroups";var g=function(){return function(){}}();g.RequiredMarker="requiredMarker",g.ReadOnly="readOnly",g.ObjectDisplayProperty="objectDisplayProperty",g.ObjectGroupProperty="objectGroupProperty",g.ShouldGroupObjects="shouldGroupObjects";var f=function(){return function(){}}();f.AriaLabel="ariaLabel",f.AriaDescribedBy="ariaDescribedBy",f.AriaLabelledBy="ariaLabelledBy",f.AriaReadOnly="ariaReadOnly";var x=function(){return function(){}}();x.ElementWrapper="wrapperCssClass",x.GroupLabel="groupLabelCssClass",x.ElementLabel="elementLabelCssClass",x.ElementInput="elementInputCssClass",x.Fieldset="fieldsetCssClass",x.Legend="legendCssClass",x.OptionLabel="optionLabelCssClass";var k=function(){function n(){this.hideClear=!1,this.formOptions={wrapperCssClass:"",formElementCssClass:"",buttonCssClass:"",submitButtonLabel:"Submit",clearButtonLabel:"Clear"},this.changeEmitter=new e.EventEmitter,this.submitEmitter=new e.EventEmitter}return n.prototype.ngOnInit=function(){var n=this;this.form.formGroup.valueChanges.subscribe(function(o){n.changeEmitter.emit(o)}),this.form.elements=this.form.elements.map(function(o){return{inputId:o.inputId,element:n.setElementConfig(o.element)}}),this.defaultFormData&&this.form.formGroup.setValue(this.defaultFormData)},n.prototype.setElementConfig=function(n){return n.setConfig("wrapperCssClass",this.formOptions.formElementCssClass),n.setConfig("formElementCssClass",this.formOptions.formElementCssClass),n},n.prototype.submit=function(){this.form.formGroup.valid&&this.submitEmitter.emit(this.form.formGroup.getRawValue())},n.prototype.clear=function(){this.form.formGroup.reset()},n.prototype.isValid=function(){return this.form.formGroup.valid},n}();k.decorators=[{type:e.Component,args:[{selector:"app-form",template:'<app-form-wrapper [wrapperCssClass]="formOptions.wrapperCssClass">\n <h1>{{ formTitle }}</h1>\n <h2>{{ formSubtitle }}</h2>\n <app-form-element\n *ngFor="let element of form.elements"\n [formGroup]="form.formGroup"\n [formElement]="element.element">\n </app-form-element>\n <span class="controls">\n <button\n class="{{ formOptions.buttonCssClass || \'btn btn-primary\' }}"\n [ngClass]="{ \'disabled\' : !isValid() }"\n (click)="submit()">\n {{ formOptions.submitButtonLabel || \'Submit\' }}\n </button>\n <button *ngIf="!hideClear" class="{{ formOptions.buttonCssClass || \'btn btn-primary\' }}" (click)="clear()">{{ formOptions.clearButtonLabel || \'Clear\' }}</button>\n </span>\n</app-form-wrapper>\n',styles:["h2{\n font-size:12px;\n color:#5b6b8c;\n margin-top:-20px; }\n.controls{\n margin-top:15px;\n display:block; }\n.disabled{\n background-color:lightgray;\n color:black;\n cursor:not-allowed; }\n"]}]}],k.ctorParameters=function(){return[]},k.propDecorators={formTitle:[{type:e.Input}],formSubtitle:[{type:e.Input}],form:[{type:e.Input}],hideClear:[{type:e.Input}],formOptions:[{type:e.Input}],defaultFormData:[{type:e.Input}],formData:[{type:e.Output}],changeEmitter:[{type:e.Output}],submitEmitter:[{type:e.Output}]};var y=function(){function n(){}return n.prototype.ngOnInit=function(){},n}();y.decorators=[{type:e.Component,args:[{selector:"app-error-message",template:'<span role="alert" [attr.aria-expanded]="true" class="error-text">{{ message }}</span>\n',styles:['.error-text{\n display:block;\n position:absolute;\n background-color:#e3272e;\n font-size:12px;\n color:white;\n padding:5px 10px;\n text-align:center;\n border-radius:5px;\n z-index:2;\n bottom:-32px;\n left:25%;\n min-width:50%;\n min-height:40px; }\n .error-text::after{\n content:" ";\n position:absolute;\n bottom:100%;\n left:50%;\n margin-left:-5px;\n border-width:5px;\n border-style:solid;\n border-color:transparent transparent #e3272e transparent; }\n']}]}],y.ctorParameters=function(){return[]},y.propDecorators={message:[{type:e.Input}]};var w=function(){function n(){}return n.prototype.ngOnInit=function(){},n}();w.decorators=[{type:e.Component,args:[{selector:"app-form-element",template:'<div *ngIf="formElement" [ngSwitch]="formElement.type.toLowerCase()">\n \x3c!-- TEXT INPUT FIELD --\x3e\n <app-text-input\n *ngSwitchCase="\'text\'"\n [formGroup]="formGroup"\n [elementData]="formElement"\n ></app-text-input>\n \x3c!-- TEXT AREA FIELD --\x3e\n <app-text-area\n *ngSwitchCase="\'textarea\'"\n [formGroup]="formGroup"\n [elementData]="formElement"\n ></app-text-area>\n \x3c!-- DATE PICKER FIELD --\x3e\n <app-date-picker\n *ngSwitchCase="\'date\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-date-picker>\n \x3c!-- PASSWORD INPUT FIELD --\x3e\n <app-password-input\n *ngSwitchCase="\'password\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-password-input>\n \x3c!-- SELECT INPUT FIELD --\x3e\n <app-dropdown-question\n *ngSwitchCase="\'select\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-dropdown-question>\n \x3c!-- CHECKBOX GROUP FIELD --\x3e\n <app-checkbox\n *ngSwitchCase="\'checkbox\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-checkbox>\n \x3c!-- RADIO GROUP FIELD --\x3e\n <app-radio-question\n *ngSwitchCase="\'radio\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-radio-question>\n \x3c!-- RANGE FIELD --\x3e\n <app-range\n *ngSwitchCase="\'range\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-range>\n \x3c!-- OBJECT SELECTOR --\x3e\n <app-object-selector\n *ngSwitchCase="\'object\'"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-object-selector>\n \x3c!-- FORM ARRAY --\x3e\n <app-form-array-element\n *ngSwitchCase="\'formarray\'"\n [formValue]="formElement.formArrayValue"\n [formGroup]="formGroup"\n [elementData]="formElement">\n </app-form-array-element>\n</div>\n',styles:[""]}]}],w.ctorParameters=function(){return[]},w.propDecorators={formGroup:[{type:e.Input}],formElement:[{type:e.Input}]};var v=function(){function n(){}return n.prototype.ngOnInit=function(){},n}();v.decorators=[{type:e.Component,args:[{selector:"app-form-wrapper",template:"<div class=\"{{wrapperCssClass || 'default-theme'}}\">\n <ng-content></ng-content>\n</div>\n",styles:[".form-wrapper{\n background-color:white;\n padding:30px;\n border-radius:8px;\n margin-bottom:30px; }\n"]}]}],v.ctorParameters=function(){return[]},v.propDecorators={wrapperCssClass:[{type:e.Input}]};var I=function(){function n(){}return n.getValidators=function(n){var o=[];if(n.required&&o.push(t.Validators.required),n.minLength){var e="number"==typeof n.minLength?n.minLength:parseInt(n.minLength,10);o.push(t.Validators.minLength(e))}if(n.maxLength){var i="number"==typeof n.maxLength?n.maxLength:parseInt(n.maxLength,10);o.push(t.Validators.maxLength(i))}return n.regex&&o.push(t.Validators.pattern(n.regex)),o},n.toFormGroup=function(o){var e={};return o.forEach(function(o){if(o.type===h.FormArray){var i=o.formArrayControls,r={};i.forEach(function(o){r[o.inputId]=["",n.getValidators(o)]}),e[o.inputId]=new t.FormArray([n.formBuilder.group(r)])}else e[o.inputId]=["",n.getValidators(o)]}),n.formBuilder.group(e)},n.toFormDetails=function(o){var e=new b;return e.elements=o.map(function(n){return{inputId:n.inputId,element:n}}),e.formGroup=n.toFormGroup(o),e},n.fromJson=function(o){var e=o.map(function(n){return new p(n)});return n.toFormDetails(e)},n.createElement=function(o,e,t,i){var r;void 0===t&&(t={}),r=t&&!t.inputId?n.toInputId(e):t.inputId;var a=new p({inputId:r,type:o,label:e,config:i});return n.setOptions(a,t)},n.setOptions=function(n,o){return Object.getOwnPropertyNames(o).forEach(function(e){n.setProperty(e,o[e])}),n},n.toInputId=function(n){return n.split(" ").map(function(n,o){return 0===o?n.toLowerCase():n.charAt(0).toUpperCase()+n.slice(1).toLowerCase()}).join("")},n}();I.formBuilder=new t.FormBuilder;var D=function(){function n(){this.changeEmitter=new e.EventEmitter,this.isFocussed=!1}return n.prototype.ngOnInit=function(){},n.prototype.initElement=function(){this.getFormGroup(),this.setElementStyles()},n.prototype.getId=function(){this.elementData.getConfig("arrayIndex")?(this.elementData.inputId,this.elementData.getConfig("arrayIndex")):this.elementData.inputId;return this.elementData.inputId},n.prototype.setElementStyles=function(){this.elementWrapperClass=this.elementData.getStyle(x.ElementWrapper),this.elementGroupLabelClass=this.elementData.getStyle(x.GroupLabel),this.elementLabelClass=this.elementData.getStyle(x.ElementLabel),this.elementInputClass=this.elementData.getStyle(x.ElementInput),this.elementFieldsetClass=this.elementData.getStyle(x.Fieldset),this.elementLegendClass=this.elementData.getStyle(x.Legend),this.elementOptionLabelClass=this.elementData.getStyle(x.OptionLabel)},n.prototype.emit=function(){var n=this;this.formGroup.valueChanges.subscribe(function(o){n.changeEmitter.emit(new s({inputId:n.elementData.inputId,value:o[n.elementData.inputId],isValid:n.formGroup.valid}))})},n.prototype.getElementData=function(n){return{elementData:this.elementData,formGroup:this.formGroup,option:n}},n.prototype.getLabelConfig=function(){return{isFocussed:this.isFocussed,elementData:this.elementData,inputHasValue:this.hasValue(),requiredMarker:this.getRequiredMarker(),inputIsInvalid:this.invalid(),inputIsValid:this.valid(),testId:this.elementData.getTestId()}},n.prototype.getFormGroup=function(){this.formGroup=this.formGroup?this.formGroup:this.toOwnFormgroup(),this.elementData.setProperty("formGroup",this.formGroup),this.emit()},n.prototype.toOwnFormgroup=function(){return I.toFormGroup([this.elementData])},n.prototype.hasFocus=function(){return this.isFocussed},n.prototype.hasConfig=function(){return!(!this.elementData||!this.elementData.config)},n.prototype.getRequiredMarker=function(){if(this.hasConfig())return this.elementData.config.requiredMarker||"*"},n.prototype.toggleFocus=function(n){this.isFocussed=n,this.activateValidationListener()},n.prototype.activateValidationListener=function(){var n=this;this.getElement().valueChanges.subscribe(function(o){o&&!n.touched()&&n.formGroup.get(n.elementData.inputId).markAsTouched()})},n.prototype.getElement=function(){return this.formGroup.get(this.elementData.inputId)},n.prototype.toInputId=function(n){return n.split(" ").map(function(n,o){return 0===o?n.toLowerCase():n.charAt(0).toUpperCase()+n.slice(1).toLowerCase()}).join("")},n.prototype.valid=function(){return this.formGroup.controls[this.elementData.inputId].touched&&this.formGroup.controls[this.elementData.inputId].valid},n.prototype.invalid=function(){return this.formGroup.controls[this.elementData.inputId].touched&&this.formGroup.controls[this.elementData.inputId].invalid},n.prototype.touched=function(){return this.formGroup.controls[this.elementData.inputId].touched},n.prototype.hasValue=function(){return!(!this.formGroup||!this.elementData)&&!!this.formGroup.get(this.elementData.inputId).value},n}();D.decorators=[{type:e.Component,args:[{selector:"app-element-base",template:"",styles:[""]}]}],D.ctorParameters=function(){return[]},D.propDecorators={formGroup:[{type:e.Input}],elementData:[{type:e.Input}],changeEmitter:[{type:e.Output}]};var C=function(n){function o(){return n.call(this)||this}return l(o,n),o.prototype.ngOnInit=function(){this.getFormGroup(),this.setElementStyles()},o.prototype.updateParentFormGroup=function(n){this.formGroup.controls[this.elementData.inputId].setValue(n),this.formGroup.controls[this.elementData.inputId].markAsTouched(),this.isValid()||this.formGroup.get(this.elementData.inputId).setErrors({invalid:"Incorrect number of options selected"})},o.prototype.isValid=function(){var n=this.elementData.minLength||0,o=this.elementData.maxLength||this.getDefaultTotalOptions(),e=this.formGroup.get(this.elementData.inputId).value,t=0;return Object.getOwnPropertyNames(e).forEach(function(n){e[n]&&t++}),t>=n&&t<=o&&this.formGroup.controls[this.elementData.inputId].touched},o.prototype.showCheckboxError=function(){return!!this.elementData.errorText&&!this.isValid()&&this.isTouched()},o.prototype.isTouched=function(){return this.formGroup.get(this.elementData.inputId).touched},o.prototype.getDefaultTotalOptions=function(){if(this.elementData.options)return this.elementData.options.length;var n=0;return this.elementData.optionGroups.forEach(function(o){n+=o.options.length}),n},o}(D);C.decorators=[{type:e.Component,args:[{selector:"app-checkbox",template:'<app-grouped-checkbox-question\n *ngIf="elementData.optionGroups"\n [formGroup]="formGroup"\n [elementData]="elementData">\n</app-grouped-checkbox-question>\n<app-ungrouped-checkbox-question\n *ngIf="!elementData.optionGroups"\n [formGroup]="formGroup"\n [elementData]="elementData">\n</app-ungrouped-checkbox-question>\n',styles:[""]}]}],C.ctorParameters=function(){return[]};var z=function(n){function o(){return n.call(this)||this}return l(o,n),o.prototype.ngOnInit=function(){this.initElement()},o}(D);z.decorators=[{type:e.Component,args:[{selector:"app-date-picker",template:'<div class="field form-group {{elementWrapperClass}}" [formGroup]="formGroup">\n \x3c!-- INPUT LABEL --\x3e\n <app-label\n [labelConfig]="getLabelConfig()">\n </app-label>\n \x3c!-- INPUT FIELD --\x3e\n <input\n [appDefaultAccessibility]="getElementData()"\n [attr.aria-invalid]="!valid()"\n id="{{getId()}}"\n formControlName="{{elementData.inputId}}"\n type="date"\n (focus)="toggleFocus(true)"\n (blur)="toggleFocus(false)"\n class="form-control {{elementInputClass}}"\n [ngClass]=\'{\n valid: valid(),\n invalid: invalid()\n }\'/>\n \x3c!-- VALIDATION MESSAGES --\x3e\n <app-validation-messages [elementData]="elementData" [hasError]="invalid()" [hasFocus]="hasFocus()"></app-validation-messages>\n</div>\n',styles:['fieldset{\n padding:0;\n margin:0;\n border:0;\n min-width:0; }\nlegend{\n display:block;\n width:100%;\n padding:0;\n margin-bottom:20px;\n font-size:21px;\n line-height:inherit;\n color:#333333;\n border:0;\n border-bottom:1px solid #e5e5e5; }\nlabel{\n display:inline-block;\n max-width:100%;\n margin-bottom:5px;\n font-weight:bold; }\ninput[type="search"]{\n -webkit-box-sizing:border-box;\n box-sizing:border-box; }\ninput[type="radio"],\ninput[type="checkbox"]{\n margin:4px 0 0;\n margin-top:1px \\9;\n line-height:normal; }\ninput[type="file"]{\n display:block; }\ninput[type="range"]{\n display:block;\n width:100%; }\nselect[multiple],\nselect[size]{\n height:auto; }\ninput[type="file"]:focus,\ninput[type="radio"]:focus,\ninput[type="checkbox"]:focus{\n outline:5px auto -webkit-focus-ring-color;\n outline-offset:-2px; }\noutput{\n display:block;\n padding-top:7px;\n font-size:14px;\n line-height:1.42857;\n color:#555555; }\n.form-control{\n display:block;\n width:100%;\n height:34px;\n padding:6px 12px;\n font-size:14px;\n line-height:1.42857;\n color:#555555;\n background-color:#fff;\n background-image:none;\n border:1px solid #ccc;\n border-radius:4px;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n -webkit-transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; }\n .form-control:focus{\n border-color:#66afe9;\n outline:0;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }\n .form-control::-moz-placeholder{\n color:#999;\n opacity:1; }\n .form-control:-ms-input-placeholder{\n color:#999; }\n .form-control::-webkit-input-placeholder{\n color:#999; }\n .form-control::-ms-expand{\n border:0;\n background-color:transparent; }\n .form-control[disabled], .form-control[readonly],\n fieldset[disabled] .form-control{\n background-color:#eeeeee;\n opacity:1; }\n .form-control[disabled],\n fieldset[disabled] .form-control{\n cursor:not-allowed; }\ntextarea.form-control{\n height:auto; }\ninput[type="search"]{\n -webkit-appearance:none; }\n@media screen and (-webkit-min-device-pixel-ratio: 0){\n input[type="date"].form-control,\n input[type="time"].form-control,\n input[type="datetime-local"].form-control,\n input[type="month"].form-control{\n line-height:34px; }\n input[type="date"].input-sm,\n .input-group-sm input[type="date"],\n input[type="time"].input-sm,\n .input-group-sm\n input[type="time"],\n input[type="datetime-local"].input-sm,\n .input-group-sm\n input[type="datetime-local"],\n input[type="month"].input-sm,\n .input-group-sm\n input[type="month"]{\n line-height:30px; }\n input[type="date"].input-lg,\n .input-group-lg input[type="date"],\n input[type="time"].input-lg,\n .input-group-lg\n input[type="time"],\n input[type="datetime-local"].input-lg,\n .input-group-lg\n input[type="datetime-local"],\n input[type="month"].input-lg,\n .input-group-lg\n input[type="month"]{\n line-height:46px; } }\n.form-group{\n margin-bottom:15px; }\n.radio,\n.checkbox{\n position:relative;\n display:block;\n margin-top:10px;\n margin-bottom:10px; }\n .radio label,\n .checkbox label{\n min-height:20px;\n padding-left:20px;\n margin-bottom:0;\n font-weight:normal;\n cursor:pointer; }\n.radio input[type="radio"],\n.radio-inline input[type="radio"],\n.checkbox input[type="checkbox"],\n.checkbox-inline input[type="checkbox"]{\n position:absolute;\n margin-left:-20px;\n margin-top:4px \\9; }\n.radio + .radio,\n.checkbox + .checkbox{\n margin-top:-5px; }\n.radio-inline,\n.checkbox-inline{\n position:relative;\n display:inline-block;\n padding-left:20px;\n margin-bottom:0;\n vertical-align:middle;\n font-weight:normal;\n cursor:pointer; }\n.radio-inline + .radio-inline,\n.checkbox-inline + .checkbox-inline{\n margin-top:0;\n margin-left:10px; }\ninput[type="radio"][disabled], input[type="radio"].disabled,\nfieldset[disabled] input[type="radio"],\ninput[type="checkbox"][disabled],\ninput[type="checkbox"].disabled,\nfieldset[disabled]\ninput[type="checkbox"]{\n cursor:not-allowed; }\n.radio-inline.disabled,\nfieldset[disabled] .radio-inline,\n.checkbox-inline.disabled,\nfieldset[disabled]\n.checkbox-inline{\n cursor:not-allowed; }\n.radio.disabled label,\nfieldset[disabled] .radio label,\n.checkbox.disabled label,\nfieldset[disabled]\n.checkbox label{\n cursor:not-allowed; }\n.form-control-static{\n padding-top:7px;\n padding-bottom:7px;\n margin-bottom:0;\n min-height:34px; }\n .form-control-static.input-lg, .form-control-static.input-sm{\n padding-left:0;\n padding-right:0; }\n.input-sm{\n height:30px;\n padding:5px 10px;\n font-size:12px;\n line-height:1.5;\n border-radius:3px; }\nselect.input-sm{\n height:30px;\n line-height:30px; }\ntextarea.input-sm,\nselect[multiple].input-sm{\n height:auto; }\n.form-group-sm .form-control{\n height:30px;\n padding:5px 10px;\n font-size:12px;\n line-height:1.5;\n border-radius:3px; }\n.form-group-sm select.form-control{\n height:30px;\n line-height:30px; }\n.form-group-sm textarea.form-control,\n.form-group-sm select[multiple].form-control{\n height:auto; }\n.form-group-sm .form-control-static{\n height:30px;\n min-height:32px;\n padding:6px 10px;\n font-size:12px;\n line-height:1.5; }\n.input-lg{\n height:46px;\n padding:10px 16px;\n font-size:18px;\n line-height:1.33333;\n border-radius:6px; }\nselect.input-lg{\n height:46px;\n line-height:46px; }\ntextarea.input-lg,\nselect[multiple].input-lg{\n height:auto; }\n.form-group-lg .form-control{\n height:46px;\n padding:10px 16px;\n font-size:18px;\n line-height:1.33333;\n border-radius:6px; }\n.form-group-lg select.form-control{\n height:46px;\n line-height:46px; }\n.form-group-lg textarea.form-control,\n.form-group-lg select[multiple].form-control{\n height:auto; }\n.form-group-lg .form-control-static{\n height:46px;\n min-height:38px;\n padding:11px 16px;\n font-size:18px;\n line-height:1.33333; }\n.has-feedback{\n position:relative; }\n .has-feedback .form-control{\n padding-right:42.5px; }\n.form-control-feedback{\n position:absolute;\n top:0;\n right:0;\n z-index:2;\n display:block;\n width:34px;\n height:34px;\n line-height:34px;\n text-align:center;\n pointer-events:none; }\n.input-lg + .form-control-feedback,\n.input-group-lg + .form-control-feedback,\n.form-group-lg .form-control + .form-control-feedback{\n width:46px;\n height:46px;\n line-height:46px; }\n.input-sm + .form-control-feedback,\n.input-group-sm + .form-control-feedback,\n.form-group-sm .form-control + .form-control-feedback{\n width:30px;\n height:30px;\n line-height:30px; }\n.has-success .help-block,\n.has-success .control-label,\n.has-success .radio,\n.has-success .checkbox,\n.has-success .radio-inline,\n.has-success .checkbox-inline,\n.has-success.radio label,\n.has-success.checkbox label,\n.has-success.radio-inline label,\n.has-success.checkbox-inline label{\n color:#3c763d; }\n.has-success .form-control{\n border-color:#3c763d;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-success .form-control:focus{\n border-color:#2b542c;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; }\n.has-success .input-group-addon{\n color:#3c763d;\n border-color:#3c763d;\n background-color:#dff0d8; }\n.has-success .form-control-feedback{\n color:#3c763d; }\n.has-warning .help-block,\n.has-warning .control-label,\n.has-warning .radio,\n.has-warning .checkbox,\n.has-warning .radio-inline,\n.has-warning .checkbox-inline,\n.has-warning.radio label,\n.has-warning.checkbox label,\n.has-warning.radio-inline label,\n.has-warning.checkbox-inline label{\n color:#8a6d3b; }\n.has-warning .form-control{\n border-color:#8a6d3b;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-warning .form-control:focus{\n border-color:#66512c;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; }\n.has-warning .input-group-addon{\n color:#8a6d3b;\n border-color:#8a6d3b;\n background-color:#fcf8e3; }\n.has-warning .form-control-feedback{\n color:#8a6d3b; }\n.has-error .help-block,\n.has-error .control-label,\n.has-error .radio,\n.has-error .checkbox,\n.has-error .radio-inline,\n.has-error .checkbox-inline,\n.has-error.radio label,\n.has-error.checkbox label,\n.has-error.radio-inline label,\n.has-error.checkbox-inline label{\n color:#a94442; }\n.has-error .form-control{\n border-color:#a94442;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-error .form-control:focus{\n border-color:#843534;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }\n.has-error .input-group-addon{\n color:#a94442;\n border-color:#a94442;\n background-color:#f2dede; }\n.has-error .form-control-feedback{\n color:#a94442; }\n.has-feedback label ~ .form-control-feedback{\n top:25px; }\n.has-feedback label.sr-only ~ .form-control-feedback{\n top:0; }\n.help-block{\n display:block;\n margin-top:5px;\n margin-bottom:10px;\n color:#737373; }\n@media (min-width: 768px){\n .form-inline .form-group{\n display:inline-block;\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .form-control{\n display:inline-block;\n width:auto;\n vertical-align:middle; }\n .form-inline .form-control-static{\n display:inline-block; }\n .form-inline .input-group{\n display:inline-table;\n vertical-align:middle; }\n .form-inline .input-group .input-group-addon,\n .form-inline .input-group .input-group-btn,\n .form-inline .input-group .form-control{\n width:auto; }\n .form-inline .input-group > .form-control{\n width:100%; }\n .form-inline .control-label{\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .radio,\n .form-inline .checkbox{\n display:inline-block;\n margin-top:0;\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .radio label,\n .form-inline .checkbox label{\n padding-left:0; }\n .form-inline .radio input[type="radio"],\n .form-inline .checkbox input[type="checkbox"]{\n position:relative;\n margin-left:0; }\n .form-inline .has-feedback .form-control-feedback{\n top:0; } }\n.form-horizontal .radio,\n.form-horizontal .checkbox,\n.form-horizontal .radio-inline,\n.form-horizontal .checkbox-inline{\n margin-top:0;\n margin-bottom:0;\n padding-top:7px; }\n.form-horizontal .radio,\n.form-horizontal .checkbox{\n min-height:27px; }\n.form-horizontal .form-group{\n margin-left:-15px;\n margin-right:-15px; }\n .form-horizontal .form-group:before, .form-horizontal .form-group:after{\n content:" ";\n display:table; }\n .form-horizontal .form-group:after{\n clear:both; }\n@media (min-width: 768px){\n .form-horizontal .control-label{\n text-align:right;\n margin-bottom:0;\n padding-top:7px; } }\n.form-horizontal .has-feedback .form-control-feedback{\n right:15px; }\n@media (min-width: 768px){\n .form-horizontal .form-group-lg .control-label{\n padding-top:11px;\n font-size:18px; } }\n@media (min-width: 768px){\n .form-horizontal .form-group-sm .control-label{\n padding-top:6px;\n font-size:12px; } }\nfieldset{\n display:block;\n width:100%;\n padding:6px 12px;\n font-size:14px;\n line-height:1.42857143;\n color:#555555;\n background-color:#fff;\n background-image:none;\n border:1px solid #ccc;\n border-radius:4px;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n -webkit-transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; }\n.field{\n position:relative; }\n.form-group{\n display:block; }\n.form-control.valid{\n border-color:#7bb752; }\n .form-control.valid:focus{\n border-color:#28a745;\n -webkit-box-shadow:0 0 0 0.2rem rgba(40, 167, 69, 0.25);\n box-shadow:0 0 0 0.2rem rgba(40, 167, 69, 0.25); }\n.form-control.invalid{\n border-color:red; }\n .form-control.invalid:focus{\n border-color:#dc3545;\n -webkit-box-shadow:0 0 0 0.2rem rgba(220, 53, 69, 0.25);\n box-shadow:0 0 0 0.2rem rgba(220, 53, 69, 0.25); }\n',""]}]}],z.ctorParameters=function(){return[]};var E=function(n){function o(){return n.call(this)||this}return l(o,n),o.prototype.ngOnInit=function(){this.initElement()},o}(D);E.decorators=[{type:e.Component,args:[{selector:"app-dropdown-question",template:'<app-grouped-dropdown-question [formGroup]="formGroup" *ngIf="elementData.optionGroups" [elementData]="elementData"></app-grouped-dropdown-question>\n<app-ungrouped-dropdown-question [formGroup]="formGroup" *ngIf="!elementData.optionGroups" [elementData]="elementData"></app-ungrouped-dropdown-question>\n',styles:["select{\n width:100%;\n padding:15px;\n margin-bottom:3px; }\n.field{\n position:relative; }\n"]}]}],E.ctorParameters=function(){return[]};var G=function(n){function o(){return n.call(this)||this}return l(o,n),o.prototype.ngOnInit=function(){this.initElement()},o}(D);G.decorators=[{type:e.Component,args:[{selector:"app-password-input",template:'<div class="form-group {{elementWrapperClass}}" [formGroup]="formGroup">\n \x3c!-- INPUT LABEL --\x3e\n <app-label\n [labelConfig]="getLabelConfig()">\n </app-label>\n \x3c!-- INPUT FIELD --\x3e\n <input\n [appDefaultAccessibility]="getElementData()"\n [attr.aria-invalid]="!valid()"\n id="{{getId()}}"\n formControlName="{{elementData.inputId}}"\n (focus)="toggleFocus(true)"\n (blur)="toggleFocus(false)"\n type="password"\n class="form-control {{elementInputClass}}"\n [ngClass]=\'{\n valid: valid(),\n invalid: invalid()\n }\'/>\n \x3c!-- VALIDATION MESSAGES --\x3e\n <app-validation-messages [elementData]="elementData" [hasError]="invalid()" [hasFocus]="hasFocus()"></app-validation-messages>\n</div>\n',styles:['fieldset{\n padding:0;\n margin:0;\n border:0;\n min-width:0; }\nlegend{\n display:block;\n width:100%;\n padding:0;\n margin-bottom:20px;\n font-size:21px;\n line-height:inherit;\n color:#333333;\n border:0;\n border-bottom:1px solid #e5e5e5; }\nlabel{\n display:inline-block;\n max-width:100%;\n margin-bottom:5px;\n font-weight:bold; }\ninput[type="search"]{\n -webkit-box-sizing:border-box;\n box-sizing:border-box; }\ninput[type="radio"],\ninput[type="checkbox"]{\n margin:4px 0 0;\n margin-top:1px \\9;\n line-height:normal; }\ninput[type="file"]{\n display:block; }\ninput[type="range"]{\n display:block;\n width:100%; }\nselect[multiple],\nselect[size]{\n height:auto; }\ninput[type="file"]:focus,\ninput[type="radio"]:focus,\ninput[type="checkbox"]:focus{\n outline:5px auto -webkit-focus-ring-color;\n outline-offset:-2px; }\noutput{\n display:block;\n padding-top:7px;\n font-size:14px;\n line-height:1.42857;\n color:#555555; }\n.form-control{\n display:block;\n width:100%;\n height:34px;\n padding:6px 12px;\n font-size:14px;\n line-height:1.42857;\n color:#555555;\n background-color:#fff;\n background-image:none;\n border:1px solid #ccc;\n border-radius:4px;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n -webkit-transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; }\n .form-control:focus{\n border-color:#66afe9;\n outline:0;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }\n .form-control::-moz-placeholder{\n color:#999;\n opacity:1; }\n .form-control:-ms-input-placeholder{\n color:#999; }\n .form-control::-webkit-input-placeholder{\n color:#999; }\n .form-control::-ms-expand{\n border:0;\n background-color:transparent; }\n .form-control[disabled], .form-control[readonly],\n fieldset[disabled] .form-control{\n background-color:#eeeeee;\n opacity:1; }\n .form-control[disabled],\n fieldset[disabled] .form-control{\n cursor:not-allowed; }\ntextarea.form-control{\n height:auto; }\ninput[type="search"]{\n -webkit-appearance:none; }\n@media screen and (-webkit-min-device-pixel-ratio: 0){\n input[type="date"].form-control,\n input[type="time"].form-control,\n input[type="datetime-local"].form-control,\n input[type="month"].form-control{\n line-height:34px; }\n input[type="date"].input-sm,\n .input-group-sm input[type="date"],\n input[type="time"].input-sm,\n .input-group-sm\n input[type="time"],\n input[type="datetime-local"].input-sm,\n .input-group-sm\n input[type="datetime-local"],\n input[type="month"].input-sm,\n .input-group-sm\n input[type="month"]{\n line-height:30px; }\n input[type="date"].input-lg,\n .input-group-lg input[type="date"],\n input[type="time"].input-lg,\n .input-group-lg\n input[type="time"],\n input[type="datetime-local"].input-lg,\n .input-group-lg\n input[type="datetime-local"],\n input[type="month"].input-lg,\n .input-group-lg\n input[type="month"]{\n line-height:46px; } }\n.form-group{\n margin-bottom:15px; }\n.radio,\n.checkbox{\n position:relative;\n display:block;\n margin-top:10px;\n margin-bottom:10px; }\n .radio label,\n .checkbox label{\n min-height:20px;\n padding-left:20px;\n margin-bottom:0;\n font-weight:normal;\n cursor:pointer; }\n.radio input[type="radio"],\n.radio-inline input[type="radio"],\n.checkbox input[type="checkbox"],\n.checkbox-inline input[type="checkbox"]{\n position:absolute;\n margin-left:-20px;\n margin-top:4px \\9; }\n.radio + .radio,\n.checkbox + .checkbox{\n margin-top:-5px; }\n.radio-inline,\n.checkbox-inline{\n position:relative;\n display:inline-block;\n padding-left:20px;\n margin-bottom:0;\n vertical-align:middle;\n font-weight:normal;\n cursor:pointer; }\n.radio-inline + .radio-inline,\n.checkbox-inline + .checkbox-inline{\n margin-top:0;\n margin-left:10px; }\ninput[type="radio"][disabled], input[type="radio"].disabled,\nfieldset[disabled] input[type="radio"],\ninput[type="checkbox"][disabled],\ninput[type="checkbox"].disabled,\nfieldset[disabled]\ninput[type="checkbox"]{\n cursor:not-allowed; }\n.radio-inline.disabled,\nfieldset[disabled] .radio-inline,\n.checkbox-inline.disabled,\nfieldset[disabled]\n.checkbox-inline{\n cursor:not-allowed; }\n.radio.disabled label,\nfieldset[disabled] .radio label,\n.checkbox.disabled label,\nfieldset[disabled]\n.checkbox label{\n cursor:not-allowed; }\n.form-control-static{\n padding-top:7px;\n padding-bottom:7px;\n margin-bottom:0;\n min-height:34px; }\n .form-control-static.input-lg, .form-control-static.input-sm{\n padding-left:0;\n padding-right:0; }\n.input-sm{\n height:30px;\n padding:5px 10px;\n font-size:12px;\n line-height:1.5;\n border-radius:3px; }\nselect.input-sm{\n height:30px;\n line-height:30px; }\ntextarea.input-sm,\nselect[multiple].input-sm{\n height:auto; }\n.form-group-sm .form-control{\n height:30px;\n padding:5px 10px;\n font-size:12px;\n line-height:1.5;\n border-radius:3px; }\n.form-group-sm select.form-control{\n height:30px;\n line-height:30px; }\n.form-group-sm textarea.form-control,\n.form-group-sm select[multiple].form-control{\n height:auto; }\n.form-group-sm .form-control-static{\n height:30px;\n min-height:32px;\n padding:6px 10px;\n font-size:12px;\n line-height:1.5; }\n.input-lg{\n height:46px;\n padding:10px 16px;\n font-size:18px;\n line-height:1.33333;\n border-radius:6px; }\nselect.input-lg{\n height:46px;\n line-height:46px; }\ntextarea.input-lg,\nselect[multiple].input-lg{\n height:auto; }\n.form-group-lg .form-control{\n height:46px;\n padding:10px 16px;\n font-size:18px;\n line-height:1.33333;\n border-radius:6px; }\n.form-group-lg select.form-control{\n height:46px;\n line-height:46px; }\n.form-group-lg textarea.form-control,\n.form-group-lg select[multiple].form-control{\n height:auto; }\n.form-group-lg .form-control-static{\n height:46px;\n min-height:38px;\n padding:11px 16px;\n font-size:18px;\n line-height:1.33333; }\n.has-feedback{\n position:relative; }\n .has-feedback .form-control{\n padding-right:42.5px; }\n.form-control-feedback{\n position:absolute;\n top:0;\n right:0;\n z-index:2;\n display:block;\n width:34px;\n height:34px;\n line-height:34px;\n text-align:center;\n pointer-events:none; }\n.input-lg + .form-control-feedback,\n.input-group-lg + .form-control-feedback,\n.form-group-lg .form-control + .form-control-feedback{\n width:46px;\n height:46px;\n line-height:46px; }\n.input-sm + .form-control-feedback,\n.input-group-sm + .form-control-feedback,\n.form-group-sm .form-control + .form-control-feedback{\n width:30px;\n height:30px;\n line-height:30px; }\n.has-success .help-block,\n.has-success .control-label,\n.has-success .radio,\n.has-success .checkbox,\n.has-success .radio-inline,\n.has-success .checkbox-inline,\n.has-success.radio label,\n.has-success.checkbox label,\n.has-success.radio-inline label,\n.has-success.checkbox-inline label{\n color:#3c763d; }\n.has-success .form-control{\n border-color:#3c763d;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-success .form-control:focus{\n border-color:#2b542c;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; }\n.has-success .input-group-addon{\n color:#3c763d;\n border-color:#3c763d;\n background-color:#dff0d8; }\n.has-success .form-control-feedback{\n color:#3c763d; }\n.has-warning .help-block,\n.has-warning .control-label,\n.has-warning .radio,\n.has-warning .checkbox,\n.has-warning .radio-inline,\n.has-warning .checkbox-inline,\n.has-warning.radio label,\n.has-warning.checkbox label,\n.has-warning.radio-inline label,\n.has-warning.checkbox-inline label{\n color:#8a6d3b; }\n.has-warning .form-control{\n border-color:#8a6d3b;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-warning .form-control:focus{\n border-color:#66512c;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; }\n.has-warning .input-group-addon{\n color:#8a6d3b;\n border-color:#8a6d3b;\n background-color:#fcf8e3; }\n.has-warning .form-control-feedback{\n color:#8a6d3b; }\n.has-error .help-block,\n.has-error .control-label,\n.has-error .radio,\n.has-error .checkbox,\n.has-error .radio-inline,\n.has-error .checkbox-inline,\n.has-error.radio label,\n.has-error.checkbox label,\n.has-error.radio-inline label,\n.has-error.checkbox-inline label{\n color:#a94442; }\n.has-error .form-control{\n border-color:#a94442;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); }\n .has-error .form-control:focus{\n border-color:#843534;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; }\n.has-error .input-group-addon{\n color:#a94442;\n border-color:#a94442;\n background-color:#f2dede; }\n.has-error .form-control-feedback{\n color:#a94442; }\n.has-feedback label ~ .form-control-feedback{\n top:25px; }\n.has-feedback label.sr-only ~ .form-control-feedback{\n top:0; }\n.help-block{\n display:block;\n margin-top:5px;\n margin-bottom:10px;\n color:#737373; }\n@media (min-width: 768px){\n .form-inline .form-group{\n display:inline-block;\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .form-control{\n display:inline-block;\n width:auto;\n vertical-align:middle; }\n .form-inline .form-control-static{\n display:inline-block; }\n .form-inline .input-group{\n display:inline-table;\n vertical-align:middle; }\n .form-inline .input-group .input-group-addon,\n .form-inline .input-group .input-group-btn,\n .form-inline .input-group .form-control{\n width:auto; }\n .form-inline .input-group > .form-control{\n width:100%; }\n .form-inline .control-label{\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .radio,\n .form-inline .checkbox{\n display:inline-block;\n margin-top:0;\n margin-bottom:0;\n vertical-align:middle; }\n .form-inline .radio label,\n .form-inline .checkbox label{\n padding-left:0; }\n .form-inline .radio input[type="radio"],\n .form-inline .checkbox input[type="checkbox"]{\n position:relative;\n margin-left:0; }\n .form-inline .has-feedback .form-control-feedback{\n top:0; } }\n.form-horizontal .radio,\n.form-horizontal .checkbox,\n.form-horizontal .radio-inline,\n.form-horizontal .checkbox-inline{\n margin-top:0;\n margin-bottom:0;\n padding-top:7px; }\n.form-horizontal .radio,\n.form-horizontal .checkbox{\n min-height:27px; }\n.form-horizontal .form-group{\n margin-left:-15px;\n margin-right:-15px; }\n .form-horizontal .form-group:before, .form-horizontal .form-group:after{\n content:" ";\n display:table; }\n .form-horizontal .form-group:after{\n clear:both; }\n@media (min-width: 768px){\n .form-horizontal .control-label{\n text-align:right;\n margin-bottom:0;\n padding-top:7px; } }\n.form-horizontal .has-feedback .form-control-feedback{\n right:15px; }\n@media (min-width: 768px){\n .form-horizontal .form-group-lg .control-label{\n padding-top:11px;\n font-size:18px; } }\n@media (min-width: 768px){\n .form-horizontal .form-group-sm .control-label{\n padding-top:6px;\n font-size:12px; } }\nfieldset{\n display:block;\n width:100%;\n padding:6px 12px;\n font-size:14px;\n line-height:1.42857143;\n color:#555555;\n background-color:#fff;\n background-image:none;\n border:1px solid #ccc;\n border-radius:4px;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n -webkit-transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; }\n.field{\n position:relative; }\n.form-group{\n display:block; }\n.form-control.valid{\n border-color:#7bb752; }\n .form-control.valid:focus{\n border-color:#28a745;\n -webkit-box-shadow:0 0 0 0.2rem rgba(40, 167, 69, 0.25);\n box-shadow:0 0 0 0.2rem rgba(40, 167, 69, 0.25); }\n.form-control.invalid{\n border-color:red; }\n .form-control.invalid:focus{\n border-color:#dc3545;\n -webkit-box-shadow:0 0 0 0.2rem rgba(220, 53, 69, 0.25);\n box-shadow:0 0 0 0.2rem rgba(220, 53, 69, 0.25); }\n',".asterisk{\n color:red; }\n"]}]}],G.ctorParameters=function(){return[]};var A=function(n){function o(){return n.call(this)||this}return l(o,n),o.prototype.ngOnInit=function(){this.initElement()},o}(D);A.decorators=[{type:e.Component,args:[{selector:"app-text-input",template:'<div class="form-group {{elementWrapperClass}}" [formGroup]="formGroup">\n \x3c!-- INPUT LABEL --\x3e\n <app-label\n [labelConfig]="getLabelConfig()">\n </app-label>\n \x3c!-- INPUT FIELD --\x3e\n <input\n [appDefaultAccessibility]="getElementData()"\n [attr.aria-invalid]="!valid()"\n id="{{getId()}}"\n formControlName="{{elementData.inputId}}"\n (focus)="toggleFocus(true)"\n (blur)="toggleFocus(false)"\n class="form-control {{elementInputClass}}"\n type="text"\n [ngClass]=\'{\n valid: valid(),\n invalid: invalid()\n }\'/>\n \x3c!-- VALIDATION MESSAGES --\x3e\n <app-validation-messages [elementData]="elementData" [hasError]="invalid()" [hasFocus]="hasFocus()"></app-validation-messages>\n</div>\n',styles:['fieldset{\n padding:0;\n margin:0;\n border:0;\n min-width:0; }\nlegend{\n display:block;\n width:100%;\n padding:0;\n margin-bottom:20px;\n font-size:21px;\n line-height:inherit;\n color:#333333;\n border:0;\n border-bottom:1px solid #e5e5e5; }\nlabel{\n display:inline-block;\n max-width:100%;\n margin-bottom:5px;\n font-weight:bold; }\ninput[type="search"]{\n -webkit-box-sizing:border-box;\n box-sizing:border-box; }\ninput[type="radio"],\ninput[type="checkbox"]{\n margin:4px 0 0;\n margin-top:1px \\9;\n line-height:normal; }\ninput[type="file"]{\n display:block; }\ninput[type="range"]{\n display:block;\n width:100%; }\nselect[multiple],\nselect[size]{\n height:auto; }\ninput[type="file"]:focus,\ninput[type="radio"]:focus,\ninput[type="checkbox"]:focus{\n outline:5px auto -webkit-focus-ring-color;\n outline-offset:-2px; }\noutput{\n display:block;\n padding-top:7px;\n font-size:14px;\n line-height:1.42857;\n color:#555555; }\n.form-control{\n display:block;\n width:100%;\n height:34px;\n padding:6px 12px;\n font-size:14px;\n line-height:1.42857;\n color:#555555;\n background-color:#fff;\n background-image:none;\n border:1px solid #ccc;\n border-radius:4px;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);\n -webkit-transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n -webkit-transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; }\n .form-control:focus{\n border-color:#66afe9;\n outline:0;\n -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);\n box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }\n .form-control::-moz-placeholder{\n color:#999;\n opacity:1; }\n .form-control:-ms-input-placeholder{\n color:#999; }\n .form-control::-webkit-input-placeholder{\n color:#999; }\n .form-control::-ms-expand{\n border:0;\n background-color:transparent; }\n .form-control[disabled], .form-control[readonly],\n fieldset[disabled] .form-control{\n background-color:#eeeeee;\n opacity:1; }\n .form-control[disabled],\n fieldset[disabled] .form-control{\n cursor:not-allowed; }\ntextarea.form-control{\n height:auto; }\ninput[type="search"]{\n -webkit-appearance:none; }\n@media screen and (-webkit-min-device-pixel-ratio: 0){\n input[type="date"].form-control,\n input[type="time"].form-control,\n input[type="datetime-local"].form-control,\n input[type="month"].form-control{\n line-height