Project

General

Profile

1
<div id="page_content">
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom">Get usage statistics report</h2>
4

    
5
    <!-- TOP HELP CONTENT -->
6
    <help-content #topHelperContent [position]="'top'"
7
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
8
    </help-content>
9

    
10
    <div class="uk-grid">
11

    
12
      <!-- LEFT HELP CONTENT -->
13
      <aside-help-content #leftHelperContent [position]="'left'"
14
                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
15
      </aside-help-content>
16

    
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
19

    
20
        <div *ngIf="errorMessage" class="uk-alert uk-alert-warning">{{errorMessage}}</div>
21
        <div *ngIf="loadingMessage" class="loading-big">
22
          <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
23
            {{ loadingMessage }}
24
          </div>
25
          <div class="transparentFilm"></div>
26
        </div>
27

    
28
        <div *ngIf="repoResponse" class="md-card">
29
          <div class="md-card-content large-padding">
30

    
31
            <div class="uk-margin-bottom" data-uk-margin="">
32

    
33
              <div class="uk-grid">
34
                <div class="uk-width-4-5@m">
35
                  <h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results
36
                    <span *ngIf="repoResponse.Report &&
37
                              repoResponse.Report.Report &&
38
                              repoResponse.Report.Report.Customer &&
39
                              repoResponse.Report.Report.Customer.ReportItems &&
40
                              repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>
41
                  </h3>
42
                </div>
43
                <div class="uk-width-1-5@m">
44
                  <div [formGroup]="pageSizeSelect" class="md-input-wrapper md-input-filled">
45
                    <label class="">Results per page</label>
46
                    <select class="md-input" formControlName="selectPageSize" (change)="getPageSize()">
47
                      <option value="10" selected>10</option>
48
                      <option value="25">25</option>
49
                      <option value="50">50</option>
50
                      <option value="100">100</option>
51
                    </select>
52
                    <span class="md-input-bar"></span>
53
                  </div>
54
                </div>
55
              </div>
56

    
57
            </div>
58

    
59
            <hr>
60

    
61
            <div class="uk-grid uk-grid-divider" data-uk-grid-margin="">
62

    
63
              <div class="uk-width-3-4@m uk-row-first">
64

    
65
                <!-- RESULTS TABLE -->
66
                <div class="uk-overflow-container">
67
                  <table class="uk-table table_check" style="overflow-wrap: anywhere;">
68
                    <thead>
69
                      <tr>
70
                        <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Title</th>
71
                        <th class="uk-width-1-6" *ngIf="chosenReport !== 'RR1'">Publisher</th>
72
                        <th class="uk-width-1-6" *ngIf="chosenReport === 'RR1'">Platform name</th>
73
                        <th class="uk-width-1-6">{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>
74
                        <th class="uk-width-1-6">Type</th>
75
                        <th class="uk-width-1-6" colspan="2">Downloads/Views</th>
76
                        <!--<th class="uk-width-2-10">Repository</th>-->
77
                        <!--<th class="uk-width-1-10">Validation Type</th>-->
78
                        <!--<th class="uk-width-1-10">Status</th>-->
79
                        <!--<th class="uk-width-1-10">Score</th>-->
80
                        <!--<th class="uk-width-1-10">Started</th>-->
81
                        <!--<th class="uk-width-2-10">Guidelines</th>-->
82
                        <!--<th class="uk-width-1-10">Actions</th>-->
83
                        <!--<th class="uk-width-1-10"></th>-->
84
                      </tr>
85
                    </thead>
86
                    <tbody>
87
                      <tr *ngIf="infoMessage">
88
                        <td colspan="6">{{ infoMessage }}</td>
89
                      </tr>
90
                      <ng-container *ngIf="repoResponse?.Report?.Report?.Customer?.ReportItems">
91
                        <ng-container *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index">
92
                          <tr>
93
                            <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>
94
                            <td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>
95
                            <td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>
96
                            <td>
97
                              <div *ngFor="let url of transformItem(item.ItemIdentifier); let i = index" class="uk-margin-small-bottom">
98
                                <!--<br *ngIf="i>0">-->
99
                                {{ url }}
100
                              </div>
101
                            </td>
102
                            <td>{{ item.ItemDataType }}</td>
103
                            <td class="uk-text-center"
104
                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">
105
                              <a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"
106
                                 (click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>
107
                            </td>
108
                            <td class="uk-text-center"
109
                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
110
                              {{ item.ItemPerformance[0].Instance[0].Count }}
111
                            </td>
112
                            <td class="uk-text-center"
113
                                *ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">
114
                              {{ item.ItemPerformance[0].Instance[1].Count }}
115
                            </td>
116
                          </tr>
117
                          <tr *ngIf="(selectedItemIndex === item_i)">
118
                            <td colspan="6">
119
                              <div class="uk-animation-slide-top-medium uk-margin-small-top">
120
                                <table class="uk-table uk-table-middle uk-table-striped innerTable uk-margin-small-top uk-margin-small-bottom">
121
                                  <tr>
122
                                    <th>Month</th>
123
                                    <th>Downloads</th>
124
                                    <th>Views</th>
125
                                  </tr>
126
                                  <tr *ngFor="let month of item.ItemPerformance">
127
                                    <td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>
128
                                    <td>{{ month.Instance[0].Count }}</td>
129
                                    <td>{{ month.Instance[1].Count }}</td>
130
                                  </tr>
131
                                </table>
132
                              </div>
133
                            </td>
134
                          </tr>
135
                        </ng-container>
136
                      </ng-container>
137
                    </tbody>
138
                  </table>
139
                </div>
140

    
141

    
142

    
143
                <!--<div>-->
144
                  <!--<div>-->
145
                    <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
146

    
147
                      <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
148
                        <!--<thead>-->
149
                        <!--<tr>-->
150
                          <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
151
                          <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
152
                          <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
153
                          <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
154
                          <!--<th>Type</th>-->
155
                          <!--<th colspan="2">Downloads/Views</th>-->
156
                        <!--</tr>-->
157
                        <!--</thead>-->
158
                        <!--<td colspan="6" *ngIf="infoMessage">{{ infoMessage }}</td>-->
159
                        <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
160
                               <!--style="border-bottom: 1px solid whitesmoke;">-->
161
                        <!--<tr>-->
162
                          <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
163
                          <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
164
                          <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
165
                          <!--<td style="min-width: 300px;">-->
166
                                  <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
167
                                    <!--<br *ngIf="i>0">{{ url }}-->
168
                                  <!--</span>-->
169
                          <!--</td>-->
170
                          <!--<td>{{ item.ItemDataType }}</td>-->
171
                          <!--<td class="uk-text-center"-->
172
                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
173
                            <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
174
                               <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
175
                          <!--</td>-->
176
                          <!--<td class="uk-text-center"-->
177
                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
178
                            <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
179
                          <!--</td>-->
180
                          <!--<td class="uk-text-center"-->
181
                              <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
182
                            <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
183
                          <!--</td>-->
184
                        <!--</tr>-->
185
                        <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
186
                          <!--<td colspan="6">-->
187
                            <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
188
                              <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
189
                                <!--<tr>-->
190
                                  <!--<th>Month</th>-->
191
                                  <!--<th>Downloads</th>-->
192
                                  <!--<th>Views</th>-->
193
                                <!--</tr>-->
194
                                <!--<tr *ngFor="let month of item.ItemPerformance">-->
195
                                  <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
196
                                  <!--<td>{{ month.Instance[0].Count }}</td>-->
197
                                  <!--<td>{{ month.Instance[1].Count }}</td>-->
198
                                <!--</tr>-->
199
                              <!--</table>-->
200
                            <!--</div>-->
201
                          <!--</td>-->
202
                        <!--</tr>-->
203
                        <!--</tbody>-->
204
                      <!--</table>-->
205

    
206
                    <!--</div>-->
207
                  <!--</div>-->
208
                <!--</div>-->
209

    
210
                <!-- BOTTOM PAGINATION LINKS -->
211
                <ul class="uk-pagination uk-margin-medium-top">
212
                  <li class="uk-pagination-previous"><a (click)="goToPreviousPage()"><i class="uk-icon-angle-left"></i><span class="uk-margin-left">Previous</span></a></li>
213
                  <li class=""><span>page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</span></li>
214
                  <li class="uk-pagination-next"><a (click)="goToNextPage()"><span class="uk-margin-right">Next</span><i class="uk-icon-angle-right"></i></a></li>
215
                </ul>
216

    
217
              </div>
218

    
219
              <div class="uk-width-1-4@m">
220

    
221
                <div class="uk-margin-medium-bottom">
222
                  <p>
223
                    Number of results:
224
                    <span class="uk-badge uk-badge-success uk-text-upper uk-margin-small-left">{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</span>
225
                  </p>
226
                  <p>
227
                    Filters:
228
                    <span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index" class="uk-badge uk-badge-outline uk-text-upper uk-margin-small-left">
229
                      {{ filter.Name }}: {{ filter.Value }}
230
                    </span>
231
                  </p>
232
                </div>
233
                <h2 class="heading_c uk-margin-small-bottom">Details</h2>
234
                <ul class="md-list md-list-addon">
235
                  <li>
236
                    <div class="md-list-addon-element">
237
                      <i class="md-list-addon-icon material-icons"></i>
238
                    </div>
239
                    <div class="md-list-content">
240
                      <span class="md-list-heading">{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</span>
241
                      <span class="uk-text-small uk-text-muted">Date run</span>
242
                    </div>
243
                  </li>
244
                  <li>
245
                    <div class="md-list-addon-element">
246
                      <i class="md-list-addon-icon material-icons"></i>
247
                    </div>
248
                    <div class="md-list-content">
249
                      <span class="md-list-heading">{{ coveredPeriod }}</span>
250
                      <span class="uk-text-small uk-text-muted">Period covered</span>
251
                    </div>
252
                  </li>
253
                </ul>
254
              </div>
255

    
256
            </div>
257

    
258
          </div>
259
        </div>
260

    
261

    
262

    
263
        <!--<div *ngIf="repoResponse" class="uk-margin-top">-->
264
          <!--<h3>{{ repoResponse.ReportDefinition['@Name'] }} Report Results-->
265
            <!--<span *ngIf="repoResponse.Report &&-->
266
                              <!--repoResponse.Report.Report &&-->
267
                              <!--repoResponse.Report.Report.Customer &&-->
268
                              <!--repoResponse.Report.Report.Customer.ReportItems &&-->
269
                              <!--repoResponse.Report.Report.Customer.ReportItems.length > 0">for {{ repoResponse.Report.Report.Customer.ReportItems[0].ItemPlatform }}</span>-->
270
          <!--</h3>-->
271
          <!--<div class="uk-width-1-2">-->
272
            <!--<table class="uk-table">-->
273
              <!--<tr>-->
274
                <!--<th>Period covered</th>-->
275
                <!--<td>{{ coveredPeriod }}</td>-->
276
              <!--</tr>-->
277
              <!--<tr>-->
278
                <!--<th>Filters</th>-->
279
                <!--<td>-->
280
                        <!--<span *ngFor="let filter of repoResponse.ReportDefinition.Filters.Filter; let i = index">-->
281
                          <!--<br *ngIf="i>0">-->
282
                          <!--{{ filter.Name }}: {{ filter.Value }}-->
283
                        <!--</span>-->
284
                <!--</td>-->
285
              <!--</tr>-->
286
              <!--<tr>-->
287
                <!--<th>Date run</th>-->
288
                <!--<td>{{ repoResponse.Report.Report['@Created'] | date: "yyyy-MM-dd HH:mm:ss" }}</td>-->
289
              <!--</tr>-->
290
              <!--<tr>-->
291
                <!--<th>Number of results</th>-->
292
                <!--<td>{{ repoResponse.ReportDefinition.Filters.ReportAttribute[1].Value }}</td>-->
293
              <!--</tr>-->
294
            <!--</table>-->
295
          <!--</div>-->
296
          <!--<div *ngIf="repoResponse.Report.Report.Customer &&-->
297
                            <!--repoResponse.Report.Report.Customer.ReportItems">-->
298
            <!--<div>-->
299
              <!--<div class="show-options uk-inline" style="float: right;">-->
300
                <!--<div class="filterLabel" style="display: inline;">Results per page:</div>-->
301
                <!--<div [formGroup]="pageSizeSelect" class="inlineBlock">-->
302
                  <!--<select class="form-control" formControlName="selectPageSize" (change)="getPageSize()">-->
303
                    <!--<option value="10" selected>10</option>-->
304
                    <!--<option value="25">25</option>-->
305
                    <!--<option value="50">50</option>-->
306
                    <!--<option value="100">100</option>-->
307
                  <!--</select>-->
308
                <!--</div>-->
309
              <!--</div>-->
310
            <!--</div><br>-->
311
            <!--<div class="contentAndPagerPanel">-->
312

    
313
              <!--&lt;!&ndash; TOP PAGINATION LINKS &ndash;&gt;-->
314
              <!--<div>-->
315
                <!--<ul class="uk-pagination">-->
316
                  <!--<li>-->
317
                    <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
318
                      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
319
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
320
                             <!--icon="pagination-previous" ratio="1"></svg>-->
321
                      <!--</span>-->
322
                      <!--Previous-->
323
                    <!--</a>-->
324
                  <!--</li>-->
325
                  <!--<li class="uk-margin-auto-left">-->
326
                    <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
327
                      <!--Next-->
328
                      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
329
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
330
                             <!--icon="pagination-next" ratio="1"></svg>-->
331
                      <!--</span>-->
332
                    <!--</a>-->
333
                  <!--</li>-->
334
                <!--</ul>-->
335
                <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
336
              <!--</div>-->
337

    
338

    
339
              <!--&lt;!&ndash; RESULTS TABLE &ndash;&gt;-->
340
              <!--<div>-->
341
                <!--<div>-->
342
                  <!--<div class="uk-overflow-auto uk-scrollspy-inview uk-animation-slide-top-medium uk-margin-top uk-margin-bottom">-->
343

    
344
                    <!--<table class="uk-table uk-table-middle uk-table-striped" style="vertical-align: top !important;">-->
345
                      <!--<thead>-->
346
                      <!--<tr>-->
347
                        <!--<th *ngIf="chosenReport !== 'RR1'">Title</th>-->
348
                        <!--<th *ngIf="chosenReport !== 'RR1'">Publisher</th>-->
349
                        <!--<th *ngIf="chosenReport === 'RR1'">Platform name</th>-->
350
                        <!--<th>{{ (chosenReport !== 'RR1') ? 'Item Urls' : 'Url' }}</th>-->
351
                        <!--<th>Type</th>-->
352
                        <!--<th colspan="2">Downloads/Views</th>-->
353
                      <!--</tr>-->
354
                      <!--</thead>-->
355
                      <!--<td colspan="6" *ngIf="infoMessage" class="uk-alert">{{ infoMessage }}</td>-->
356
                      <!--<tbody *ngFor="let item of repoResponse.Report.Report.Customer.ReportItems; let item_i = index"-->
357
                             <!--style="border-bottom: 1px solid whitesmoke;">-->
358
                      <!--<tr>-->
359
                        <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemName }}</td>-->
360
                        <!--<td *ngIf="chosenReport !== 'RR1'">{{ item.ItemPublisher }}</td>-->
361
                        <!--<td *ngIf="chosenReport === 'RR1'">{{ item.ItemPlatform }}</td>-->
362
                        <!--<td style="min-width: 300px;">-->
363
                                  <!--<span *ngFor="let url of transformItem(item.ItemIdentifier); let i = index">-->
364
                                    <!--<br *ngIf="i>0">{{ url }}-->
365
                                  <!--</span>-->
366
                        <!--</td>-->
367
                        <!--<td>{{ item.ItemDataType }}</td>-->
368
                        <!--<td class="uk-text-center"-->
369
                            <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Monthly'" colspan="2">-->
370
                          <!--<a *ngIf="item.ItemPerformance && (item.ItemPerformance.length > 0)"-->
371
                             <!--(click)="displayItemPerformance(item_i)">{{ (selectedItemIndex === item_i) ? 'Hide' : 'See' }} results</a>-->
372
                        <!--</td>-->
373
                        <!--<td class="uk-text-center"-->
374
                            <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
375
                          <!--{{ item.ItemPerformance[0].Instance[0].Count }}-->
376
                        <!--</td>-->
377
                        <!--<td class="uk-text-center"-->
378
                            <!--*ngIf="repoResponse.ReportDefinition.Filters.ReportAttribute[0].Value === 'Totals'">-->
379
                          <!--{{ item.ItemPerformance[0].Instance[1].Count }}-->
380
                        <!--</td>-->
381
                      <!--</tr>-->
382
                      <!--<tr *ngIf="(selectedItemIndex === item_i)">-->
383
                        <!--<td colspan="6">-->
384
                          <!--<div class="uk-animation-slide-top-medium uk-margin-small-top">-->
385
                            <!--<table class="uk-table uk-table-middle uk-table-striped innerTable">-->
386
                              <!--<tr>-->
387
                                <!--<th>Month</th>-->
388
                                <!--<th>Downloads</th>-->
389
                                <!--<th>Views</th>-->
390
                              <!--</tr>-->
391
                              <!--<tr *ngFor="let month of item.ItemPerformance">-->
392
                                <!--<td>{{ month.Period.Begin | date: "MMM yyyy" }}</td>-->
393
                                <!--<td>{{ month.Instance[0].Count }}</td>-->
394
                                <!--<td>{{ month.Instance[1].Count }}</td>-->
395
                              <!--</tr>-->
396
                            <!--</table>-->
397
                          <!--</div>-->
398
                        <!--</td>-->
399
                      <!--</tr>-->
400
                      <!--</tbody>-->
401
                    <!--</table>-->
402

    
403
                  <!--</div>-->
404
                <!--</div>-->
405
              <!--</div>-->
406

    
407
              <!--&lt;!&ndash; BOTTOM PAGINATION LINKS &ndash;&gt;-->
408
              <!--<div>-->
409
                <!--<ul class="uk-pagination">-->
410
                  <!--<li>-->
411
                    <!--<a class="uk-link uk-link-muted" (click)="goToPreviousPage()">-->
412
                      <!--<span class="uk-margin-small-right uk-pagination-previous uk-icon" uk-pagination-previous="">-->
413
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
414
                             <!--icon="pagination-previous" ratio="1"></svg>-->
415
                      <!--</span>-->
416
                      <!--Previous-->
417
                    <!--</a>-->
418
                  <!--</li>-->
419
                  <!--<li class="uk-margin-auto-left">-->
420
                    <!--<a class="uk-link uk-link-muted" (click)="goToNextPage()">-->
421
                      <!--Next-->
422
                      <!--<span class="uk-margin-small-left uk-pagination-next uk-icon" uk-pagination-next="">-->
423
                        <!--<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg"-->
424
                             <!--icon="pagination-next" ratio="1"></svg>-->
425
                      <!--</span>-->
426
                    <!--</a>-->
427
                  <!--</li>-->
428
                <!--</ul>-->
429
                <!--<div class="resultsPageLabel">page {{ (totalPages > 0) ? page+1 : 0 }} of {{ totalPages }}</div>-->
430
              <!--</div>-->
431
            <!--</div>-->
432
          <!--</div>-->
433

    
434
        <!--</div>-->
435

    
436
      </div>
437

    
438
      <!-- RIGHT HELP CONTENT -->
439
      <aside-help-content #rightHelperContent [position]="'right'"
440
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
441
      </aside-help-content>
442

    
443
    </div>
444

    
445
    <!-- BOTTOM HELP CONTENT -->
446
    <help-content #bottomHelperContent [position]="'bottom'"
447
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
448
    </help-content>
449

    
450
  </div>
451
</div>
452

    
453

    
(8-8/17)