<!-- CHAT CONTENT -->
<md-content class="chat-online">
<form
+ ng-if="vm.fields.length"
name="vm.userForm"
layout="column"
ng-style="{'font-size': '{{settings.fontSize}}px'}"
novalidate
>
<div class="form-input-container">
- <div ng-repeat="field in ::vm.fields | orderBy:'index'" layout="column">
+ <div
+ ng-repeat="field in vm.fields | orderBy:'index'"
+ layout="column"
+ class="form-field"
+ >
<span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
- <span style="line-height: 14px; color: grey; padding: 5px 0px 5px 0px">
+ <span
+ ng-class="field.props.error? 'field-description error': 'field-description'"
+ >
<div
ng-if="vm.checkHTML[$index]"
ng-bind-html="field.props.helpText"
></div>
<div
ng-if="!vm.checkHTML[$index]"
- ng-bind-html="field.props.helpText | embed:{linkTarget:'_blank'}"
+ ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
></div>
</span>
</div>
<!-- CHAT ERROR -->
- <md-input-container
- md-no-float
- ng-switch="field.type"
- style="margin: 0px; padding: 0px 0px 10px 0px"
- >
+ <md-input-container md-no-float ng-switch="field.type">
<!-- START label -->
<div ng-switch-when="label">
<md-content
ng-required="field.config.required"
>
<md-option
- ng-repeat="option in ::field.options"
+ ng-repeat="option in field.options"
ng-value="option.value"
>{{option.value}}</md-option
>
<!-- END select -->
<!-- START radio -->
- <div ng-switch-when="multipleChoices">
+ <div
+ ng-switch-when="multipleChoices"
+ layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
+ >
<md-radio-group
- md-no-ink
name="{{field.props.title}}"
ng-model="vm.form[field.props.title]"
ng-required="field.config.required"
- layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+ layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
>
<md-radio-button
- ng-repeat="option in ::field.options"
+ ng-repeat="option in field.options"
ng-value="option.value"
class="md-primary"
>{{option.value}}</md-radio-button
<!-- END radio -->
<!-- START checkbox -->
- <div
- ng-switch-when="checkboxes"
- layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
- >
- <md-checkbox
- md-no-ink
- aria-label="{{field.props.title}}"
- ng-repeat="option in ::field.options"
- ng-checked="vm.exists(field.props.title, option.value)"
- ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
- ng-required="vm.getSelected()"
- ng-click="vm.toggle(field.props.title, option.value)"
+ <div ng-switch-when="checkboxes">
+ <div
+ layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
>
- {{option.value}}
- </md-checkbox>
+ <md-checkbox
+ md-no-ink
+ aria-label="{{field.props.title}}"
+ ng-repeat="option in field.options"
+ ng-checked="vm.exists(field.props.title, option.value)"
+ ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
+ ng-click="vm.toggle(field.props.title, option.value)"
+ flex
+ >
+ {{option.value}}
+ </md-checkbox>
+ </div>
</div>
<!-- END checkbox -->
<!-- START agreement -->
<div
ng-switch-when="agreement"
- layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+ layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
>
<md-checkbox
md-no-ink
</md-input-container>
</div>
</div>
- <md-button
- title="{{settings.start_chat_button}}"
- class="md-raised"
- ng-click="vm.submit()"
- ng-disabled="vm.userForm.$invalid || vm.disableItem"
- ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
- >
- {{settings.start_chat_button}}
- </md-button>
+ <div class="online-button-wrapper">
+ <md-button
+ id="onlineButton"
+ title="{{settings.start_chat_button}}"
+ class="md-raised"
+ ng-click="vm.submit()"
+ ng-disabled="vm.userForm.$invalid || vm.disableItem"
+ ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+ >
+ {{settings.start_chat_button}}
+ </md-button>
+ </div>
</form>
<md-content layout="row" layout-align="center end" class="white-label">