1 | <p *ngIf="items?.length > 1" class="item-amount">Contains {{items.length}} items</p>
|
2 | <div class="wrapper">
|
3 | <nav *ngIf="items && !hideItemsNav" (swipeleft)="pageNext(slides)" (swiperight)="pagePrev(slides)">
|
4 | <div [ngClass]="{'hide-arrows': items && items.length < 5}">
|
5 | <span class="prev" (click)="pagePrev(slides)"><md-icon>keyboard_arrow_left</md-icon></span>
|
6 | <span class="next" (click)="pageNext(slides)"><md-icon>keyboard_arrow_right</md-icon></span>
|
7 | </div>
|
8 | <ul class="slides" #slides>
|
9 | <li *ngFor="let item of items; index as i;" (click)="onItemSelected(i)">
|
10 | <a [ngClass]="{'active': i === selectedIndex}">
|
11 | <span class="icon-area">
|
12 | <va-icon [iconUrl]="item.icon || item.iconUrl" [name]="item.name" [diameter]="80"></va-icon>
|
13 | <va-icon *ngIf="item.addonId" class="addon-indicator" [iconUrl]="item.productIcon" [name]="item.productName" [diameter]="24"></va-icon>
|
14 | </span>
|
15 | <p>{{ item.name }}</p>
|
16 | <div *ngIf="item.addonId">
|
17 | <span class="requires-text">Requires</span>
|
18 | <span>{{item.productName}}</span>
|
19 | </div>
|
20 | </a>
|
21 | </li>
|
22 | </ul>
|
23 | </nav>
|
24 | </div>
|