@vendasta/store
Version:
Components and data for Store
105 lines (104 loc) • 9.86 kB
JavaScript
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Component, Input, trigger, transition, animate, style, state } from '@angular/core';
import { buildSalesPackages, addStatusesToSalesPackages, ActivationStatus } from './sales-package';
var VaPackageDropdownComponent = /** @class */ (function () {
function VaPackageDropdownComponent() {
this.singularDropdown = false;
this.packages$$ = new BehaviorSubject([]);
this.products$$ = new BehaviorSubject([]);
this.statuses$$ = new BehaviorSubject([]);
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
});
VaPackageDropdownComponent.prototype.ngOnInit = function () {
var salesPackage$ = Observable.zip(this.packages$$, this.products$$, function (packages, products) { return buildSalesPackages(packages, products); });
this.salesPackages$ = Observable.combineLatest(salesPackage$, this.statuses$$, function (salesPackages, statuses) { 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> <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> ",
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-list-container mat-list .package-list .product-list { background-color: rgba(0, 0, 0, 0.04); overflow: hidden; } .package-list-container mat-list .package-list .product-list .left-indent { border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding-left: 30px; } .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; } "],
},] },
];
/** @nocollapse */
VaPackageDropdownComponent.ctorParameters = function () { return []; };
VaPackageDropdownComponent.propDecorators = {
'packages': [{ type: Input },],
'products': [{ type: Input },],
'statuses': [{ type: Input },],
'singularDropdown': [{ type: Input },],
};
return VaPackageDropdownComponent;
}());
export { VaPackageDropdownComponent };