@vendasta/store
Version:
Components and data for Store
91 lines • 12.5 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';
var StoreCardComponent = /** @class */ (function () {
function StoreCardComponent(imageTransformationService) {
this.imageTransformationService = imageTransformationService;
this.purchasedClicked = new EventEmitter();
this.cardClicked = new EventEmitter();
this.descriptionClicked = new EventEmitter();
this.bannerClicked = new EventEmitter();
}
/**
* @return {?}
*/
StoreCardComponent.prototype.getBannerColorForName = /**
* @return {?}
*/
function () {
// determine an icon color for a product with no icon by using the product name
/** @type {?} */
var COLOR_CODES = [
'#EF5350', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC', '#FFCA28', '#EC407A', '#26C6DA',
'#FF7B57'
];
/** @type {?} */
var nameSum = 0;
/** @type {?} */
var defaultColor = '#808080';
if (!this.item.name) {
return defaultColor;
}
for (var i = 0; i < this.item.name.length; i++) {
nameSum += this.item.name[i].charCodeAt(0);
}
/** @type {?} */
var index = nameSum % COLOR_CODES.length;
return COLOR_CODES[index];
};
/**
* @param {?} imageUrl
* @return {?}
*/
StoreCardComponent.prototype.getSrcsetHeaderUrls = /**
* @param {?} imageUrl
* @return {?}
*/
function (imageUrl) {
return this.imageTransformationService.getSrcSetForImage(imageUrl, [680, 1360, 2720]);
};
StoreCardComponent.decorators = [
{ type: Component, args: [{
selector: 'va-store-card',
template: "\n<mat-card class=\"hover-card\" *ngIf=\"item\" (click)=\"cardClicked.emit(item)\">\n<div class=\"hover-area\">\n <div class=\"product-banner\" (click)=\"bannerClicked.emit(item)\"\n [style.background-color]=\"item.headerImageUrl ? '': getBannerColorForName()\">\n <img class=\"img-container\" *ngIf=\"item.headerImageUrl\"\n [src]=\"item.headerImageUrl\" [srcset]=\"getSrcsetHeaderUrls(item.headerImageUrl)\">\n </div>\n\n <div class=\"description\" (click)=\"descriptionClicked.emit(item)\">\n <mat-card-header>\n <va-icon mat-card-avatar [diameter]=\"40\" [name]=\"item.name\" [iconUrl]=\"item.iconUrl\"></va-icon>\n <mat-card-title>{{item.name}}</mat-card-title>\n <mat-card-subtitle>\n <ng-container *ngIf=\"item.pricing; else formatted\">\n <va-pricing [pricing]=\"item.pricing\"\n [highlightPrice]=\"false\"></va-pricing>\n </ng-container>\n <ng-template #formatted>{{item.formattedPrice}}</ng-template>\n </mat-card-subtitle>\n </mat-card-header>\n <mat-card-content> {{ item.tagline }}\n </mat-card-content>\n </div>\n\n <button *ngIf=\"item.purchased !== undefined\"\n mat-button color=\"primary\" class=\"enabled-indicator\" (click)=\"purchasedClicked.emit(item)\" [disabled]=\"item.purchased\">\n <i *ngIf=\"!item.purchased\" class=\"material-icons\">add</i>\n <i *ngIf=\"item.purchased\" class=\"material-icons\" style=\"color: #39B74A\">check</i>\n <span>{{(item.purchased) ? 'ENABLED' : 'ENABLE'}}</span>\n </button>\n </div>\n</mat-card>\n ",
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 = function () { return [
{ type: ImageTransformationService }
]; };
StoreCardComponent.propDecorators = {
item: [{ type: Input }],
purchasedClicked: [{ type: Output }],
cardClicked: [{ type: Output }],
descriptionClicked: [{ type: Output }],
bannerClicked: [{ type: Output }]
};
return StoreCardComponent;
}());
export { StoreCardComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmUtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AdmVuZGFzdGEvc3RvcmUvIiwic291cmNlcyI6WyJsaWIvc3RvcmUtY2FyZC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFHckUsT0FBTyxFQUFDLDBCQUEwQixFQUFDLE1BQU0scUNBQXFDLENBQUM7QUFFL0U7SUE2Q0ksNEJBQW9CLDBCQUFzRDtRQUF0RCwrQkFBMEIsR0FBMUIsMEJBQTBCLENBQTRCO1FBTGhFLHFCQUFnQixHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7UUFDakQsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO1FBQzVDLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFhLENBQUM7UUFDbkQsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO0lBRXFCLENBQUM7Ozs7SUFFOUUsa0RBQXFCOzs7SUFBckI7OztZQUVNLFdBQVcsR0FBRztZQUNsQixTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsU0FBUztZQUN0RixTQUFTO1NBQ1Y7O1lBQ0csT0FBTyxHQUFHLENBQUM7O1lBQ1QsWUFBWSxHQUFHLFNBQVM7UUFDOUIsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxFQUFFO1lBQ25CLE9BQU8sWUFBWSxDQUFDO1NBQ3JCO1FBQ0QsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUM5QyxPQUFPLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQzVDOztZQUNLLEtBQUssR0FBRyxPQUFPLEdBQUcsV0FBVyxDQUFDLE1BQU07UUFDMUMsT0FBTyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7Ozs7SUFFRCxnREFBbUI7Ozs7SUFBbkIsVUFBb0IsUUFBZ0I7UUFDOUIsT0FBTyxJQUFJLENBQUMsMEJBQTBCLENBQUMsaUJBQWlCLENBQUMsUUFBUSxFQUFFLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxJQUFJLENBQUMsQ0FBQyxDQUFDO0lBQzVGLENBQUM7O2dCQW5FRixTQUFTLFNBQUM7b0JBQ1AsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFFBQVEsRUFBRSx1aURBaUNUOztpQkFFSjs7OztnQkF2Q08sMEJBQTBCOzs7dUJBeUM3QixLQUFLO21DQUNMLE1BQU07OEJBQ04sTUFBTTtxQ0FDTixNQUFNO2dDQUNOLE1BQU07O0lBMEJYLHlCQUFDO0NBQUEsQUFyRUQsSUFxRUM7U0EvQlksa0JBQWtCOzs7SUFDM0Isa0NBQXlCOztJQUN6Qiw4Q0FBMkQ7O0lBQzNELHlDQUFzRDs7SUFDdEQsZ0RBQTZEOztJQUM3RCwyQ0FBd0Q7Ozs7O0lBRTVDLHdEQUE4RCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQge1N0b3JlSXRlbX0gZnJvbSAnLi9zdG9yZS1pdGVtJztcbmltcG9ydCB7SW1hZ2VUcmFuc2Zvcm1hdGlvblNlcnZpY2V9IGZyb20gJ0B2ZW5kYXN0YS9jb3JlL2ltYWdlLXRyYW5zZm9ybWF0aW9uJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd2YS1zdG9yZS1jYXJkJyxcbiAgICB0ZW1wbGF0ZTogYFxuPG1hdC1jYXJkIGNsYXNzPVwiaG92ZXItY2FyZFwiICpuZ0lmPVwiaXRlbVwiIChjbGljayk9XCJjYXJkQ2xpY2tlZC5lbWl0KGl0ZW0pXCI+XG48ZGl2IGNsYXNzPVwiaG92ZXItYXJlYVwiPlxuICA8ZGl2IGNsYXNzPVwicHJvZHVjdC1iYW5uZXJcIiAoY2xpY2spPVwiYmFubmVyQ2xpY2tlZC5lbWl0KGl0ZW0pXCJcbiAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiaXRlbS5oZWFkZXJJbWFnZVVybCA/ICcnOiBnZXRCYW5uZXJDb2xvckZvck5hbWUoKVwiPlxuICAgIDxpbWcgY2xhc3M9XCJpbWctY29udGFpbmVyXCIgKm5nSWY9XCJpdGVtLmhlYWRlckltYWdlVXJsXCJcbiAgICAgICAgIFtzcmNdPVwiaXRlbS5oZWFkZXJJbWFnZVVybFwiIFtzcmNzZXRdPVwiZ2V0U3Jjc2V0SGVhZGVyVXJscyhpdGVtLmhlYWRlckltYWdlVXJsKVwiPlxuICA8L2Rpdj5cblxuICA8ZGl2IGNsYXNzPVwiZGVzY3JpcHRpb25cIiAoY2xpY2spPVwiZGVzY3JpcHRpb25DbGlja2VkLmVtaXQoaXRlbSlcIj5cbiAgICA8bWF0LWNhcmQtaGVhZGVyPlxuICAgICAgPHZhLWljb24gbWF0LWNhcmQtYXZhdGFyIFtkaWFtZXRlcl09XCI0MFwiIFtuYW1lXT1cIml0ZW0ubmFtZVwiIFtpY29uVXJsXT1cIml0ZW0uaWNvblVybFwiPjwvdmEtaWNvbj5cbiAgICAgIDxtYXQtY2FyZC10aXRsZT57e2l0ZW0ubmFtZX19PC9tYXQtY2FyZC10aXRsZT5cbiAgICAgIDxtYXQtY2FyZC1zdWJ0aXRsZT5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIml0ZW0ucHJpY2luZzsgZWxzZSBmb3JtYXR0ZWRcIj5cbiAgICAgICAgICA8dmEtcHJpY2luZyBbcHJpY2luZ109XCJpdGVtLnByaWNpbmdcIlxuICAgICAgICAgICAgICAgICAgICAgIFtoaWdobGlnaHRQcmljZV09XCJmYWxzZVwiPjwvdmEtcHJpY2luZz5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjZm9ybWF0dGVkPnt7aXRlbS5mb3JtYXR0ZWRQcmljZX19PC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvbWF0LWNhcmQtc3VidGl0bGU+XG4gICAgPC9tYXQtY2FyZC1oZWFkZXI+XG4gICAgPG1hdC1jYXJkLWNvbnRlbnQ+IHt7IGl0ZW0udGFnbGluZSB9fVxuICAgIDwvbWF0LWNhcmQtY29udGVudD5cbiAgPC9kaXY+XG5cbiAgPGJ1dHRvbiAqbmdJZj1cIml0ZW0ucHVyY2hhc2VkICE9PSB1bmRlZmluZWRcIlxuICAgIG1hdC1idXR0b24gY29sb3I9XCJwcmltYXJ5XCIgY2xhc3M9XCJlbmFibGVkLWluZGljYXRvclwiIChjbGljayk9XCJwdXJjaGFzZWRDbGlja2VkLmVtaXQoaXRlbSlcIiBbZGlzYWJsZWRdPVwiaXRlbS5wdXJjaGFzZWRcIj5cbiAgICA8aSAqbmdJZj1cIiFpdGVtLnB1cmNoYXNlZFwiIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIj5hZGQ8L2k+XG4gICAgPGkgKm5nSWY9XCJpdGVtLnB1cmNoYXNlZFwiIGNsYXNzPVwibWF0ZXJpYWwtaWNvbnNcIiBzdHlsZT1cImNvbG9yOiAjMzlCNzRBXCI+Y2hlY2s8L2k+XG4gICAgPHNwYW4+e3soaXRlbS5wdXJjaGFzZWQpID8gJ0VOQUJMRUQnIDogJ0VOQUJMRSd9fTwvc3Bhbj5cbiAgPC9idXR0b24+XG4gIDwvZGl2PlxuPC9tYXQtY2FyZD5cbiAgICBgLFxuICAgIHN0eWxlVXJsczogWycuL3N0b3JlLWNhcmQuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTdG9yZUNhcmRDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIGl0ZW06IFN0b3JlSXRlbTtcbiAgICBAT3V0cHV0KCkgcHVyY2hhc2VkQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8U3RvcmVJdGVtPigpO1xuICAgIEBPdXRwdXQoKSBjYXJkQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8U3RvcmVJdGVtPigpO1xuICAgIEBPdXRwdXQoKSBkZXNjcmlwdGlvbkNsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPFN0b3JlSXRlbT4oKTtcbiAgICBAT3V0cHV0KCkgYmFubmVyQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8U3RvcmVJdGVtPigpO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBpbWFnZVRyYW5zZm9ybWF0aW9uU2VydmljZTogSW1hZ2VUcmFuc2Zvcm1hdGlvblNlcnZpY2UpIHt9XG5cbiAgICBnZXRCYW5uZXJDb2xvckZvck5hbWUoKTogc3RyaW5nIHtcbiAgICAvLyBkZXRlcm1pbmUgYW4gaWNvbiBjb2xvciBmb3IgYSBwcm9kdWN0IHdpdGggbm8gaWNvbiBieSB1c2luZyB0aGUgcHJvZHVjdCBuYW1lXG4gICAgY29uc3QgQ09MT1JfQ09ERVMgPSBbXG4gICAgICAnI0VGNTM1MCcsICcjNDJBNUY1JywgJyM2NkJCNkEnLCAnI0ZGQTcyNicsICcjQUI0N0JDJywgJyNGRkNBMjgnLCAnI0VDNDA3QScsICcjMjZDNkRBJyxcbiAgICAgICcjRkY3QjU3J1xuICAgIF07XG4gICAgbGV0IG5hbWVTdW0gPSAwO1xuICAgIGNvbnN0IGRlZmF1bHRDb2xvciA9ICcjODA4MDgwJztcbiAgICBpZiAoIXRoaXMuaXRlbS5uYW1lKSB7XG4gICAgICByZXR1cm4gZGVmYXVsdENvbG9yO1xuICAgIH1cbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMuaXRlbS5uYW1lLmxlbmd0aDsgaSsrKSB7XG4gICAgICBuYW1lU3VtICs9IHRoaXMuaXRlbS5uYW1lW2ldLmNoYXJDb2RlQXQoMCk7XG4gICAgfVxuICAgIGNvbnN0IGluZGV4ID0gbmFtZVN1bSAlIENPTE9SX0NPREVTLmxlbmd0aDtcbiAgICByZXR1cm4gQ09MT1JfQ09ERVNbaW5kZXhdO1xuICB9XG5cbiAgZ2V0U3Jjc2V0SGVhZGVyVXJscyhpbWFnZVVybDogc3RyaW5nKTogc3RyaW5nIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuaW1hZ2VUcmFuc2Zvcm1hdGlvblNlcnZpY2UuZ2V0U3JjU2V0Rm9ySW1hZ2UoaW1hZ2VVcmwsIFs2ODAsIDEzNjAsIDI3MjBdKTtcbiAgfVxuXG59XG4iXX0=