snippet/3.0.0/templates/c5bbe3317dbb682a6c31.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 md-no-float ng-switch="field.type">
  51           <!-- START label -->
  52           <div ng-switch-when="label">
  53             <md-content
  54               flex
  55               layout-padding
  56               layout="row"
  57               layout-align="center center"
  58               data-ng-bind-html="vm.trustAsHtml(field.value)"
  59             >
  60             </md-content>
  61           </div>
  62           <!-- END label -->
  63
  64           <!-- START textinput -->
  65           <div ng-switch-when="input">
  66             <input
  67               name="{{field.props.title}}"
  68               ng-model="vm.form[field.props.title]"
  69               placeholder="{{field.config.placeholder}}"
  70               type="{{field.config.type}}"
  71               ng-required="field.config.required"
  72             />
  73           </div>
  74           <!-- END textinput -->
  75
  76           <!-- START textarea -->
  77           <div ng-switch-when="textarea">
  78             <textarea
  79               name="{{field.props.title}}"
  80               ng-model="vm.form[field.props.title]"
  81               placeholder="{{field.config.placeholder}}"
  82               md-maxlength="150"
  83               rows="3"
  84               ng-required="field.config.required"
  85             ></textarea>
  86           </div>
  87           <!-- END textarea -->
  88
  89           <!-- START select -->
  90           <div ng-switch-when="chooseFromList">
  91             <md-select
  92               name="{{field.props.title}}"
  93               ng-model="vm.form[field.props.title]"
  94               placeholder="{{field.config.placeholder}}"
  95               ng-required="field.config.required"
  96             >
  97               <md-option
  98                 ng-repeat="option in field.options"
  99                 ng-value="option.value"
 100                 >{{option.value}}</md-option
 101               >
 102             </md-select>
 103           </div>
 104           <!-- END select -->
 105
 106           <!-- START radio -->
 107           <div
 108             ng-switch-when="multipleChoices"
 109             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 110           >
 111             <md-radio-group
 112               name="{{field.props.title}}"
 113               ng-model="vm.form[field.props.title]"
 114               ng-required="field.config.required"
 115               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 116             >
 117               <md-radio-button
 118                 ng-repeat="option in field.options"
 119                 ng-value="option.value"
 120                 class="md-primary"
 121                 >{{option.value}}</md-radio-button
 122               >
 123             </md-radio-group>
 124           </div>
 125           <!-- END radio -->
 126
 127           <!-- START checkbox -->
 128           <div ng-switch-when="checkboxes">
 129             <div
 130               layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 131             >
 132               <md-checkbox
 133                 md-no-ink
 134                 aria-label="{{field.props.title}}"
 135                 ng-repeat="option in field.options"
 136                 ng-checked="vm.exists(field.props.title, option.value)"
 137                 ng-disabled="!vm.exists(field.props.title, option.value) && field.config.maxSelections === vm.form[field.props.title].length"
 138                 ng-click="vm.toggle(field.props.title, option.value)"
 139                 flex
 140               >
 141                 {{option.value}}
 142               </md-checkbox>
 143             </div>
 144           </div>
 145           <!-- END checkbox -->
 146
 147           <!-- START agreement -->
 148           <div
 149             ng-switch-when="agreement"
 150             layout="{{field.config.direction === 'horizontal' ? 'row' : 'column'}}"
 151           >
 152             <md-checkbox
 153               md-no-ink
 154               ng-model="vm.form[field.props.title]"
 155               aria-label="{{field.props.title}}"
 156               ng-required="field.config.required"
 157             >
 158               {{field.options[0].value}}
 159             </md-checkbox>
 160           </div>
 161           <!-- END agreement -->
 162
 163           <div
 164             ng-messages="vm.userForm[field.props.title].$error"
 165             ng-show="vm.userForm[field.props.title].$touched"
 166             role="alert"
 167           >
 168             <div ng-message="required">
 169               <span>Required Field</span>
 170             </div>
 171             <div ng-message="email">
 172               <span>Wrong type field</span>
 173             </div>
 174           </div>
 175         </md-input-container>
 176       </div>
 177     </div>
 178     <div class="online-button-wrapper">
 179       <md-button
 180         id="onlineButton"
 181         title="{{settings.start_chat_button}}"
 182         class="md-raised"
 183         ng-click="vm.submit()"
 184         ng-disabled="vm.userForm.$invalid  || vm.disableItem"
 185         ng-style="{'background-color': '{{settings.color_button}}', 'color': '{{settings.textColor}}'}"
 186       >
 187         {{settings.start_chat_button}}
 188       </md-button>
 189     </div>
 190   </form>
 191
 192   <md-content layout="row" layout-align="center end" class="white-label">
 193     <span
 194       ng-bind-html="(settings.custom && !settings.defaultWhiteLabel) ? settings.whiteLabel : 'Powered By XCALLY' | toTrusted"
 195       ng-style="{'font-size': '{{settings.fontSize}}px'}"
 196     ></span>
 197   </md-content>
 198 </md-content>
 199 <!-- / CHAT CONTENT -->