@vendasta/store
Version:
Components and data for Store
56 lines • 12.7 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/divider";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/common";
const DEFAULT_PAGE_SIZE = 4;
export class AddonListComponent {
constructor() {
this.addons = [];
this.addonSelected = new EventEmitter();
this.pageSize = DEFAULT_PAGE_SIZE;
}
onRowClicked(addon) {
this.addonSelected.emit(addon.addonId);
}
getFormattedPrice(addon) {
addon.price = addon.price || 0;
if (addon.price === 0) {
return 'Free';
}
else if (addon.price === -1) {
return 'Contact Sales';
}
let currency = (addon.currency || '').toUpperCase();
if (['CAD', 'USD', 'AUD'].includes(currency)) {
currency = currency === 'USD' ? '$' : currency + '$';
}
const price = addon.price / 100;
return currency + price.toFixed(2);
}
getBillingFrequency(addon) {
addon.price = addon.price || 0;
if (addon.price === 0 || addon.price === -1) {
return '';
}
let billFrequency = (addon.billingFrequency || '').toLowerCase();
if (billFrequency !== 'yearly' && billFrequency !== 'monthly') {
billFrequency = '';
}
return billFrequency;
}
onLoadMoreClicked() {
this.pageSize += DEFAULT_PAGE_SIZE;
}
}
AddonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: AddonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AddonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: AddonListComponent, selector: "app-addon-list", inputs: { addons: "addons" }, outputs: { addonSelected: "addonSelected" }, ngImport: i0, template: "<ng-container *ngFor=\"let addon of addons; index as idx\">\n <div\n class=\"addon-row\"\n *ngIf=\"idx + 1 <= pageSize\"\n (click)=\"onRowClicked(addon)\"\n >\n <mat-divider></mat-divider>\n <div class=\"product-details xmat-elevation-z2\">\n <div>\n <ng-container *ngIf=\"addon.icon; else noicon\">\n <img id=\"product-icon\" [src]=\"addon.icon\" />\n </ng-container>\n <ng-template #noicon>\n <mat-icon class=\"product-default-icon\">add_circle</mat-icon>\n </ng-template>\n </div>\n <div class=\"desciption-and-tagline\">\n <div>\n <span class=\"addon-title\">{{ addon.title }}</span>\n </div>\n <div>\n <span class=\"addon-tagline\">{{ addon.tagline }}</span>\n </div>\n </div>\n <div class=\"pricing\">\n <div class=\"price\">\n {{ getFormattedPrice(addon) }}\n </div>\n <div class=\"frequency\">\n {{ getBillingFrequency(addon) }}\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<div\n class=\"load-more\"\n *ngIf=\"pageSize < addons.length\"\n (click)=\"onLoadMoreClicked()\"\n>\n <mat-icon>add</mat-icon>\n <span>Load more</span>\n</div>\n", styles: [".addon-row{position:relative;cursor:pointer}.addon-row :hover{background-color:#f5f5f5}.product-details{display:flex;padding:8px 0 16px}.product-details>:first-child{padding:0 8px}.product-default-icon{margin:0 5px;color:#4caf50}#product-icon{width:32px;height:32px}.desciption-and-tagline{flex-grow:1}.addon-title{color:#212121;white-space:normal}.addon-tagline{color:#616161;font-size:.9em;white-space:normal}.pricing{text-align:right;padding-left:8px}.pricing .price{color:#212121}.pricing .frequency{color:#616161;font-size:.7em}.load-more{display:flex;margin-top:15px;justify-content:center;color:#1e88e5}.load-more mat-icon{font-size:1.5em}.load-more mat-icon,.load-more span{cursor:pointer}\n"], components: [{ type: i1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: AddonListComponent, decorators: [{
type: Component,
args: [{ selector: 'app-addon-list', template: "<ng-container *ngFor=\"let addon of addons; index as idx\">\n <div\n class=\"addon-row\"\n *ngIf=\"idx + 1 <= pageSize\"\n (click)=\"onRowClicked(addon)\"\n >\n <mat-divider></mat-divider>\n <div class=\"product-details xmat-elevation-z2\">\n <div>\n <ng-container *ngIf=\"addon.icon; else noicon\">\n <img id=\"product-icon\" [src]=\"addon.icon\" />\n </ng-container>\n <ng-template #noicon>\n <mat-icon class=\"product-default-icon\">add_circle</mat-icon>\n </ng-template>\n </div>\n <div class=\"desciption-and-tagline\">\n <div>\n <span class=\"addon-title\">{{ addon.title }}</span>\n </div>\n <div>\n <span class=\"addon-tagline\">{{ addon.tagline }}</span>\n </div>\n </div>\n <div class=\"pricing\">\n <div class=\"price\">\n {{ getFormattedPrice(addon) }}\n </div>\n <div class=\"frequency\">\n {{ getBillingFrequency(addon) }}\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<div\n class=\"load-more\"\n *ngIf=\"pageSize < addons.length\"\n (click)=\"onLoadMoreClicked()\"\n>\n <mat-icon>add</mat-icon>\n <span>Load more</span>\n</div>\n", styles: [".addon-row{position:relative;cursor:pointer}.addon-row :hover{background-color:#f5f5f5}.product-details{display:flex;padding:8px 0 16px}.product-details>:first-child{padding:0 8px}.product-default-icon{margin:0 5px;color:#4caf50}#product-icon{width:32px;height:32px}.desciption-and-tagline{flex-grow:1}.addon-title{color:#212121;white-space:normal}.addon-tagline{color:#616161;font-size:.9em;white-space:normal}.pricing{text-align:right;padding-left:8px}.pricing .price{color:#212121}.pricing .frequency{color:#616161;font-size:.7em}.load-more{display:flex;margin-top:15px;justify-content:center;color:#1e88e5}.load-more mat-icon{font-size:1.5em}.load-more mat-icon,.load-more span{cursor:pointer}\n"] }]
}], propDecorators: { addons: [{
type: Input
}], addonSelected: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWRkb24tbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N0b3JlL3NyYy9saWIvcHJvZHVjdC1kZXRhaWxzLXYyL2FkZG9uLWxpc3QvYWRkb24tbGlzdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzL3N0b3JlL3NyYy9saWIvcHJvZHVjdC1kZXRhaWxzLXYyL2FkZG9uLWxpc3QvYWRkb24tbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQUd2RSxNQUFNLGlCQUFpQixHQUFHLENBQUMsQ0FBQztBQU81QixNQUFNLE9BQU8sa0JBQWtCO0lBTC9CO1FBTVcsV0FBTSxHQUFZLEVBQUUsQ0FBQztRQUNwQixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDckQsYUFBUSxHQUFHLGlCQUFpQixDQUFDO0tBeUM5QjtJQXZDQyxZQUFZLENBQUMsS0FBWTtRQUN2QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVELGlCQUFpQixDQUFDLEtBQVk7UUFDNUIsS0FBSyxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxJQUFJLENBQUMsQ0FBQztRQUMvQixJQUFJLEtBQUssQ0FBQyxLQUFLLEtBQUssQ0FBQyxFQUFFO1lBQ3JCLE9BQU8sTUFBTSxDQUFDO1NBQ2Y7YUFBTSxJQUFJLEtBQUssQ0FBQyxLQUFLLEtBQUssQ0FBQyxDQUFDLEVBQUU7WUFDN0IsT0FBTyxlQUFlLENBQUM7U0FDeEI7UUFFRCxJQUFJLFFBQVEsR0FBRyxDQUFDLEtBQUssQ0FBQyxRQUFRLElBQUksRUFBRSxDQUFDLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDcEQsSUFBSSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsS0FBSyxDQUFDLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxFQUFFO1lBQzVDLFFBQVEsR0FBRyxRQUFRLEtBQUssS0FBSyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7U0FDdEQ7UUFFRCxNQUFNLEtBQUssR0FBRyxLQUFLLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztRQUVoQyxPQUFPLFFBQVEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxtQkFBbUIsQ0FBQyxLQUFZO1FBQzlCLEtBQUssQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLEtBQUssSUFBSSxDQUFDLENBQUM7UUFDL0IsSUFBSSxLQUFLLENBQUMsS0FBSyxLQUFLLENBQUMsSUFBSSxLQUFLLENBQUMsS0FBSyxLQUFLLENBQUMsQ0FBQyxFQUFFO1lBQzNDLE9BQU8sRUFBRSxDQUFDO1NBQ1g7UUFFRCxJQUFJLGFBQWEsR0FBRyxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsSUFBSSxFQUFFLENBQUMsQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNqRSxJQUFJLGFBQWEsS0FBSyxRQUFRLElBQUksYUFBYSxLQUFLLFNBQVMsRUFBRTtZQUM3RCxhQUFhLEdBQUcsRUFBRSxDQUFDO1NBQ3BCO1FBRUQsT0FBTyxhQUFhLENBQUM7SUFDdkIsQ0FBQztJQUVELGlCQUFpQjtRQUNmLElBQUksQ0FBQyxRQUFRLElBQUksaUJBQWlCLENBQUM7SUFDckMsQ0FBQzs7K0dBM0NVLGtCQUFrQjttR0FBbEIsa0JBQWtCLGlJQ1YvQixtdUNBNENBOzJGRGxDYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsZ0JBQWdCOzhCQUtqQixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0ksYUFBYTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBZGRvbiB9IGZyb20gJ0B2ZW5kYXN0YS9jb3JlL3NoYXJlZCc7XG5cbmNvbnN0IERFRkFVTFRfUEFHRV9TSVpFID0gNDtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWFkZG9uLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vYWRkb24tbGlzdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FkZG9uLWxpc3QuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQWRkb25MaXN0Q29tcG9uZW50IHtcbiAgQElucHV0KCkgYWRkb25zOiBBZGRvbltdID0gW107XG4gIEBPdXRwdXQoKSBhZGRvblNlbGVjdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XG4gIHBhZ2VTaXplID0gREVGQVVMVF9QQUdFX1NJWkU7XG5cbiAgb25Sb3dDbGlja2VkKGFkZG9uOiBBZGRvbik6IHZvaWQge1xuICAgIHRoaXMuYWRkb25TZWxlY3RlZC5lbWl0KGFkZG9uLmFkZG9uSWQpO1xuICB9XG5cbiAgZ2V0Rm9ybWF0dGVkUHJpY2UoYWRkb246IEFkZG9uKTogc3RyaW5nIHtcbiAgICBhZGRvbi5wcmljZSA9IGFkZG9uLnByaWNlIHx8IDA7XG4gICAgaWYgKGFkZG9uLnByaWNlID09PSAwKSB7XG4gICAgICByZXR1cm4gJ0ZyZWUnO1xuICAgIH0gZWxzZSBpZiAoYWRkb24ucHJpY2UgPT09IC0xKSB7XG4gICAgICByZXR1cm4gJ0NvbnRhY3QgU2FsZXMnO1xuICAgIH1cblxuICAgIGxldCBjdXJyZW5jeSA9IChhZGRvbi5jdXJyZW5jeSB8fCAnJykudG9VcHBlckNhc2UoKTtcbiAgICBpZiAoWydDQUQnLCAnVVNEJywgJ0FVRCddLmluY2x1ZGVzKGN1cnJlbmN5KSkge1xuICAgICAgY3VycmVuY3kgPSBjdXJyZW5jeSA9PT0gJ1VTRCcgPyAnJCcgOiBjdXJyZW5jeSArICckJztcbiAgICB9XG5cbiAgICBjb25zdCBwcmljZSA9IGFkZG9uLnByaWNlIC8gMTAwO1xuXG4gICAgcmV0dXJuIGN1cnJlbmN5ICsgcHJpY2UudG9GaXhlZCgyKTtcbiAgfVxuXG4gIGdldEJpbGxpbmdGcmVxdWVuY3koYWRkb246IEFkZG9uKTogc3RyaW5nIHtcbiAgICBhZGRvbi5wcmljZSA9IGFkZG9uLnByaWNlIHx8IDA7XG4gICAgaWYgKGFkZG9uLnByaWNlID09PSAwIHx8IGFkZG9uLnByaWNlID09PSAtMSkge1xuICAgICAgcmV0dXJuICcnO1xuICAgIH1cblxuICAgIGxldCBiaWxsRnJlcXVlbmN5ID0gKGFkZG9uLmJpbGxpbmdGcmVxdWVuY3kgfHwgJycpLnRvTG93ZXJDYXNlKCk7XG4gICAgaWYgKGJpbGxGcmVxdWVuY3kgIT09ICd5ZWFybHknICYmIGJpbGxGcmVxdWVuY3kgIT09ICdtb250aGx5Jykge1xuICAgICAgYmlsbEZyZXF1ZW5jeSA9ICcnO1xuICAgIH1cblxuICAgIHJldHVybiBiaWxsRnJlcXVlbmN5O1xuICB9XG5cbiAgb25Mb2FkTW9yZUNsaWNrZWQoKTogdm9pZCB7XG4gICAgdGhpcy5wYWdlU2l6ZSArPSBERUZBVUxUX1BBR0VfU0laRTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYWRkb24gb2YgYWRkb25zOyBpbmRleCBhcyBpZHhcIj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiYWRkb24tcm93XCJcbiAgICAqbmdJZj1cImlkeCArIDEgPD0gcGFnZVNpemVcIlxuICAgIChjbGljayk9XCJvblJvd0NsaWNrZWQoYWRkb24pXCJcbiAgPlxuICAgIDxtYXQtZGl2aWRlcj48L21hdC1kaXZpZGVyPlxuICAgIDxkaXYgY2xhc3M9XCJwcm9kdWN0LWRldGFpbHMgeG1hdC1lbGV2YXRpb24tejJcIj5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJhZGRvbi5pY29uOyBlbHNlIG5vaWNvblwiPlxuICAgICAgICAgIDxpbWcgaWQ9XCJwcm9kdWN0LWljb25cIiBbc3JjXT1cImFkZG9uLmljb25cIiAvPlxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNub2ljb24+XG4gICAgICAgICAgPG1hdC1pY29uIGNsYXNzPVwicHJvZHVjdC1kZWZhdWx0LWljb25cIj5hZGRfY2lyY2xlPC9tYXQtaWNvbj5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImRlc2NpcHRpb24tYW5kLXRhZ2xpbmVcIj5cbiAgICAgICAgPGRpdj5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImFkZG9uLXRpdGxlXCI+e3sgYWRkb24udGl0bGUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxzcGFuIGNsYXNzPVwiYWRkb24tdGFnbGluZVwiPnt7IGFkZG9uLnRhZ2xpbmUgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwicHJpY2luZ1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicHJpY2VcIj5cbiAgICAgICAgICB7eyBnZXRGb3JtYXR0ZWRQcmljZShhZGRvbikgfX1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmcmVxdWVuY3lcIj5cbiAgICAgICAgICB7eyBnZXRCaWxsaW5nRnJlcXVlbmN5KGFkZG9uKSB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctY29udGFpbmVyPlxuXG48ZGl2XG4gIGNsYXNzPVwibG9hZC1tb3JlXCJcbiAgKm5nSWY9XCJwYWdlU2l6ZSA8IGFkZG9ucy5sZW5ndGhcIlxuICAoY2xpY2spPVwib25Mb2FkTW9yZUNsaWNrZWQoKVwiXG4+XG4gIDxtYXQtaWNvbj5hZGQ8L21hdC1pY29uPlxuICA8c3Bhbj5Mb2FkIG1vcmU8L3NwYW4+XG48L2Rpdj5cbiJdfQ==