HTML Template
1
<div ng-if="c.data.isValidFeedback && !c.data.surveyRedirectWidget" class="feedback-container">
2
<div aria-live="polite" aria-atomic="true" class="feedback-modal-toggle sr-only">
3
<!-- initially blank -->
4
</div>
5
<div class="feedback-input-container" ng-if="!c.data.isSurveyComplete">
6
<div class="feedback-button-container" role="radiogroup">
7
<button ng-repeat="question in c.data.questionsList"
8
role="radio"
9
type="radio"
10
aria-checked ="{{c.isSelected(question)}}"
11
ng-keydown="c.keydownEventHandler($event, $index,question)"
12
tabindex="{{c.selectedQuestion==''&& $index==0?0:c.isSelected(question)?0:-1}}"
13
class="btn btn-lg btn-feedback btn-feedback-{{question.sentiment}} {{c.isSelected(question)?'btn-primary':'btn-default'}}"
14
ng-click="c.setSelectedQuestion($event, question.label, question.sentiment, question.value)"
15
>
16
<i class="fa btn-feedback-icon" ng-class="question.icon" aria-hidden="true"></i>
17
<span class="btn-feedback-description {{c.isSelected(question)?'btn-selected':''}}">{{question.label}}</span>
18
</button>
19
</div>
20
<div class="comment-container" ng-if="c.current && !c.data.isSurveyComplete && c.data.isCommentAllowed">
21
<label class="comment-title" for="comment-box">{{data.commentLabel}}</label>
22
<textarea class="comment-box textarea"
23
ng-class="field.data.length > data.feedback_max_length ? 'text-border' : 'editor-pristine'"
24
id="comment-box"
25
rows="4"
26
maxlength="{{c.data.feedback_max_length}}"
27
data-type="textarea"
28
role="textbox"
29
autocomplete="off"
30
ng-model="field.data"
31
ng-init="field.data=field.value"
32
ng-trim="false"
33
placeholder="${Enter optional comment}"></textarea>
34
<div class="char-limit-container">
35
<span class="characters"
36
ng-if="field.data.length <= c.data.feedback_max_length && field.data.length > 0"
37
data-ng-bind-template="{{c.data.feedback_max_length - (!field.data ? 0 : field.data.length)}} {{c.data.charactersLeft}}">
38
</span>
39
<span class="warning-message"
40
ng-if="field.data.length > c.data.feedback_max_length"
41
data-ng-bind-template="{{(!field.data ? 0 : field.data.length) - c.data.feedback_max_length}} {{c.data.charactersOver}}">
42
</span>
43
</div>
44
</div>
45
<div class="anonymous-container">
46
<div>
47
<label>
48
<input type="checkbox"
49
ng-if="!c.data.isAnonymous"
50
aria-label ="{{c.data.anonymousText}}"
51
class="user_preference">
52
<span class="boolean-control anonymous-label anonymous-text"
53
ng-if="!c.data.isAnonymous"
54
for="user_preference"
55
aria-hidden="true">{{c.data.anonymousText}}</span>
56
<span class="anonymous-label anonymous-text"
57
ng-if="c.data.isAnonymous">{{c.data.anonymousText}}</span>
58
</label>
59
</div>
60
<div>
61
<a class ="privacy-title privacy-text" ng-show = "c.data.hasPrivacyPolicy" href="{{c.data.privacyPolicyHref}}" aria-label="${Privacy policy}" target="_blank">${ Privacy policy}</a>
62
</div>
63
</div>
64
</div>
65
<div class="feedback-actions" ng-if="!c.data.isSurveyComplete">
66
<button class="btn btn-primary btn-submit {{!c.enableSubmitButton? 'disabled':''}}"
67
ng-click="c.submit()"
68
ng-disabled="!c.enableSubmitButton"
69
aria-label="${Submit}">${Submit}
70
</button>
71
</div>
72
<div class="feedback-success-container" ng-if="c.data.isSurveyComplete">
73
<div class="feedback-complete">
74
<fa name="{{c.data.successIcon}}" class="fa-3x submit-message-icon"></fa>
75
<h3 class="feedback-success-text" aria-label="{{c.data.successText}}">{{c.data.successText}}</h3>
76
<div class="feedback-success-description" aria-label="{{c.data.successDescription}}">
77
<span>{{c.data.successDescription}}</span>
78
</div>
79
</div>
80
</div>
81
</div>
82
83
<div ng-if="c.data.surveyRedirectWidget">
84
<sp-widget widget="data.surveyRedirectWidget"></sp-widget>
85
</div>
86
87
<div ng-if="!c.data.isValidFeedback" class="feedback-container">
88
<div class="invalid-feedback-msg">
89
{{ c.data.invalidDefinitionMessage }}
90
</div>
91
</div>
