[{"__symbolic":"module","version":3,"metadata":{"DynamicFormQuestionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"df-question","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"template":"\n    <div [class]=\"'form-group ' + question.key\" [id]=\"question.key + '-group'\"\n      *ngIf=\"question.showField === undefined ? true : question.showField\"\n      [class.has-error]=\"isNotValid || question.errorTrigger\" [class.has-valid]=\"isValid\" [class.needs-input]=\"needsInput\"\n      [formGroup]=\"form\">\n      <template #tooltipTemplate><div [innerHtml]=\"question.tooltip\"></div></template>\n      <div [ngSwitch]=\"question.tag\">\n        <button *ngSwitchCase=\"'button'\" [id]=\"question.key\" type=\"button\" [disabled]=\"question.disabled\"\n                [class]=\"question.class\" (click)=\"question.fn(form, template, question.key)\">\n                <span *ngIf=\"question.btnImg\" [class]=\"question.btnImg\" aria-hidden=\"true\"></span>\n            {{question.value}}\n        </button>\n\n        <div *ngSwitchCase=\"'checkbox'\" class=\"checkbox\" >\n          <label class=\"control-label\" [attr.for]=\"question.key\">\n            <input [formControlName]=\"question.key\" [id]=\"question.key\" type=\"checkbox\" [class]=\"question.class\">\n            <span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip-checkbox\">\n                {{question.tooltipLink}}\n                <span *ngIf=\"!question.tooltipLink\" class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n        </div>\n\n        <div *ngSwitchCase=\"'dropdown'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <select [id]=\"question.key\" [formControlName]=\"question.key\" [class]=\"'form-control ' + question.class\" [attr.disabled]=\"question.disabled\">\n              <option value=\"\" selected disabled>{{question.placeholder || ''}}</option>\n              <option *ngFor=\"let opt of question.options\" [value]=\"opt.key\" [disabled]=\"opt.disabled\" [innerHTML]=\"opt.value\"></option>\n            </select>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'radio'\" [id]=\"question.key\" class=\"radio-group\">\n          <label *ngIf=\"question.label\" [class]=\"'control-label ' + (question.labelClass || '')\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n              <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n            <p class=\"help-block\" *ngIf=\"question.helper\">{{question.helper}}</p>\n          </label>\n          <div class=\"input-container\">\n            <div *ngFor=\"let opt of question.options\" [class]=\"'radio-option ' + (question.type || '')\">\n              <label [class.opt-valid]=\"isChecked(opt.key)\">\n                <input [formControlName]=\"question.key\" type=\"radio\" [name]=\"question.key\" [value]=\"opt.key\" [class]=\"question.class\" [attr.disabled]=\"opt.disabled\">\n                <span [innerHTML]=\"opt.value\"></span>\n                <a *ngIf=\"opt.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"opt.tooltip\" class=\"custom-tooltip\">\n                  <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n                </a>\n                <div class=\"option-helper\" *ngIf=\"opt.helper\">\n                  <div *ngFor=\"let line of opt.helper.split('\n')\">{{line}}</div>\n                </div>\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'text'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip-checkbox\">\n              <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n          </label>\n          <div [class]=\"question.format !== 'percentage' ? 'input-container' : 'input-group'\">\n            <input *ngIf=\"question.format !== 'currency'\" [formControlName]=\"question.key\" [id]=\"question.key\" [attr.disabled]=\"question.disabled\"\n                  [attr.readonly]=\"question.readonly\" [type]=\"question.type\" [class]=\"'form-control ' + question.class\"\n                  [placeholder]=\"question.placeholder || ''\" [format]=\"question.format\">\n            <input *ngIf=\"question.format === 'currency'\" [formControlName]=\"question.key\" [id]=\"question.key\" [attr.disabled]=\"question.disabled\"\n                  [attr.readonly]=\"question.readonly\" [type]=\"question.type\" [class]=\"'form-control ' + question.class\"\n                  [placeholder]=\"question.placeholder || ''\" [textMask]=\"{mask: currencyMask}\">\n            <span *ngIf=\"question.format === 'percentage'\" class=\"input-group-addon\">%</span>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'textarea'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <textarea [formControlName]=\"question.key\" [id]=\"question.key\" [rows]=\"question.rows\"\n                  [class]=\"'form-control ' + question.class\" [attr.readonly]=\"question.readonly\"\n                  [placeholder]=\"question.placeholder || ''\"></textarea>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'title'\" >\n          <div [id]=\"question.key\" [class]=\"'section-header ' + question.class\"><span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'subtitle'\" >\n          <div [id]=\"question.key\" [class]=\"'subtitle ' + question.class\"><span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'typeahead'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <input [formControlName]=\"question.key\" [id]=\"question.key\" [class]=\"'form-control ' + question.class\"\n                    [placeholder]=\"question.placeholder || ''\" [attr.readonly]=\"question.readonly\" [typeahead]=\"question.options\"\n                    [typeaheadOptionField]=\"question.typeaheadOptionField || ''\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n                    [typeaheadMinLength]=\"question.typeaheadMinLength || 0\" [typeaheadOptionsLimit]=\"question.typeaheadOptionsLimit || 100\"\n                    (blur)=\"typeaheadOnBlur($event)\" [attr.disabled]=\"question.disabled\">\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'industry'\" class=\"industrySelect\">\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <input *ngIf=\"!viewFull\" [formControlName]=\"question.key\" [id]=\"question.key\" [class]=\"'form-control ' + question.class\"\n                    [placeholder]=\"question.placeholder || ''\" [attr.readonly]=\"question.readonly\" [typeahead]=\"question.categories\"\n                    [typeaheadOptionField]=\"question.typeaheadOptionField || ''\" (typeaheadOnSelect)=\"tableOnSelect($event)\"\n                    [typeaheadMinLength]=\"question.typeaheadMinLength || 0\" [typeaheadOptionsLimit]=\"question.typeaheadOptionsLimit || 100\"\n                    (blur)=\"typeaheadOnBlur($event)\" [attr.disabled]=\"question.disabled\"\n                    (typeaheadNoResults)=\"changeY($event)\">\n            <div *ngIf=\"this.form.controls[this.question.key].value.length > 0 && viewBtn && !viewFull\"\n              class=\"view-full\" [style.bottom]=\"noResultsY + 'px'\"\n              [style.border-top-right-radius]=\"typeaheadNoResults ? '5px' : '0'\"\n              [style.border-top-left-radius]=\"typeaheadNoResults ? '5px' : '0'\">\n              <div *ngIf=\"typeaheadNoResults\" class=\"empty-list\">...Can't seem to find it?</div>\n              <a (mousedown)=\"viewFullTable(true)\" class=\"empty-btn\">View Full List</a>\n            </div>\n            <div *ngIf=\"viewFull\" class=\"table-container row\">\n              <div class=\"table-border col-sm-6\">\n                <h4 class=\"table-header\">{{question.label1}}</h4>\n                <div class=\"table-view\">\n                  <div *ngFor=\"let opt of question.options\">\n                    <a class=\"table-btn table-hover\" [innerHTML]=\"opt.value\"\n                    [class.table-active]=\"selected === opt.key\"\n                    (click)=\"selectTable(opt)\"></a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"table-border col-sm-6\">\n                <h4 class=\"table-header\">{{question.label2}}</h4>\n                <div class=\"table-view\">\n                  <div *ngFor=\"let opt of categories\">\n                    <a class=\"table-btn table-category\" [innerHTML]=\"opt.value\"\n                    (click)=\"selectCategory(opt)\"></a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"align-right\">\n                <a (click)=\"viewFullTable(false)\">Cancel</a>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'error'\" >\n          <div [id]=\"question.key\" [class]=\"'errorMessage ' + question.class\"><span [innerHTML]=\"question.message\"></span></div>\n        </div>\n\n        <div *ngSwitchCase=\"'fieldError'\" >\n          <div *ngIf=\"form.controls[question.field] && form.controls[question.field].errors\" [id]=\"question.key\" [class]=\"'errorMessage ' + question.class\"><span [innerHTML]=\"question.message\"></span></div>\n        </div>\n\n        <p class=\"help-block\" *ngIf=\"question.helper\"><span [innerHTML]=\"question.helper\"></span></p>\n      </div>\n      <div class=\"errorMessage\" *ngIf=\"errors\">{{errors.message || 'This field is required.'}}</div>\n    </div>\n  ","styles":["\n    a {\n      cursor: pointer;\n    }\n\n    .align-right {\n      text-align: right;\n    }\n\n    .industrySelect {\n      .input-container {\n        position: relative;\n      }\n    }\n\n    .empty-list {\n      border-bottom: 1px solid rgba(0,0,0,.15);\n      padding: 10px;\n    }\n\n    .empty-btn {\n      text-align: center;\n      display: block;\n      padding: 5px;\n    }\n\n    .tooltip-icon {\n      display: inline-block;\n      border: 1px solid #337ab7;\n      border-radius: 50%;\n      width: 17px;\n      height: 17px;\n      font-size: 12px;\n      color: #337ab7;\n      text-align: center;\n    }\n\n    .view-full {\n      display: block;\n      position: absolute;\n      background: white;\n      width: 100%;\n      z-index: 1000;\n      border: 1px solid rgba(0,0,0,.15);\n      border-bottom-left-radius: 5px;\n      border-bottom-right-radius: 5px;\n      box-shadow: 0 6px 12px rgba(0,0,0,.175);\n    }\n\n    .table {\n      margin: 0;\n      .col-sm-6 {\n        padding: 0;\n      }\n      &-container {\n        margin: 0;\n      }\n      &-border {\n        border: 1px solid #cccccc;\n      }\n      &-view {\n        height: 250px;\n        overflow: scroll;\n      }\n      &-header {\n        padding-left: 10px;\n      }\n      &-btn {\n        transition: .3s;\n        display: block;\n        text-align: left;\n        width: 100%;\n        padding: 10px;\n        border: none;\n        color: black;\n        text-decoration: none;\n      }\n      &-category {\n        &:hover {\n          color: #158cbf;\n          background: white;\n        }\n      }\n      &-hover {\n        &:hover {\n          color: white;\n          background: #158cbf;\n        }\n      }\n      &-active {\n        color: white;\n        background: #158cbf;\n      }\n    }\n  "]}]}],"members":{"question":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"prefill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"typeaheadOnSelect":[{"__symbolic":"method"}],"typeaheadOnBlur":[{"__symbolic":"method"}],"tableOnSelect":[{"__symbolic":"method"}],"changeviewBtn":[{"__symbolic":"method"}],"viewFullTable":[{"__symbolic":"method"}],"selectTable":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"changeY":[{"__symbolic":"method"}],"isChecked":[{"__symbolic":"method"}],"touchFieldAndUpdate":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DynamicFormQuestionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"df-question","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation"},"member":"None"},"template":"\n    <div [class]=\"'form-group ' + question.key\" [id]=\"question.key + '-group'\"\n      *ngIf=\"question.showField === undefined ? true : question.showField\"\n      [class.has-error]=\"isNotValid || question.errorTrigger\" [class.has-valid]=\"isValid\" [class.needs-input]=\"needsInput\"\n      [formGroup]=\"form\">\n      <template #tooltipTemplate><div [innerHtml]=\"question.tooltip\"></div></template>\n      <div [ngSwitch]=\"question.tag\">\n        <button *ngSwitchCase=\"'button'\" [id]=\"question.key\" type=\"button\" [disabled]=\"question.disabled\"\n                [class]=\"question.class\" (click)=\"question.fn(form, template, question.key)\">\n                <span *ngIf=\"question.btnImg\" [class]=\"question.btnImg\" aria-hidden=\"true\"></span>\n            {{question.value}}\n        </button>\n\n        <div *ngSwitchCase=\"'checkbox'\" class=\"checkbox\" >\n          <label class=\"control-label\" [attr.for]=\"question.key\">\n            <input [formControlName]=\"question.key\" [id]=\"question.key\" type=\"checkbox\" [class]=\"question.class\">\n            <span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip-checkbox\">\n                {{question.tooltipLink}}\n                <span *ngIf=\"!question.tooltipLink\" class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n        </div>\n\n        <div *ngSwitchCase=\"'dropdown'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <select [id]=\"question.key\" [formControlName]=\"question.key\" [class]=\"'form-control ' + question.class\" [attr.disabled]=\"question.disabled\">\n              <option value=\"\" selected disabled>{{question.placeholder || ''}}</option>\n              <option *ngFor=\"let opt of question.options\" [value]=\"opt.key\" [disabled]=\"opt.disabled\" [innerHTML]=\"opt.value\"></option>\n            </select>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'radio'\" [id]=\"question.key\" class=\"radio-group\">\n          <label *ngIf=\"question.label\" [class]=\"'control-label ' + (question.labelClass || '')\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n              <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n            <p class=\"help-block\" *ngIf=\"question.helper\">{{question.helper}}</p>\n          </label>\n          <div class=\"input-container\">\n            <div *ngFor=\"let opt of question.options\" [class]=\"'radio-option ' + (question.type || '')\">\n              <label [class.opt-valid]=\"isChecked(opt.key)\">\n                <input [formControlName]=\"question.key\" type=\"radio\" [name]=\"question.key\" [value]=\"opt.key\" [class]=\"question.class\" [attr.disabled]=\"opt.disabled\">\n                <span [innerHTML]=\"opt.value\"></span>\n                <a *ngIf=\"opt.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"opt.tooltip\" class=\"custom-tooltip\">\n                  <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n                </a>\n                <div class=\"option-helper\" *ngIf=\"opt.helper\">\n                  <div *ngFor=\"let line of opt.helper.split('\n')\">{{line}}</div>\n                </div>\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'text'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip-checkbox\">\n              <span class=\"tooltip-icon\" (mouseenter)=\"(question.fn)? question.fn(question.key): undefined\">?</span>\n            </a>\n          </label>\n          <div [class]=\"question.format !== 'percentage' ? 'input-container' : 'input-group'\">\n            <input *ngIf=\"question.format !== 'currency'\" [formControlName]=\"question.key\" [id]=\"question.key\" [attr.disabled]=\"question.disabled\"\n                  [attr.readonly]=\"question.readonly\" [type]=\"question.type\" [class]=\"'form-control ' + question.class\"\n                  [placeholder]=\"question.placeholder || ''\" [format]=\"question.format\">\n            <input *ngIf=\"question.format === 'currency'\" [formControlName]=\"question.key\" [id]=\"question.key\" [attr.disabled]=\"question.disabled\"\n                  [attr.readonly]=\"question.readonly\" [type]=\"question.type\" [class]=\"'form-control ' + question.class\"\n                  [placeholder]=\"question.placeholder || ''\" [textMask]=\"{mask: currencyMask}\">\n            <span *ngIf=\"question.format === 'percentage'\" class=\"input-group-addon\">%</span>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'textarea'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <textarea [formControlName]=\"question.key\" [id]=\"question.key\" [rows]=\"question.rows\"\n                  [class]=\"'form-control ' + question.class\" [attr.readonly]=\"question.readonly\"\n                  [placeholder]=\"question.placeholder || ''\"></textarea>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'title'\" >\n          <div [id]=\"question.key\" [class]=\"'section-header ' + question.class\"><span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'subtitle'\" >\n          <div [id]=\"question.key\" [class]=\"'subtitle ' + question.class\"><span [innerHTML]=\"question.label\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'typeahead'\" >\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <input [formControlName]=\"question.key\" [id]=\"question.key\" [class]=\"'form-control ' + question.class\"\n                    [placeholder]=\"question.placeholder || ''\" [attr.readonly]=\"question.readonly\" [typeahead]=\"question.options\"\n                    [typeaheadOptionField]=\"question.typeaheadOptionField || ''\" (typeaheadOnSelect)=\"typeaheadOnSelect($event)\"\n                    [typeaheadMinLength]=\"question.typeaheadMinLength || 0\" [typeaheadOptionsLimit]=\"question.typeaheadOptionsLimit || 100\"\n                    (blur)=\"typeaheadOnBlur($event)\" [attr.disabled]=\"question.disabled\">\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'industry'\" class=\"industrySelect\">\n          <label *ngIf=\"question.label\" class=\"control-label\" [attr.for]=\"question.key\">\n            <span [innerHTML]=\"question.label !== ' ' ? question.label : ' '\"></span>\n            <a *ngIf=\"question.tooltip\" [placement]=\"question.placement || 'top'\" [tooltip]=\"tooltipTemplate\" class=\"custom-tooltip\">\n                <span class=\"tooltip-icon\">?</span>\n            </a>\n          </label>\n          <div class=\"input-container\">\n            <input *ngIf=\"!viewFull\" [formControlName]=\"question.key\" [id]=\"question.key\" [class]=\"'form-control ' + question.class\"\n                    [placeholder]=\"question.placeholder || ''\" [attr.readonly]=\"question.readonly\" [typeahead]=\"question.categories\"\n                    [typeaheadOptionField]=\"question.typeaheadOptionField || ''\" (typeaheadOnSelect)=\"tableOnSelect($event)\"\n                    [typeaheadMinLength]=\"question.typeaheadMinLength || 0\" [typeaheadOptionsLimit]=\"question.typeaheadOptionsLimit || 100\"\n                    (blur)=\"typeaheadOnBlur($event)\" [attr.disabled]=\"question.disabled\"\n                    (typeaheadNoResults)=\"changeY($event)\">\n            <div *ngIf=\"this.form.controls[this.question.key].value.length > 0 && viewBtn && !viewFull\"\n              class=\"view-full\" [style.bottom]=\"noResultsY + 'px'\"\n              [style.border-top-right-radius]=\"typeaheadNoResults ? '5px' : '0'\"\n              [style.border-top-left-radius]=\"typeaheadNoResults ? '5px' : '0'\">\n              <div *ngIf=\"typeaheadNoResults\" class=\"empty-list\">...Can't seem to find it?</div>\n              <a (mousedown)=\"viewFullTable(true)\" class=\"empty-btn\">View Full List</a>\n            </div>\n            <div *ngIf=\"viewFull\" class=\"table-container row\">\n              <div class=\"table-border col-sm-6\">\n                <h4 class=\"table-header\">{{question.label1}}</h4>\n                <div class=\"table-view\">\n                  <div *ngFor=\"let opt of question.options\">\n                    <a class=\"table-btn table-hover\" [innerHTML]=\"opt.value\"\n                    [class.table-active]=\"selected === opt.key\"\n                    (click)=\"selectTable(opt)\"></a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"table-border col-sm-6\">\n                <h4 class=\"table-header\">{{question.label2}}</h4>\n                <div class=\"table-view\">\n                  <div *ngFor=\"let opt of categories\">\n                    <a class=\"table-btn table-category\" [innerHTML]=\"opt.value\"\n                    (click)=\"selectCategory(opt)\"></a>\n                  </div>\n                </div>\n              </div>\n              <div class=\"align-right\">\n                <a (click)=\"viewFullTable(false)\">Cancel</a>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div *ngSwitchCase=\"'error'\" >\n          <div [id]=\"question.key\" [class]=\"'errorMessage ' + question.class\"><span [innerHTML]=\"question.message\"></span></div>\n        </div>\n\n        <div *ngSwitchCase=\"'fieldError'\" >\n          <div *ngIf=\"form.controls[question.field] && form.controls[question.field].errors\" [id]=\"question.key\" [class]=\"'errorMessage ' + question.class\"><span [innerHTML]=\"question.message\"></span></div>\n        </div>\n\n        <p class=\"help-block\" *ngIf=\"question.helper\"><span [innerHTML]=\"question.helper\"></span></p>\n      </div>\n      <div class=\"errorMessage\" *ngIf=\"errors\">{{errors.message || 'This field is required.'}}</div>\n    </div>\n  ","styles":["\n    a {\n      cursor: pointer;\n    }\n\n    .align-right {\n      text-align: right;\n    }\n\n    .industrySelect {\n      .input-container {\n        position: relative;\n      }\n    }\n\n    .empty-list {\n      border-bottom: 1px solid rgba(0,0,0,.15);\n      padding: 10px;\n    }\n\n    .empty-btn {\n      text-align: center;\n      display: block;\n      padding: 5px;\n    }\n\n    .tooltip-icon {\n      display: inline-block;\n      border: 1px solid #337ab7;\n      border-radius: 50%;\n      width: 17px;\n      height: 17px;\n      font-size: 12px;\n      color: #337ab7;\n      text-align: center;\n    }\n\n    .view-full {\n      display: block;\n      position: absolute;\n      background: white;\n      width: 100%;\n      z-index: 1000;\n      border: 1px solid rgba(0,0,0,.15);\n      border-bottom-left-radius: 5px;\n      border-bottom-right-radius: 5px;\n      box-shadow: 0 6px 12px rgba(0,0,0,.175);\n    }\n\n    .table {\n      margin: 0;\n      .col-sm-6 {\n        padding: 0;\n      }\n      &-container {\n        margin: 0;\n      }\n      &-border {\n        border: 1px solid #cccccc;\n      }\n      &-view {\n        height: 250px;\n        overflow: scroll;\n      }\n      &-header {\n        padding-left: 10px;\n      }\n      &-btn {\n        transition: .3s;\n        display: block;\n        text-align: left;\n        width: 100%;\n        padding: 10px;\n        border: none;\n        color: black;\n        text-decoration: none;\n      }\n      &-category {\n        &:hover {\n          color: #158cbf;\n          background: white;\n        }\n      }\n      &-hover {\n        &:hover {\n          color: white;\n          background: #158cbf;\n        }\n      }\n      &-active {\n        color: white;\n        background: #158cbf;\n      }\n    }\n  "]}]}],"members":{"question":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"prefill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}],"typeaheadOnSelect":[{"__symbolic":"method"}],"typeaheadOnBlur":[{"__symbolic":"method"}],"tableOnSelect":[{"__symbolic":"method"}],"changeviewBtn":[{"__symbolic":"method"}],"viewFullTable":[{"__symbolic":"method"}],"selectTable":[{"__symbolic":"method"}],"selectCategory":[{"__symbolic":"method"}],"changeY":[{"__symbolic":"method"}],"isChecked":[{"__symbolic":"method"}],"touchFieldAndUpdate":[{"__symbolic":"method"}]}}}}]