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

<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>{{package.formattedPrices}}</p>
                <span *ngIf="!package.activationStatus" class="package-dropdown-layout">
                    <p class="package-dropdown-font package-notice">
                        <span *ngIf="(package.products?.length > 0) || (package.totalAddons > 0)">Contains </span>
                        <span *ngIf="package.products?.length > 0">
                            {{package.products.length}} {{package.products.length === 1 ? "Product" : "Products"}}
                        </span>
                        <span *ngIf="(package.products?.length > 0) && (package.totalAddons > 0)"> & </span>
                        <span *ngIf="package.totalAddons > 0">
                            {{package.totalAddons}} {{package.totalAddons === 1 ? "Addon" : "Addons"}}
                        </span>
                        <span *ngIf="(package.products?.length === 0) && (package.totalAddons === 0)">
                            No Items in Package
                        </span>
                    </p>
                    <button *ngIf="package.products?.length > 0 || package.addonsWithNoParent?.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 || package.addonsWithNoParent?.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-or-addon-list package-dropdown-font" *ngIf="dropdownToggles[packageIndex]" [@listAnimationStart]>
                <div *ngFor="let product of package.products">
                    <mat-list-item class="product-or-addon-item">
                        <va-icon mat-list-avatar [name]="product.name" [iconUrl]="product.icon" [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>
                    <mat-list-item *ngFor="let addon of product.addons" class="product-or-addon-item addon-with-product">
                        <va-icon mat-list-avatar [name]="addon.name" [iconUrl]="addon.icon" [diameter]="40"></va-icon>
                        <h3 mat-line>{{addon.name}}</h3>
                        <p class="package-dropdown-font" mat-line>{{addon.tagline}}</p>
                        <div *ngIf="addon.activationStatus" class="package-dropdown-status">
                            <div [ngClass]="{
                                'activated': isActivatedStatus(addon.activationStatus.status),
                                'warning': isWarningStatus(addon.activationStatus.status),
                                'error': isErrorStatus(addon.activationStatus.status)}">
                                <mat-icon>{{addon.activationStatus.icon}}</mat-icon>
                            </div>
                            <p [ngClass]="{
                                'activated': isActivatedStatus(addon.activationStatus.status),
                                'warning': isWarningStatus(addon.activationStatus.status),
                                'error': isErrorStatus(addon.activationStatus.status)}">
                                {{addon.activationStatus.text}}
                            </p>
                        </div>
                    </mat-list-item>
                </div>

                <mat-list-item *ngFor="let addon of package.addonsWithNoParent" class="product-or-addon-item">
                    <div class="icon-area">
                        <va-icon mat-list-avatar [iconUrl]="addon.icon" [name]="addon.name" [diameter]="40"></va-icon>
                        <va-icon mat-list-avatar class="addon-indicator" [iconUrl]="addon.parentIcon" [diameter]="20" [name]="addon.parentName"></va-icon>
                    </div>
                    <h3 mat-line >{{addon.name}} <span class="required-product">(Requires {{addon.parentName || ''}})</span></h3>
                    <p class="package-dropdown-font" mat-line>
                        <span>{{addon.tagline}}</span>
                    </p>
                    <div *ngIf="addon.activationStatus" class="package-dropdown-status">
                        <div [ngClass]="{
                            'activated': isActivatedStatus(addon.activationStatus.status),
                            'warning': isWarningStatus(addon.activationStatus.status),
                            'error': isErrorStatus(addon.activationStatus.status)}">
                            <mat-icon>{{addon.activationStatus.icon}}</mat-icon>
                        </div>
                        <p [ngClass]="{
                            'activated': isActivatedStatus(addon.activationStatus.status),
                            'warning': isWarningStatus(addon.activationStatus.status),
                            'error': isErrorStatus(addon.activationStatus.status)}">
                            {{addon.activationStatus.text}}
                        </p>
                    </div>
                </mat-list-item>
            </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>