@vendasta/store/package-dropdown/package-dropdown.component.html

Components and data for Store

<mat-card class="package-list-container" *ngIf="salesPackages$ | async as salesPackages else loading">
    <mat-list>
        <div class="package-list" *ngFor="let package of salesPackages; let packageIndex = index">
            <mat-list-item class="package-list-item">
                <va-icon mat-list-avatar [name]="package.name" [iconUrl]="package.icon" [diameter]="40">
                </va-icon>
                <h3 mat-line>{{package.name}}</h3>
                <p class="package-dropdown-font" mat-line>
                    <span>{{package.formattedPrices}}</span>
                </p>
                <span *ngIf="!package.activationStatus" class="package-dropdown-layout">
                    <p class="package-dropdown-font package-notice">Contains {{package.products.length}} {{package.products.length === 1 ? "Product" : "Products"}}</p>
                    <button *ngIf="package.products?.length > 0" mat-icon-button type="button" (click)="toggleProducts(packageIndex)">
                        <mat-icon mat-list-icon
                            class="dropdown-icon"
                            [ngClass]="{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}">
                            keyboard_arrow_down
                        </mat-icon>
                    </button>
                </span>
                <span *ngIf="package.activationStatus" class="package-dropdown-layout package-dropdown-status">
                    <div [ngClass]="{
                            'activated': isActivatedStatus(package.activationStatus.status),
                            'warning': isWarningStatus(package.activationStatus.status),
                            'error': isErrorStatus(package.activationStatus.status)}">
                        <mat-icon>{{package.activationStatus.icon}}</mat-icon>
                    </div>
                    <p class="package-notice"
                        [ngClass]="{
                            'activated': isActivatedStatus(package.activationStatus.status),
                            'warning': isWarningStatus(package.activationStatus.status),
                            'error': isErrorStatus(package.activationStatus.status)}">
                        {{package.activationStatus.text}}
                    </p>
                    <button *ngIf="package.products?.length > 0" mat-icon-button type="button" (click)="toggleProducts(packageIndex)">
                        <mat-icon mat-list-icon 
                            class="dropdown-icon" 
                            [ngClass]="{'dropdown-icon-rotate-up': !dropdownToggles[packageIndex], 'dropdown-icon-rotate-down': dropdownToggles[packageIndex]}">
                            keyboard_arrow_down
                        </mat-icon>                    
                    </button>
                </span>
            </mat-list-item>
            <mat-list class="product-list package-dropdown-font" *ngIf="dropdownToggles[packageIndex] === true" [@listAnimationStart]>
                <div class="left-indent" *ngFor="let product of package.products; let productIndex = index">
                    <div *ngIf="product && (productIndex > 0)">
                    </div>
                    <mat-list-item>
                        <va-icon mat-list-avatar [name]="product.name" [iconUrl]="product.iconUrl" [diameter]="40">
                        </va-icon>
                        <h3 mat-line>{{product.name}}</h3>
                        <p class="package-dropdown-font" mat-line>
                            <span>{{product.tagline}}</span>
                        </p>
                        <div *ngIf="product.activationStatus" class="package-dropdown-status" >
                            <div [ngClass]="{
                                'activated': isActivatedStatus(product.activationStatus.status),
                                'warning': isWarningStatus(product.activationStatus.status),
                                'error': isErrorStatus(product.activationStatus.status)}">
                                <mat-icon>{{product.activationStatus.icon}}</mat-icon>
                            </div>  
                            <p [ngClass]="{
                                'activated': isActivatedStatus(product.activationStatus.status),
                                'warning': isWarningStatus(product.activationStatus.status),
                                'error': isErrorStatus(product.activationStatus.status)}">
                                {{product.activationStatus.text}}
                            </p>
                        </div>
                    </mat-list-item>
                </div>
            </mat-list>
        </div>
    </mat-list>
</mat-card>
<ng-template #loading> 
    <mat-card>
        <div class="package-dropdown-stencil-display">
            <va-icon [iconUrl]=""></va-icon>
            <div class="stencil-text">
                <h1 class="stencil-title stencil-shimmer"></h1>
                <span class="stencil-tagline stencil-shimmer"></span>
            </div>
        </div>
    </mat-card>    
</ng-template>