+++ /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 -->