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