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

import { Component, Input } from '@angular/core';
import { trigger, transition, animate, style, state } from '@angular/animations';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { buildSalesPackages, addStatusesToSalesPackages, ActivationStatus } from './sales-package';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { filter, map, zip, combineLatest } from 'rxjs/operators';
var VaPackageDropdownComponent = /** @class */ (function () {
    function VaPackageDropdownComponent() {
        this.singularDropdown = false;
        this.packages$$ = new ReplaySubject(1);
        this.products$$ = new ReplaySubject(1);
        this.statuses$$ = new BehaviorSubject([]);
        this.addons$$ = new ReplaySubject(1);
        this.dropdownToggles = [];
    }
    Object.defineProperty(VaPackageDropdownComponent.prototype, "packages", {
        set: function (packages) {
            this.packages$$.next(packages);
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(VaPackageDropdownComponent.prototype, "products", {
        set: function (products) {
            this.products$$.next(products);
        },
        enumerable: true,
        configurable: true
    });
    ;
    Object.defineProperty(VaPackageDropdownComponent.prototype, "statuses", {
        set: function (statuses) {
            this.statuses$$.next(statuses);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(VaPackageDropdownComponent.prototype, "addons", {
        set: function (addons) {
            this.addons$$.next(addons);
        },
        enumerable: true,
        configurable: true
    });
    VaPackageDropdownComponent.prototype.ngOnInit = function () {
        var packages$ = this.packages$$.pipe(filter(function (packages) { return packages !== null; }));
        var products$ = this.products$$.pipe(filter(function (products) { return products !== null; }));
        var addons$ = this.addons$$.pipe(filter(function (addons) { return addons !== null; }));
        var salesPackage$ = packages$.pipe(zip(products$, addons$), map(function (_a) {
            var packages = _a[0], products = _a[1], addons = _a[2];
            return buildSalesPackages(packages, products, addons);
        }));
        this.salesPackages$ = salesPackage$.pipe(combineLatest(this.statuses$$), map(function (_a) {
            var salesPackages = _a[0], statuses = _a[1];
            return addStatusesToSalesPackages(salesPackages, statuses);
        }));
    };
    VaPackageDropdownComponent.prototype.toggleProducts = function (indexToToggle) {
        if (this.singularDropdown) {
            var openedIndex = this.dropdownToggles.findIndex(function (value) {
                return value === true;
            });
            if (openedIndex !== indexToToggle) {
                this.dropdownToggles[openedIndex] = false;
            }
        }
        this.dropdownToggles[indexToToggle] = !this.dropdownToggles[indexToToggle];
    };
    VaPackageDropdownComponent.prototype.isActivatedStatus = function (status) {
        if (status === ActivationStatus.SUCCESS) {
            return true;
        }
        else {
            return false;
        }
    };
    VaPackageDropdownComponent.prototype.isWarningStatus = function (status) {
        if (status === ActivationStatus.WARNING) {
            return true;
        }
        else {
            return false;
        }
    };
    VaPackageDropdownComponent.prototype.isErrorStatus = function (status) {
        if (status === ActivationStatus.ERROR) {
            return true;
        }
        else {
            return false;
        }
    };
    VaPackageDropdownComponent.decorators = [
        { type: Component, args: [{
                    selector: 'va-package-dropdown',
                    animations: [
                        trigger('listAnimationStart', [
                            state('void', style({ height: '0px' })),
                            state('*', style({ height: '*' })),
                            transition('void => *', [
                                animate('0.25s ease')
                            ]),
                            transition('* => void', [
                                animate('0.25s ease')
                            ])
                        ])
                    ],
                    template: "<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> ",
                    styles: [".package-dropdown-font { color: rgba(0, 0, 0, 0.54); font-size: 14px; font-weight: 400; } .package-list-container { border-top: 1px solid rgba(0, 0, 0, 0.12); padding: 0; } .package-list-container mat-list { padding: 0; } .package-list-container mat-list .package-list .package-list-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); } .package-dropdown-layout { display: flex; flex-direction: row; align-items: center; } .package-dropdown-layout .package-notice { width: max-content; font-style: italic; } @media screen and (max-width: 500px) { .package-dropdown-layout p { display: none; } } .package-dropdown-layout mat-icon { padding: 0; } .package-dropdown-layout button { padding: 0; min-width: 0; } .package-dropdown-layout button .dropdown-icon { color: rgba(0, 0, 0, 0.54); } .package-dropdown-layout button .dropdown-icon-rotate-down { transform: rotate(180deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-layout button .dropdown-icon-rotate-up { transform: rotate(0deg); transition: .4s all ease; pointer-events: none; } .package-dropdown-stencil-display { display: flex; width: 100%; flex-grow: 1; } .package-dropdown-stencil-display va-icon { margin-right: 20px; } .package-dropdown-stencil-display .stencil-text { width: inherit; display: flex; flex-direction: column; justify-content: center; } .package-dropdown-stencil-display .stencil-text .stencil-title { height: 32px; width: 40%; margin-bottom: 5px !important; margin-top: 0 !important; } .package-dropdown-stencil-display .stencil-text .stencil-tagline { height: 32px; width: inherit; } .package-dropdown-status { display: flex; flex-direction: row; align-items: center; } .package-dropdown-status p { padding-left: 6px; font-size: 14px; white-space: nowrap; } .package-dropdown-status .activated { color: #4caf50; } .package-dropdown-status .warning { color: #ffa000; } .package-dropdown-status .error { color: #c62828; } .icon-area { position: relative; display: inline-block; order: -1; margin-right: 16px; } .icon-area .addon-indicator { position: absolute; border-radius: 50%; bottom: -24px; right: -24px; } .product-or-addon-list { background-color: rgba(0, 0, 0, 0.04); overflow: hidden; } .product-or-addon-list .product-or-addon-item { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-left: 30px; } .product-or-addon-list .product-or-addon-item .required-product { font-size: 11px; font-weight: bold; font-style: italic; } .addon-with-product .mat-list-avatar { margin-left: 40px; } "],
                },] },
    ];
    /** @nocollapse */
    VaPackageDropdownComponent.ctorParameters = function () { return []; };
    VaPackageDropdownComponent.propDecorators = {
        "packages": [{ type: Input },],
        "products": [{ type: Input },],
        "statuses": [{ type: Input },],
        "addons": [{ type: Input },],
        "singularDropdown": [{ type: Input },],
    };
    return VaPackageDropdownComponent;
}());
export { VaPackageDropdownComponent };