snippet/3.12.1/templates/caf0e553108b226443aa.html

   1 <!-- CHAT CONTENT -->
   2 <md-content class="chat-online">
   3   <form
   4     ng-if="vm.fields.length"
   5     name="vm.userForm"
   6     layout="column"
   7     ng-style="{'font-size': '{{settings.fontSize}}px'}"
   8     novalidate
   9   >
  10     <div class="form-input-container">
  11       <div
  12         ng-repeat="field in vm.fields | orderBy:'index'"
  13         layout="column"
  14         class="form-field"
  15       >
  16         <span ng-show="field.type !== 'label'">
  17           {{field.props.title + (field.config.required ? '*' : '')}}
  18         </span>
  19
  20         <span
  21           ng-class="field.props.error ? 'field-description error': 'field-description'"
  22         >
  23           <div
  24             ng-if="vm.checkHTML[$index]"
  25             ng-bind-html="field.props.helpText"
  26           ></div>
  27           <div
  28             ng-if="!vm.checkHTML[$index]"
  29             ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
  30           ></div>
  31         </span>
  32
  33         <!-- CHAT ERROR -->
  34         <div
  35           class="chat-error"
  36           ng-repeat="error in vm.errors"
  37           layout="row"
  38           layout-margin
  39         >
  40           <i class="mdi mdi-alert mdi-24px mdi-light"></i>
  41           <md-tooltip md-direction="top"
  42             >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
  43           >
  44           <span class="chat-error-message"
  45             >{{error.message || 'Service temporarily unavailable.'}}</span
  46           >
  47         </div>
  48         <!-- CHAT ERROR -->
  49
  50         <md-input-container
  51           md-no-float
  52           ng-switch="field.type"
  53           class="no-padding"
  54         >
  55           <!-- START label -->
  56           <div ng-switch-when="label">
  57             <md-content
  58               flex
  59               layout="row"
  60               layout-align="center center"
  61               data-ng-bind-html="vm.trustAsHtml(field.value)"
  62             >
  63             </md-content>
  64           </div>
  65           <!-- END label -->
  66
  67           <!-- START textinput -->
  68           <div ng-switch-when="input">
  69             <input
  70               name="{{field.props.title}}"
  71               ng-model="vm.form[field.props.title]"
  72               placeholder="{{field.config.placeholder}}"
  73               type="{{field.config.type}}"
  74               ng-required="field.config.required"
  75             />
  76           </div>
  77           <!-- END textinput -->
  78
  79           <!-- START textarea -->
  80           <div ng-switch-when="textarea">
  81             <textarea
  82               name="{{field.props.title}}"
  83               ng-model="vm.form[field.props.title]"
  84               placeholder="{{field.config.placeholder}}"
  85               md-maxlength="150"
  86               rows="3"
  87               ng-required="field.config.required"
  88             ></textarea>
  89           </div>
  90           <!-- END textarea -->
  91
  92           <!-- START select -->
  93           <div ng-switch-when="chooseFromList">
  94             <md-select
  95               name="{{field.props.title}}"
  96               ng-model="vm.form[field.props.title]"
  97               placeholder="{{field.config.placeholder}}"
  98               ng-required="field.config.required"
  99             >
 100               <md-option
 101                 ng-repeat="option in field.options"
 102                 ng-value="option.value"
 103                 >{{option.value}}</md-option
 104               >
 105             </md-select>
 106           </div>
 107           <!-- END select -->
 108
 109           <!-- START radio -->
 110           <div
 111             ng-switch-when="multipleChoices"
 112             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 113           >
 114             <md-radio-group
 115               name="{{field.props.title}}"
 116               ng-model="vm.form[field.props.title]"
 117               ng-required="field.config.required"
 118               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 119             >
 120               <md-radio-button
 121                 ng-repeat="option in field.options"
 122                 ng-value="option.value"
 123                 class="md-primary"
 124                 >{{option.value}}</md-radio-button
 125               >
 126             </md-radio-group>
 127           </div>
 128           <!-- END radio -->
 129
 130           <!-- START checkbox -->
 131           <div ng-switch-when="checkboxes">
 132             <div
 133               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 134             >
 135               <md-checkbox
 136                 md-no-ink
 137                 aria-label="{{field.props.title}}"
 138                 ng-repeat="option in field.options"
 139                 ng-checked="vm.exists(field.props.title, option.value)"
 140                 ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
 141                 ng-click="vm.toggle(field.props.title, option.value)"
 142                 flex
 143               >
 144                 {{option.value}}
 145               </md-checkbox>
 146             </div>
 147           </div>
 148           <!-- END checkbox -->
 149
 150           <!-- START agreement -->
 151           <div
 152             ng-switch-when="agreement"
 153             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 154           >
 155             <md-checkbox
 156               md-no-ink
 157               ng-model="vm.form[field.props.title]"
 158               aria-label="{{field.props.title}}"
 159               ng-required="field.config.required"
 160             >
 161               {{field.options[0].value}}
 162             </md-checkbox>
 163           </div>
 164           <!-- END agreement -->
 165
 166           <div
 167             ng-messages="vm.userForm[field.props.title].$error"
 168             ng-show="vm.userForm[field.props.title].$touched"
 169             role="alert"
 170           >
 171             <div ng-message="required">
 172               <span>Required Field</span>
 173             </div>
 174             <div ng-message="email">
 175               <span>Wrong type field</span>
 176             </div>
 177           </div>
 178         </md-input-container>
 179       </div>
 180     </div>
 181     <div class="online-button-wrapper">
 182       <md-button
 183         id="onlineButton"
 184         title="{{settings.start_chat_button}}"
 185         class="md-raised"
 186         ng-click="vm.submit()"
 187         ng-disabled="vm.userForm.$invalid  || vm.disableItem"
 188         ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textButtonColor || settings.textColor}}'}"
 189       >
 190         {{settings.start_chat_button}}
 191       </md-button>
 192     </div>
 193   </form>
 194
 195   <md-content layout="row" layout-align="center end" class="white-label">
 196     <span
 197       ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
 198       ng-style="{'font-size': '{{settings.fontSize}}px'}"
 199     ></span>
 200   </md-content>
 201 </md-content>
 202 <!-- / CHAT CONTENT -->