@vendasta/store
Version:
Components and data for Store
47 lines (46 loc) • 3.34 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
var VaAddonListComponent = /** @class */ (function () {
function VaAddonListComponent() {
this.showPricing = true;
this.addonSelected = new EventEmitter();
}
VaAddonListComponent.prototype.onClick = function (addonId) {
this.addonSelected.emit(addonId);
};
VaAddonListComponent.prototype.instanceOfPricing = function (object) {
if (typeof object === 'number') {
return false;
}
return object.currency !== undefined && object.prices !== undefined;
};
VaAddonListComponent.prototype.getDisplayPricing = function (addon) {
var price = addon.price;
if (price && this.instanceOfPricing(price)) {
return price;
}
return {
currency: this.product.currency,
prices: [{
price: addon.price,
frequency: addon.billingFrequency ? addon.billingFrequency : 'Monthly'
}]
};
};
VaAddonListComponent.decorators = [
{ type: Component, args: [{
selector: 'va-addon-list',
template: "\n <mat-list *ngIf=\"addons\" class=\"addon-list\">\n <mat-list-item class=\"addon-list-item\" (click)=\"onClick(addon.addonId)\" *ngFor=\"let addon of addons\">\n <img *ngIf=\"addon.icon\" class=\"addon-icon\" [src]=\"addon.icon\" mat-list-avatar/>\n <mat-icon *ngIf=\"!addon.icon\" class=\"addon-default-icon\" mat-list-icon>add_circle</mat-icon>\n <p class=\"addon-title\" matLine>{{ addon.title }}\n <span *ngIf=\"showPricing\">\n — <va-pricing [pricing]=\"getDisplayPricing(addon)\" [isAddon]=\"true\" class=\"price-section\"></va-pricing>\n </span>\n </p>\n <p class=\"addon-tagline\" matLine> {{ addon.tagline }} </p>\n </mat-list-item>\n </mat-list>\n ",
styles: [":host { display: block; } h2 + :host { margin: -12px 0 -12px; } .price-section { display: inline-block; } .price-section ::ng-deep > div { display: inline-block; } .price-section ::ng-deep .price-number { font-size: 16px; font-weight: normal; } .price-section ::ng-deep .billing-freq { color: #212121; } .addon-list-item .addon-title { color: #212121; font-size: 16px; margin: 4px 0 0; } .addon-list-item .addon-tagline { color: #616161; font-size: 14px; margin: 0 0 4px; white-space: normal; } .addon-list-item .addon-default-icon { color: #4caf50; } .addon-list-item .addon-icon { width: 32px !important; height: 32px !important; } .addon-list-item:hover { background-color: #fafafa !important; } ::ng-deep .mat-list .mat-list-item.mat-2-line .mat-list-item-content { height: auto !important; padding-top: 8px; padding-bottom: 8px; align-items: flex-start; } "]
},] },
];
/** @nocollapse */
VaAddonListComponent.ctorParameters = function () { return []; };
VaAddonListComponent.propDecorators = {
'addons': [{ type: Input },],
'product': [{ type: Input },],
'showPricing': [{ type: Input },],
'addonSelected': [{ type: Output },],
};
return VaAddonListComponent;
}());
export { VaAddonListComponent };