--- /dev/null
+<!-- CHAT CONTENT -->
+<md-content class="chat-online">
+ <div id="toaster"></div>
+
+ <form
+ ng-if="vm.fields.length"
+ name="vm.userForm"
+ layout="column"
+ ng-style="{'font-size': '{{settings.fontSize}}px'}"
+ novalidate
+ >
+ <div ng-repeat="field in ::vm.fields | orderBy:'index'" layout="column">
+ <span>{{field.props.title + (field.config.required ? '*' : '')}}</span>
+
+ <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.error || field.props.helpText | embed:{linkTarget:'_blank'}"
+ ></div>
+ </span>
+
+ <!-- CHAT ERROR -->
+ <div
+ class="chat-error"
+ ng-repeat="error in vm.errors"
+ layout="row"
+ layout-margin
+ >
+ <i class="mdi mdi-alert mdi-24px mdi-light"></i>
+ <md-tooltip md-direction="top"
+ >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
+ >
+ <span class="chat-error-message"
+ >{{error.message || 'Service temporarily unavailable.'}}</span
+ >
+ </div>
+ <!-- CHAT ERROR -->
+
+ <md-input-container
+ md-no-float
+ ng-switch="field.type"
+ style="margin: 0px; padding: 0px 0px 10px 0px"
+ >
+ <!-- START label -->
+ <div ng-switch-when="label">
+ <md-content
+ flex
+ layout-padding
+ layout="row"
+ layout-align="center center"
+ >
+ <span>{{field.value}}</span>
+ </md-content>
+ </div>
+ <!-- END label -->
+
+ <!-- START textinput -->
+ <div ng-switch-when="input">
+ <input
+ name="{{field.props.title}}"
+ ng-model="vm.form[field.props.title]"
+ placeholder="{{field.config.placeholder}}"
+ type="{{field.config.type}}"
+ ng-required="field.config.required"
+ />
+ </div>
+ <!-- END textinput -->
+
+ <!-- START textarea -->
+ <div ng-switch-when="textarea">
+ <textarea
+ name="{{field.props.title}}"
+ ng-model="vm.form[field.props.title]"
+ placeholder="{{field.config.placeholder}}"
+ md-maxlength="150"
+ rows="3"
+ ng-required="field.config.required"
+ ></textarea>
+ </div>
+ <!-- END textarea -->
+
+ <!-- START select -->
+ <div ng-switch-when="chooseFromList">
+ <md-select
+ name="{{field.props.title}}"
+ ng-model="vm.form[field.props.title]"
+ placeholder="{{field.config.placeholder}}"
+ ng-required="field.config.required"
+ >
+ <md-option
+ ng-repeat="option in ::field.options"
+ ng-value="option.value"
+ >{{option.value}}</md-option
+ >
+ </md-select>
+ </div>
+ <!-- END select -->
+
+ <!-- START radio -->
+ <div
+ ng-switch-when="multipleChoices"
+ layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+ >
+ <md-radio-group
+ name="{{field.props.title}}"
+ ng-model="vm.form[field.props.title]"
+ ng-required="field.config.required"
+ layout="{{field.config.direction === 'vertical' ? 'row' : 'column'}}"
+ >
+ <md-radio-button
+ ng-repeat="option in ::field.options"
+ value="{{option.value}}"
+ class="md-primary"
+ >{{option.value}}</md-radio-button
+ >
+ </md-radio-group>
+ </div>
+ <!-- END radio -->
+
+ <!-- START checkbox -->
+ <div ng-switch-when="checkboxes">
+ <div
+ 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-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="column">
+ <md-checkbox
+ md-no-ink
+ ng-model="vm.form[field.props.title]"
+ aria-label="{{field.props.title}}"
+ ng-required="field.config.required"
+ >
+ {{field.options[0].value}}
+ </md-checkbox>
+ </div>
+ <!-- END agreement -->
+
+ <!-- START upload -->
+ <div ng-switch-when="upload" layout="column">
+ <div layout="row" class="option-item upload-item">
+ <md-input-container class="md-block" style="margin: 0">
+ <input
+ type="file"
+ class="ng-hide"
+ aria-label="file"
+ ng-init="vm.setupFileInput(field)"
+ />
+ <md-input-container flex class="md-block">
+ <input
+ type="text"
+ ng-model="fileName"
+ class="ng-hide"
+ disabled
+ aria-label="fileName"
+ />
+ </md-input-container>
+ </md-input-container>
+
+ <md-button
+ ng-init="vm.initUploadButton($index)"
+ class="md-raised md-accent upload-button"
+ ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+ ><md-icon class="material-icons">attach_file</md-icon
+ ><span>{{field.config.uploadFileButtonLabel}}</span></md-button
+ >
+ </div>
+ <div>
+ <label></label>
+ <div
+ style="
+ display: grid;
+ grid-template-columns: 8em auto;
+ align-items: center;
+ "
+ layout="row"
+ ng-repeat="option in field.options"
+ >
+ <md-button
+ ng-click="vm.removeFileItem(field, $index)"
+ class="md-icon-button"
+ >
+ <md-icon class="material-icons">close</md-icon>
+ </md-button>
+ <span class="filename-label" ng-init="vm.makeFileOptionsVisible()"
+ >{{option.name}}</span
+ >
+ </div>
+ </div>
+ </div>
+ <!-- END upload -->
+
+ <div
+ ng-messages="vm.userForm[field.props.title].$error"
+ ng-show="vm.userForm[field.props.title].$touched"
+ role="alert"
+ >
+ <div ng-message="required">
+ <span>Required Field</span>
+ </div>
+ <div ng-message="email">
+ <span>Wrong type field</span>
+ </div>
+ </div>
+ </md-input-container>
+ </div>
+
+ <div class="offline-button-wrapper">
+ <md-button
+ id="offlineButton"
+ ng-if="(typeField !== 'label')"
+ title="{{settings.offline_chat_button}}"
+ ng-click="vm.submit()"
+ class="md-raised"
+ ng-disabled="vm.userForm.$invalid || loading"
+ ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
+ >
+ {{settings.offline_chat_button}}
+ </md-button>
+ </div>
+ </form>
+
+ <md-content layout="row" layout-align="center end" class="white-label">
+ <span
+ ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
+ ng-style="{'font-size': '{{settings.fontSize}}px'}"
+ ></span>
+ </md-content>
+</md-content>
+<!-- / CHAT CONTENT -->