@vendasta/store/products-nav/products-nav.component.html

Components and data for Store

<p *ngIf="items?.length > 1" class="item-amount">Contains {{items.length}} items</p>
<div class="wrapper">
  <nav *ngIf="items && !hideItemsNav" (swipeleft)="pageNext(slides)" (swiperight)="pagePrev(slides)">
    <div [ngClass]="{'hide-arrows': items && items.length < 5}">
      <span class="prev" (click)="pagePrev(slides)"><mat-icon>keyboard_arrow_left</mat-icon></span>
      <span class="next" (click)="pageNext(slides)"><mat-icon>keyboard_arrow_right</mat-icon></span>
    </div>
    <ul class="slides" #slides>
      <li *ngFor="let item of items; index as i;" (click)="onItemSelected(i)">
        <a [ngClass]="{'active': i === selectedIndex}">
          <span class="icon-area">
            <va-icon [iconUrl]="item.icon || item.iconUrl" [name]="item.name || item.title" [diameter]="80"></va-icon>
            <va-icon *ngIf="item.addonId" class="addon-indicator" [iconUrl]="item.productIcon" [name]="item.productName" [diameter]="24"></va-icon>
          </span>
          <p>{{ item.name || item.title }}</p>
          <div *ngIf="item.addonId">
            <span class="requires-text">Requires</span>
            <span>{{item.productName}}</span>
          </div>
        </a>
      </li>
    </ul>
  </nav>
</div>