| 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)"><mat-icon>keyboard_arrow_left</mat-icon></span>
|
| 6 | <span class="next" (click)="pageNext(slides)"><mat-icon>keyboard_arrow_right</mat-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 || item.title" [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 || item.title }}</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>
|