@vendasta/store
Version:
Components and data for Store
64 lines • 7.68 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@vendasta/uikit";
import * as i2 from "./store-card.component";
import * as i3 from "@angular/common";
export class StoreComponent {
constructor() {
this.items = [];
this.showAllPrices = false;
this.searchable = true;
this.itemClicked = new EventEmitter();
}
get filteredItems() {
if (this.filterTerm) {
return this.items.filter((pkg) => pkg.name.toLowerCase().indexOf(this.filterTerm.toLowerCase()) !== -1);
}
return this.items;
}
}
StoreComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
StoreComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.2", type: StoreComponent, selector: "app-store", inputs: { items: "items", showAllPrices: "showAllPrices", searchable: "searchable" }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: `
<div class="toolbar">
<div *ngIf="searchable" class="table-controls-row">
<va-search-box (update)="filterTerm = $event"></va-search-box>
</div>
</div>
<div class="row row-gutters">
<div *ngFor="let item of filteredItems" class="col-flex">
<app-store-card
[item]="item"
(cardClicked)="this.itemClicked.emit(item)"
[showAllPrices]="showAllPrices"
></app-store-card>
</div>
</div>
`, isInline: true, styles: [".flex-row{display:flex;flex-direction:row}.toolbar{padding:0;background-color:#fff;color:#616161}.toolbar .disabled{cursor:default}.toolbar .disabled mat-icon{cursor:default;color:#9e9e9e}.toolbar va-search-box{margin-right:10px;width:350px}.toolbar .table-controls-row{padding:0 10px 10px;display:flex;flex-direction:row;align-items:center}.toolbar .table-controls-row:first-of-type{padding-top:10px}.top-border{border-top:1px solid #ffffff}.selected{background-color:#fff}.row{display:flex;flex-wrap:wrap}.row+.row-gutters{margin-top:0}.row-gutters{margin-top:-20px;margin-left:-20px}.row-gutters>.col-flex{padding-top:20px;padding-left:20px}.col-flex{position:relative;max-width:100%;box-sizing:border-box;flex:0 0 auto;width:100%}@media screen and (min-width: 480px){.col-flex{width:50%}}@media screen and (min-width: 1200px){.col-flex{width:33.333333%}}\n"], components: [{ type: i1.SearchBoxComponent, selector: "va-search-box", inputs: ["highlightWhenSelected", "disabled", "initial", "enabledSaveSearchTerm", "contextKey", "placeholder"], outputs: ["update", "submit"] }, { type: i2.StoreCardComponent, selector: "app-store-card", inputs: ["item", "showAllPrices"], outputs: ["purchasedClicked", "cardClicked", "descriptionClicked", "bannerClicked"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.2", ngImport: i0, type: StoreComponent, decorators: [{
type: Component,
args: [{ selector: 'app-store', template: `
<div class="toolbar">
<div *ngIf="searchable" class="table-controls-row">
<va-search-box (update)="filterTerm = $event"></va-search-box>
</div>
</div>
<div class="row row-gutters">
<div *ngFor="let item of filteredItems" class="col-flex">
<app-store-card
[item]="item"
(cardClicked)="this.itemClicked.emit(item)"
[showAllPrices]="showAllPrices"
></app-store-card>
</div>
</div>
`, styles: [".flex-row{display:flex;flex-direction:row}.toolbar{padding:0;background-color:#fff;color:#616161}.toolbar .disabled{cursor:default}.toolbar .disabled mat-icon{cursor:default;color:#9e9e9e}.toolbar va-search-box{margin-right:10px;width:350px}.toolbar .table-controls-row{padding:0 10px 10px;display:flex;flex-direction:row;align-items:center}.toolbar .table-controls-row:first-of-type{padding-top:10px}.top-border{border-top:1px solid #ffffff}.selected{background-color:#fff}.row{display:flex;flex-wrap:wrap}.row+.row-gutters{margin-top:0}.row-gutters{margin-top:-20px;margin-left:-20px}.row-gutters>.col-flex{padding-top:20px;padding-left:20px}.col-flex{position:relative;max-width:100%;box-sizing:border-box;flex:0 0 auto;width:100%}@media screen and (min-width: 480px){.col-flex{width:50%}}@media screen and (min-width: 1200px){.col-flex{width:33.333333%}}\n"] }]
}], propDecorators: { items: [{
type: Input
}], showAllPrices: [{
type: Input
}], searchable: [{
type: Input
}], itemClicked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RvcmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy9zdG9yZS9zcmMvbGliL3N0b3JlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQXdCL0UsTUFBTSxPQUFPLGNBQWM7SUFwQjNCO1FBcUJXLFVBQUssR0FBZ0IsRUFBRSxDQUFDO1FBQ3hCLGtCQUFhLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLGVBQVUsR0FBRyxJQUFJLENBQUM7UUFFakIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBYSxDQUFDO0tBVXZEO0lBTkMsSUFBSSxhQUFhO1FBQ2YsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFO1lBQ25CLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsV0FBVyxFQUFFLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1NBQ3pHO1FBQ0QsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7OzJHQWRVLGNBQWM7K0ZBQWQsY0FBYyxnTEFsQmY7Ozs7Ozs7Ozs7Ozs7OztHQWVUOzJGQUdVLGNBQWM7a0JBcEIxQixTQUFTOytCQUNFLFdBQVcsWUFDWDs7Ozs7Ozs7Ozs7Ozs7O0dBZVQ7OEJBSVEsS0FBSztzQkFBYixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBTdG9yZUl0ZW0gfSBmcm9tICcuL3N0b3JlLWl0ZW0nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhcHAtc3RvcmUnLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgY2xhc3M9XCJ0b29sYmFyXCI+XG4gICAgICA8ZGl2ICpuZ0lmPVwic2VhcmNoYWJsZVwiIGNsYXNzPVwidGFibGUtY29udHJvbHMtcm93XCI+XG4gICAgICAgIDx2YS1zZWFyY2gtYm94ICh1cGRhdGUpPVwiZmlsdGVyVGVybSA9ICRldmVudFwiPjwvdmEtc2VhcmNoLWJveD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJyb3cgcm93LWd1dHRlcnNcIj5cbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGl0ZW0gb2YgZmlsdGVyZWRJdGVtc1wiIGNsYXNzPVwiY29sLWZsZXhcIj5cbiAgICAgICAgPGFwcC1zdG9yZS1jYXJkXG4gICAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgICAgKGNhcmRDbGlja2VkKT1cInRoaXMuaXRlbUNsaWNrZWQuZW1pdChpdGVtKVwiXG4gICAgICAgICAgW3Nob3dBbGxQcmljZXNdPVwic2hvd0FsbFByaWNlc1wiXG4gICAgICAgID48L2FwcC1zdG9yZS1jYXJkPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL3N0b3JlLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFN0b3JlQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaXRlbXM6IFN0b3JlSXRlbVtdID0gW107XG4gIEBJbnB1dCgpIHNob3dBbGxQcmljZXMgPSBmYWxzZTtcbiAgQElucHV0KCkgc2VhcmNoYWJsZSA9IHRydWU7XG5cbiAgQE91dHB1dCgpIGl0ZW1DbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjxTdG9yZUl0ZW0+KCk7XG5cbiAgZmlsdGVyVGVybTogc3RyaW5nO1xuXG4gIGdldCBmaWx0ZXJlZEl0ZW1zKCk6IFN0b3JlSXRlbVtdIHtcbiAgICBpZiAodGhpcy5maWx0ZXJUZXJtKSB7XG4gICAgICByZXR1cm4gdGhpcy5pdGVtcy5maWx0ZXIoKHBrZykgPT4gcGtnLm5hbWUudG9Mb3dlckNhc2UoKS5pbmRleE9mKHRoaXMuZmlsdGVyVGVybS50b0xvd2VyQ2FzZSgpKSAhPT0gLTEpO1xuICAgIH1cbiAgICByZXR1cm4gdGhpcy5pdGVtcztcbiAgfVxufVxuIl19