@vendasta/store/store.component.js

Components and data for Store

import { Component, Input, Output, EventEmitter } from '@angular/core';
var StoreComponent = /** @class */ (function () {
    function StoreComponent() {
        this.items = [];
        this.searchable = true;
        this.itemClicked = new EventEmitter();
    }
    Object.defineProperty(StoreComponent.prototype, "filteredItems", {
        get: function () {
            var _this = this;
            if (this.filterTerm) {
                return this.items.filter(function (pkg) { return pkg.name.toLowerCase().indexOf(_this.filterTerm.toLowerCase()) !== -1; });
            }
            return this.items;
        },
        enumerable: true,
        configurable: true
    });
    StoreComponent.decorators = [
        { type: Component, args: [{
                    selector: 'va-store',
                    template: "\n  <div class=\"toolbar\">\n  <div *ngIf=\"searchable\" class=\"table-controls-row\">\n      <va-search-box (update)=\"filterTerm = $event\"></va-search-box>\n  </div>\n  </div>\n  <div class=\"row row-gutters\">\n      <div *ngFor=\"let item of filteredItems\" class=\"col-flex\">\n          <va-store-card [item]=\"item\" (cardClicked)=\"this.itemClicked.emit(item)\"></va-store-card>\n      </div>\n  </div>\n  ",
                    styles: [".flex-row { display: flex; flex-direction: row; } .toolbar { padding: 0; background-color: #ffffff; 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: #ffffff; } .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%; } } "]
                },] },
    ];
    /** @nocollapse */
    StoreComponent.ctorParameters = function () { return []; };
    StoreComponent.propDecorators = {
        'items': [{ type: Input },],
        'searchable': [{ type: Input },],
        'itemClicked': [{ type: Output },],
    };
    return StoreComponent;
}());
export { StoreComponent };