snippet/3.9.0/templates/9962474df74f9405ac72.html

   1 <!-- CHAT CONTENT -->
   2 <md-content class="chat-online">
   3   <div id="toaster"></div>
   4
   5   <form
   6     ng-if="vm.fields.length"
   7     name="vm.userForm"
   8     layout="column"
   9     ng-style="{'font-size': '{{settings.fontSize}}px'}"
  10     novalidate
  11   >
  12     <div class="form-input-container">
  13       <div
  14         ng-repeat="field in vm.fields | orderBy:'index'"
  15         layout="column"
  16         class="form-field"
  17       >
  18         <span ng-show="field.type !== 'label'">
  19           {{field.props.title + (field.config.required ? '*' : '')}}
  20         </span>
  21
  22         <span
  23           ng-class="field.props.error ? 'field-description error': 'field-description'"
  24         >
  25           <div
  26             ng-if="vm.checkHTML[$index]"
  27             ng-bind-html="field.props.helpText"
  28           ></div>
  29           <div
  30             ng-if="!vm.checkHTML[$index]"
  31             ng-bind-html="field.props.error || field.props.helpText | embed:{linkTarget:'_blank'}"
  32           ></div>
  33         </span>
  34
  35         <!-- CHAT ERROR -->
  36         <div
  37           class="chat-error"
  38           ng-repeat="error in vm.errors"
  39           layout="row"
  40           layout-margin
  41         >
  42           <i class="mdi mdi-alert mdi-24px mdi-light"></i>
  43           <md-tooltip md-direction="top"
  44             >{{error.message || 'Service temporarily unavailable.'}}</md-tooltip
  45           >
  46           <span class="chat-error-message"
  47             >{{error.message || 'Service temporarily unavailable.'}}</span
  48           >
  49         </div>
  50         <!-- CHAT ERROR -->
  51
  52         <md-input-container
  53           md-no-float
  54           ng-switch="field.type"
  55           class="no-padding"
  56         >
  57           <!-- START label -->
  58           <div ng-switch-when="label">
  59             <md-content
  60               flex
  61               layout="row"
  62               layout-align="center center"
  63               data-ng-bind-html="vm.trustAsHtml(field.value)"
  64             >
  65             </md-content>
  66           </div>
  67           <!-- END label -->
  68
  69           <!-- START textinput -->
  70           <div ng-switch-when="input">
  71             <input
  72               name="{{field.props.title}}"
  73               ng-model="vm.form[field.props.title]"
  74               placeholder="{{field.config.placeholder}}"
  75               type="{{field.config.type}}"
  76               ng-required="field.config.required"
  77             />
  78           </div>
  79           <!-- END textinput -->
  80
  81           <!-- START textarea -->
  82           <div ng-switch-when="textarea">
  83             <textarea
  84               name="{{field.props.title}}"
  85               ng-model="vm.form[field.props.title]"
  86               placeholder="{{field.config.placeholder}}"
  87               md-maxlength="150"
  88               rows="3"
  89               ng-required="field.config.required"
  90             ></textarea>
  91           </div>
  92           <!-- END textarea -->
  93
  94           <!-- START select -->
  95           <div ng-switch-when="chooseFromList">
  96             <md-select
  97               name="{{field.props.title}}"
  98               ng-model="vm.form[field.props.title]"
  99               placeholder="{{field.config.placeholder}}"
 100               ng-required="field.config.required"
 101             >
 102               <md-option
 103                 ng-repeat="option in field.options"
 104                 ng-value="option.value"
 105                 >{{option.value}}</md-option
 106               >
 107             </md-select>
 108           </div>
 109           <!-- END select -->
 110
 111           <!-- START radio -->
 112           <div
 113             ng-switch-when="multipleChoices"
 114             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 115           >
 116             <md-radio-group
 117               name="{{field.props.title}}"
 118               ng-model="vm.form[field.props.title]"
 119               ng-required="field.config.required"
 120               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 121             >
 122               <md-radio-button
 123                 ng-repeat="option in field.options"
 124                 ng-value="option.value"
 125                 class="md-primary"
 126                 >{{option.value}}</md-radio-button
 127               >
 128             </md-radio-group>
 129           </div>
 130           <!-- END radio -->
 131
 132           <!-- START checkbox -->
 133           <div ng-switch-when="checkboxes">
 134             <div
 135               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 136             >
 137               <md-checkbox
 138                 md-no-ink
 139                 aria-label="{{field.props.title}}"
 140                 ng-repeat="option in field.options"
 141                 ng-checked="vm.exists(field.props.title, option.value)"
 142                 ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
 143                 ng-click="vm.toggle(field.props.title, option.value)"
 144                 flex
 145               >
 146                 {{option.value}}
 147               </md-checkbox>
 148             </div>
 149           </div>
 150           <!-- END checkbox -->
 151
 152           <!-- START agreement -->
 153           <div
 154             ng-switch-when="agreement"
 155             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 156           >
 157             <md-checkbox
 158               md-no-ink
 159               ng-model="vm.form[field.props.title]"
 160               aria-label="{{field.props.title}}"
 161               ng-required="field.config.required"
 162             >
 163               {{field.options[0].value}}
 164             </md-checkbox>
 165           </div>
 166           <!-- END agreement -->
 167
 168           <!-- START upload -->
 169           <div ng-switch-when="upload" layout="column">
 170             <div layout="row" class="option-item upload-item">
 171               <md-button
 172                 ng-init="vm.initUploadButton($index)"
 173                 class="md-raised md-accent upload-button"
 174                 ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textButtonColor || settings.textColor}}'}"
 175                 ><md-icon class="material-icons">attach_file</md-icon
 176                 ><span>{{field.config.uploadFileButtonLabel}}</span></md-button
 177               >
 178
 179               <md-input-container class="md-block" style="margin: 0">
 180                 <input
 181                   type="file"
 182                   class="ng-hide"
 183                   aria-label="file"
 184                   ng-init="vm.setupFileInput(field)"
 185                 />
 186                 <md-input-container flex class="md-block">
 187                   <input
 188                     type="text"
 189                     ng-model="fileName"
 190                     class="ng-hide"
 191                     disabled
 192                     aria-label="fileName"
 193                   />
 194                 </md-input-container>
 195               </md-input-container>
 196             </div>
 197             <div>
 198               <label></label>
 199               <div
 200                 style="
 201                   display: grid;
 202                   grid-template-columns: 3em auto;
 203                   align-items: center;
 204                 "
 205                 layout="row"
 206                 ng-repeat="option in field.options"
 207               >
 208                 <md-button
 209                   ng-click="vm.removeFileItem(field, $index)"
 210                   class="md-icon-button"
 211                   style="margin: 0"
 212                 >
 213                   <md-icon class="material-icons">close</md-icon>
 214                 </md-button>
 215                 <span
 216                   class="filename-label"
 217                   ng-init="vm.makeFileOptionsVisible()"
 218                   >{{option.name}}</span
 219                 >
 220               </div>
 221             </div>
 222           </div>
 223           <!-- END upload -->
 224
 225           <div
 226             ng-messages="vm.userForm[field.props.title].$error"
 227             ng-show="vm.userForm[field.props.title].$touched"
 228             role="alert"
 229           >
 230             <div ng-message="required">
 231               <span>Required Field</span>
 232             </div>
 233             <div ng-message="email">
 234               <span>Wrong type field</span>
 235             </div>
 236           </div>
 237         </md-input-container>
 238       </div>
 239     </div>
 240     <div class="offline-button-wrapper">
 241       <md-button
 242         id="offlineButton"
 243         ng-if="(typeField !== 'label')"
 244         title="{{settings.offline_chat_button}}"
 245         class="md-raised"
 246         ng-click="vm.submit()"
 247         ng-disabled="vm.userForm.$invalid || loading"
 248         ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textButtonColor || settings.textColor}}'}"
 249       >
 250         {{settings.offline_chat_button}}
 251       </md-button>
 252     </div>
 253   </form>
 254
 255   <md-content layout="row" layout-align="center end" class="white-label">
 256     <span
 257       ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
 258       ng-style="{'font-size': '{{settings.fontSize}}px'}"
 259     ></span>
 260   </md-content>
 261 </md-content>
 262 <!-- / CHAT CONTENT -->