@vendasta/store
Version:
Components and data for Store
118 lines (116 loc) • 12.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { ImageTransformationService } from '@vendasta/core/image-transformation';
export class StoreCardComponent {
/**
* @param {?} imageTransformationService
*/
constructor(imageTransformationService) {
this.imageTransformationService = imageTransformationService;
this.purchasedClicked = new EventEmitter();
this.cardClicked = new EventEmitter();
this.descriptionClicked = new EventEmitter();
this.bannerClicked = new EventEmitter();
}
/**
* @return {?}
*/
getBannerColorForName() {
// determine an icon color for a product with no icon by using the product name
/** @type {?} */
const COLOR_CODES = [
'#EF5350', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC', '#FFCA28', '#EC407A', '#26C6DA',
'#FF7B57'
];
/** @type {?} */
let nameSum = 0;
/** @type {?} */
const defaultColor = '#808080';
if (!this.item.name) {
return defaultColor;
}
for (let i = 0; i < this.item.name.length; i++) {
nameSum += this.item.name[i].charCodeAt(0);
}
/** @type {?} */
const index = nameSum % COLOR_CODES.length;
return COLOR_CODES[index];
}
/**
* @param {?} imageUrl
* @return {?}
*/
getSrcsetHeaderUrls(imageUrl) {
return this.imageTransformationService.getSrcSetForImage(imageUrl, [680, 1360, 2720]);
}
}
StoreCardComponent.decorators = [
{ type: Component, args: [{
selector: 'va-store-card',
template: `
<mat-card class="hover-card" *ngIf="item" (click)="cardClicked.emit(item)">
<div class="hover-area">
<div class="product-banner" (click)="bannerClicked.emit(item)"
[style.background-color]="item.headerImageUrl ? '': getBannerColorForName()">
<img class="img-container" *ngIf="item.headerImageUrl"
[src]="item.headerImageUrl" [srcset]="getSrcsetHeaderUrls(item.headerImageUrl)">
</div>
<div class="description" (click)="descriptionClicked.emit(item)">
<mat-card-header>
<va-icon mat-card-avatar [diameter]="40" [name]="item.name" [iconUrl]="item.iconUrl"></va-icon>
<mat-card-title>{{item.name}}</mat-card-title>
<mat-card-subtitle>
<ng-container *ngIf="item.pricing; else formatted">
<va-pricing [pricing]="item.pricing"
[highlightPrice]="false"></va-pricing>
</ng-container>
<ng-template #formatted>{{item.formattedPrice}}</ng-template>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content> {{ item.tagline }}
</mat-card-content>
</div>
<button *ngIf="item.purchased !== undefined"
mat-button color="primary" class="enabled-indicator" (click)="purchasedClicked.emit(item)" [disabled]="item.purchased">
<i *ngIf="!item.purchased" class="material-icons">add</i>
<i *ngIf="item.purchased" class="material-icons" style="color: #39B74A">check</i>
<span>{{(item.purchased) ? 'ENABLED' : 'ENABLE'}}</span>
</button>
</div>
</mat-card>
`,
styles: [":host{position:relative}::ng-deep .mat-card-header-text{width:100%}mat-card.hover-card{overflow:hidden;padding:0;margin-bottom:0}mat-card.hover-card mat-card-subtitle,mat-card.hover-card mat-card-title{margin:0 80px 0 0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}mat-card.hover-card mat-card-subtitle{font-size:12px;margin-top:4px}.hover-area{position:relative;cursor:pointer}.product-banner{max-height:133px;overflow:hidden;display:flex;width:100%;height:100px;align-items:center;justify-content:center}.product-banner img{max-width:100%}@media screen and (min-width:480px){.hover-area{padding-top:55%}.hover-area:hover .description{top:0}.hover-area:hover .enabled-indicator span{width:70px}.product-banner{max-height:none;position:absolute;height:60%;top:0}}.description{box-sizing:border-box;padding:10px 16px 0;overflow:hidden;background:#fff;color:#212121;transition:.3s}.description:after{content:'';display:block;width:100%;height:40%;position:absolute;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,0) 40%,#fff 70%)}mat-card-header{box-sizing:border-box;padding-bottom:16px;margin:0;height:40%;display:flex;align-items:center}mat-card-content{min-height:40px;max-height:80px;padding:16px;margin:0 -16px;border-top:1px solid #e0e0e0;font-size:12px}.enabled-indicator{position:absolute;right:8px;bottom:8px}.enabled-indicator span{display:inline-block;width:70px;overflow:hidden;transition:.3s}@media screen and (min-width:480px){.description{position:absolute;top:60%;width:100%;height:100%}.description:after{height:70%}mat-card-content{min-height:0;max-height:none}.enabled-indicator span{width:0}}button[mat-button]{padding:0 8px;min-width:0}mat-card-actions{position:relative;padding:8px!important;margin:0!important;text-align:right;border-top:1px solid #e0e0e0;background-color:#fff;color:#212121}.status{font-size:14px}.img-container{height:100%;width:100%}"]
}] }
];
/** @nocollapse */
StoreCardComponent.ctorParameters = () => [
{ type: ImageTransformationService }
];
StoreCardComponent.propDecorators = {
item: [{ type: Input }],
purchasedClicked: [{ type: Output }],
cardClicked: [{ type: Output }],
descriptionClicked: [{ type: Output }],
bannerClicked: [{ type: Output }]
};
if (false) {
/** @type {?} */
StoreCardComponent.prototype.item;
/** @type {?} */
StoreCardComponent.prototype.purchasedClicked;
/** @type {?} */
StoreCardComponent.prototype.cardClicked;
/** @type {?} */
StoreCardComponent.prototype.descriptionClicked;
/** @type {?} */
StoreCardComponent.prototype.bannerClicked;
/**
* @type {?}
* @private
*/
StoreCardComponent.prototype.imageTransformationService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdmVuZGFzdGEvc3RvcmUvIiwic291cmNlcyI6WyJsaWIvc3RvcmUtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHckUsT0FBTyxFQUFDLDBCQUEwQixFQUFDLE1BQU0scUNBQXFDLENBQUM7QUF3Qy9FLE1BQU0sT0FBTyxrQkFBa0I7Ozs7SUFPM0IsWUFBb0IsMEJBQXNEO1FBQXRELCtCQUEwQixHQUExQiwwQkFBMEIsQ0FBNEI7UUFMaEUscUJBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztRQUNqRCxnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7UUFDNUMsdUJBQWtCLEdBQUcsSUFBSSxZQUFZLEVBQWEsQ0FBQztRQUNuRCxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7SUFFcUIsQ0FBQzs7OztJQUU5RSxxQkFBcUI7OztjQUVmLFdBQVcsR0FBRztZQUNsQixTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUztZQUN0RixTQUFTO1NBQ1Y7O1lBQ0csT0FBTyxHQUFHLENBQUM7O2NBQ1QsWUFBWSxHQUFHLFNBQVM7UUFDOUIsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ25CLE9BQU8sWUFBWSxDQUFDO1NBQ3JCO1FBQ0QsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUM5QyxPQUFPLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQzVDOztjQUNLLEtBQUssR0FBRyxPQUFPLEdBQUcsV0FBVyxDQUFDLE1BQU07UUFDMUMsT0FBTyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7Ozs7SUFFRCxtQkFBbUIsQ0FBQyxRQUFnQjtRQUM5QixPQUFPLElBQUksQ0FBQywwQkFBMEIsQ0FBQyxpQkFBaUIsQ0FBQyxRQUFRLEVBQUUsQ0FBQyxHQUFHLEVBQUUsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDNUYsQ0FBQzs7O1lBbkVGLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsZUFBZTtnQkFDekIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FpQ1Q7O2FBRUo7Ozs7WUF2Q08sMEJBQTBCOzs7bUJBeUM3QixLQUFLOytCQUNMLE1BQU07MEJBQ04sTUFBTTtpQ0FDTixNQUFNOzRCQUNOLE1BQU07Ozs7SUFKUCxrQ0FBeUI7O0lBQ3pCLDhDQUEyRDs7SUFDM0QseUNBQXNEOztJQUN0RCxnREFBNkQ7O0lBQzdELDJDQUF3RDs7Ozs7SUFFNUMsd0RBQThEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7U3RvcmVJdGVtfSBmcm9tICcuL3N0b3JlLWl0ZW0nO1xuaW1wb3J0IHtJbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZX0gZnJvbSAnQHZlbmRhc3RhL2NvcmUvaW1hZ2UtdHJhbnNmb3JtYXRpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3ZhLXN0b3JlLWNhcmQnLFxuICAgIHRlbXBsYXRlOiBgXG48bWF0LWNhcmQgY2xhc3M9XCJob3Zlci1jYXJkXCIgKm5nSWY9XCJpdGVtXCIgKGNsaWNrKT1cImNhcmRDbGlja2VkLmVtaXQoaXRlbSlcIj5cbjxkaXYgY2xhc3M9XCJob3Zlci1hcmVhXCI+XG4gIDxkaXYgY2xhc3M9XCJwcm9kdWN0LWJhbm5lclwiIChjbGljayk9XCJiYW5uZXJDbGlja2VkLmVtaXQoaXRlbSlcIlxuICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJpdGVtLmhlYWRlckltYWdlVXJsID8gJyc6IGdldEJhbm5lckNvbG9yRm9yTmFtZSgpXCI+XG4gICAgPGltZyBjbGFzcz1cImltZy1jb250YWluZXJcIiAqbmdJZj1cIml0ZW0uaGVhZGVySW1hZ2VVcmxcIlxuICAgICAgICAgW3NyY109XCJpdGVtLmhlYWRlckltYWdlVXJsXCIgW3NyY3NldF09XCJnZXRTcmNzZXRIZWFkZXJVcmxzKGl0ZW0uaGVhZGVySW1hZ2VVcmwpXCI+XG4gIDwvZGl2PlxuXG4gIDxkaXYgY2xhc3M9XCJkZXNjcmlwdGlvblwiIChjbGljayk9XCJkZXNjcmlwdGlvbkNsaWNrZWQuZW1pdChpdGVtKVwiPlxuICAgIDxtYXQtY2FyZC1oZWFkZXI+XG4gICAgICA8dmEtaWNvbiBtYXQtY2FyZC1hdmF0YXIgW2RpYW1ldGVyXT1cIjQwXCIgW25hbWVdPVwiaXRlbS5uYW1lXCIgW2ljb25VcmxdPVwiaXRlbS5pY29uVXJsXCI+PC92YS1pY29uPlxuICAgICAgPG1hdC1jYXJkLXRpdGxlPnt7aXRlbS5uYW1lfX08L21hdC1jYXJkLXRpdGxlPlxuICAgICAgPG1hdC1jYXJkLXN1YnRpdGxlPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5wcmljaW5nOyBlbHNlIGZvcm1hdHRlZFwiPlxuICAgICAgICAgIDx2YS1wcmljaW5nIFtwcmljaW5nXT1cIml0ZW0ucHJpY2luZ1wiXG4gICAgICAgICAgICAgICAgICAgICAgW2hpZ2hsaWdodFByaWNlXT1cImZhbHNlXCI+PC92YS1wcmljaW5nPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNmb3JtYXR0ZWQ+e3tpdGVtLmZvcm1hdHRlZFByaWNlfX08L25nLXRlbXBsYXRlPlxuICAgICAgPC9tYXQtY2FyZC1zdWJ0aXRsZT5cbiAgICA8L21hdC1jYXJkLWhlYWRlcj5cbiAgICA8bWF0LWNhcmQtY29udGVudD4ge3sgaXRlbS50YWdsaW5lIH19XG4gICAgPC9tYXQtY2FyZC1jb250ZW50PlxuICA8L2Rpdj5cblxuICA8YnV0dG9uICpuZ0lmPVwiaXRlbS5wdXJjaGFzZWQgIT09IHVuZGVmaW5lZFwiXG4gICAgbWF0LWJ1dHRvbiBjb2xvcj1cInByaW1hcnlcIiBjbGFzcz1cImVuYWJsZWQtaW5kaWNhdG9yXCIgKGNsaWNrKT1cInB1cmNoYXNlZENsaWNrZWQuZW1pdChpdGVtKVwiIFtkaXNhYmxlZF09XCJpdGVtLnB1cmNoYXNlZFwiPlxuICAgIDxpICpuZ0lmPVwiIWl0ZW0ucHVyY2hhc2VkXCIgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiPmFkZDwvaT5cbiAgICA8aSAqbmdJZj1cIml0ZW0ucHVyY2hhc2VkXCIgY2xhc3M9XCJtYXRlcmlhbC1pY29uc1wiIHN0eWxlPVwiY29sb3I6ICMzOUI3NEFcIj5jaGVjazwvaT5cbiAgICA8c3Bhbj57eyhpdGVtLnB1cmNoYXNlZCkgPyAnRU5BQkxFRCcgOiAnRU5BQkxFJ319PC9zcGFuPlxuICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L21hdC1jYXJkPlxuICAgIGAsXG4gICAgc3R5bGVVcmxzOiBbJy4vc3RvcmUtY2FyZC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFN0b3JlQ2FyZENvbXBvbmVudCB7XG4gICAgQElucHV0KCkgaXRlbTogU3RvcmVJdGVtO1xuICAgIEBPdXRwdXQoKSBwdXJjaGFzZWRDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG4gICAgQE91dHB1dCgpIGNhcmRDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG4gICAgQE91dHB1dCgpIGRlc2NyaXB0aW9uQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8U3RvcmVJdGVtPigpO1xuICAgIEBPdXRwdXQoKSBiYW5uZXJDbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG5cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGltYWdlVHJhbnNmb3JtYXRpb25TZXJ2aWNlOiBJbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZSkge31cblxuICAgIGdldEJhbm5lckNvbG9yRm9yTmFtZSgpOiBzdHJpbmcge1xuICAgIC8vIGRldGVybWluZSBhbiBpY29uIGNvbG9yIGZvciBhIHByb2R1Y3Qgd2l0aCBubyBpY29uIGJ5IHVzaW5nIHRoZSBwcm9kdWN0IG5hbWVcbiAgICBjb25zdCBDT0xPUl9DT0RFUyA9IFtcbiAgICAgICcjRUY1MzUwJywgJyM0MkE1RjUnLCAnIzY2QkI2QScsICcjRkZBNzI2JywgJyNBQjQ3QkMnLCAnI0ZGQ0EyOCcsICcjRUM0MDdBJywgJyMyNkM2REEnLFxuICAgICAgJyNGRjdCNTcnXG4gICAgXTtcbiAgICBsZXQgbmFtZVN1bSA9IDA7XG4gICAgY29uc3QgZGVmYXVsdENvbG9yID0gJyM4MDgwODAnO1xuICAgIGlmICghdGhpcy5pdGVtLm5hbWUpIHtcbiAgICAgIHJldHVybiBkZWZhdWx0Q29sb3I7XG4gICAgfVxuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgdGhpcy5pdGVtLm5hbWUubGVuZ3RoOyBpKyspIHtcbiAgICAgIG5hbWVTdW0gKz0gdGhpcy5pdGVtLm5hbWVbaV0uY2hhckNvZGVBdCgwKTtcbiAgICB9XG4gICAgY29uc3QgaW5kZXggPSBuYW1lU3VtICUgQ09MT1JfQ09ERVMubGVuZ3RoO1xuICAgIHJldHVybiBDT0xPUl9DT0RFU1tpbmRleF07XG4gIH1cblxuICBnZXRTcmNzZXRIZWFkZXJVcmxzKGltYWdlVXJsOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgICAgICByZXR1cm4gdGhpcy5pbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZS5nZXRTcmNTZXRGb3JJbWFnZShpbWFnZVVybCwgWzY4MCwgMTM2MCwgMjcyMF0pO1xuICB9XG5cbn1cbiJdfQ==