@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
50 lines • 9.94 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
import { ProductListOutlets } from '../../product-outlets.model';
import { ProductListItemContextSource } from '../model/product-list-item-context-source.model';
import { ProductListItemContext } from '../model/product-list-item-context.model';
import * as i0 from "@angular/core";
import * as i1 from "../model/product-list-item-context-source.model";
import * as i2 from "../../../../shared/components/media/media.component";
import * as i3 from "../../../../shared/components/star-rating/star-rating.component";
import * as i4 from "../../../cart/add-to-cart/add-to-cart.component";
import * as i5 from "@angular/router";
import * as i6 from "../../../../cms-structure/outlet/outlet.directive";
import * as i7 from "@angular/common";
import * as i8 from "@spartacus/core";
export class ProductGridItemComponent {
constructor(productListItemContextSource) {
this.productListItemContextSource = productListItemContextSource;
this.ProductListOutlets = ProductListOutlets;
}
ngOnChanges(changes) {
if (changes === null || changes === void 0 ? void 0 : changes.product) {
this.productListItemContextSource.product$.next(this.product);
}
}
}
ProductGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductGridItemComponent, deps: [{ token: i1.ProductListItemContextSource }], target: i0.ɵɵFactoryTarget.Component });
ProductGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductGridItemComponent, selector: "cx-product-grid-item", inputs: { product: "product" }, providers: [
ProductListItemContextSource,
{
provide: ProductListItemContext,
useExisting: ProductListItemContextSource,
},
], usesOnChanges: true, ngImport: i0, template: "<a\n [routerLink]=\"{ cxRoute: 'product', params: product } | cxUrl\"\n class=\"cx-product-image-container\"\n tabindex=\"-1\"\n>\n <cx-media\n class=\"cx-product-image\"\n [container]=\"product.images?.PRIMARY\"\n format=\"product\"\n [alt]=\"product.summary\"\n ></cx-media>\n</a>\n<a\n [routerLink]=\"{ cxRoute: 'product', params: product } | cxUrl\"\n class=\"cx-product-name\"\n [innerHTML]=\"product.nameHtml\"\n></a>\n\n<ng-template [cxOutlet]=\"ProductListOutlets.ITEM_DETAILS\">\n <div class=\"cx-product-rating\">\n <cx-star-rating\n *ngIf=\"product.averageRating\"\n [rating]=\"product?.averageRating\"\n ></cx-star-rating>\n <div *ngIf=\"!product.averageRating\">\n {{ 'productDetails.noReviews' | cxTranslate }}\n </div>\n </div>\n <div class=\"cx-product-price-container\">\n <div\n class=\"cx-product-price\"\n [attr.aria-label]=\"'productDetails.productPrice' | cxTranslate\"\n >\n {{ product.price?.formattedValue }}\n </div>\n </div>\n</ng-template>\n\n<ng-template [cxOutlet]=\"ProductListOutlets.ITEM_ACTIONS\">\n <cx-add-to-cart\n *ngIf=\"product.stock?.stockLevelStatus !== 'outOfStock'\"\n [showQuantity]=\"false\"\n [product]=\"product\"\n ></cx-add-to-cart>\n</ng-template>\n", components: [{ type: i2.MediaComponent, selector: "cx-media", inputs: ["container", "format", "alt", "role", "loading"], outputs: ["loaded"] }, { type: i3.StarRatingComponent, selector: "cx-star-rating", inputs: ["disabled", "rating"], outputs: ["change"] }, { type: i4.AddToCartComponent, selector: "cx-add-to-cart", inputs: ["productCode", "showQuantity", "product"] }], directives: [{ type: i5.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i6.OutletDirective, selector: "[cxOutlet]", inputs: ["cxOutlet", "cxOutletContext", "cxOutletDefer"], outputs: ["loaded"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "cxUrl": i8.UrlPipe, "cxTranslate": i8.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductGridItemComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-grid-item',
templateUrl: './product-grid-item.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
ProductListItemContextSource,
{
provide: ProductListItemContext,
useExisting: ProductListItemContextSource,
},
],
}]
}], ctorParameters: function () { return [{ type: i1.ProductListItemContextSource }]; }, propDecorators: { product: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1ncmlkLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9jbXMtY29tcG9uZW50cy9wcm9kdWN0L3Byb2R1Y3QtbGlzdC9wcm9kdWN0LWdyaWQtaXRlbS9wcm9kdWN0LWdyaWQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1jb21wb25lbnRzL3Byb2R1Y3QvcHJvZHVjdC1saXN0L3Byb2R1Y3QtZ3JpZC1pdGVtL3Byb2R1Y3QtZ3JpZC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUMvRixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7Ozs7Ozs7OztBQWNsRixNQUFNLE9BQU8sd0JBQXdCO0lBSW5DLFlBQ1ksNEJBQTBEO1FBQTFELGlDQUE0QixHQUE1Qiw0QkFBNEIsQ0FBOEI7UUFKN0QsdUJBQWtCLEdBQUcsa0JBQWtCLENBQUM7SUFLOUMsQ0FBQztJQUVKLFdBQVcsQ0FBQyxPQUF1QjtRQUNqQyxJQUFJLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxPQUFPLEVBQUU7WUFDcEIsSUFBSSxDQUFDLDRCQUE0QixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQy9EO0lBQ0gsQ0FBQzs7cUhBWlUsd0JBQXdCO3lHQUF4Qix3QkFBd0IsK0VBUnhCO1FBQ1QsNEJBQTRCO1FBQzVCO1lBQ0UsT0FBTyxFQUFFLHNCQUFzQjtZQUMvQixXQUFXLEVBQUUsNEJBQTRCO1NBQzFDO0tBQ0YsK0NDckJILHd3Q0E2Q0E7MkZEdEJhLHdCQUF3QjtrQkFacEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQUNoQyxXQUFXLEVBQUUsb0NBQW9DO29CQUNqRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsU0FBUyxFQUFFO3dCQUNULDRCQUE0Qjt3QkFDNUI7NEJBQ0UsT0FBTyxFQUFFLHNCQUFzQjs0QkFDL0IsV0FBVyxFQUFFLDRCQUE0Qjt5QkFDMUM7cUJBQ0Y7aUJBQ0Y7bUhBR1UsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9kdWN0TGlzdE91dGxldHMgfSBmcm9tICcuLi8uLi9wcm9kdWN0LW91dGxldHMubW9kZWwnO1xuaW1wb3J0IHsgUHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZSB9IGZyb20gJy4uL21vZGVsL3Byb2R1Y3QtbGlzdC1pdGVtLWNvbnRleHQtc291cmNlLm1vZGVsJztcbmltcG9ydCB7IFByb2R1Y3RMaXN0SXRlbUNvbnRleHQgfSBmcm9tICcuLi9tb2RlbC9wcm9kdWN0LWxpc3QtaXRlbS1jb250ZXh0Lm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3gtcHJvZHVjdC1ncmlkLWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdC1ncmlkLWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgUHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBQcm9kdWN0TGlzdEl0ZW1Db250ZXh0LFxuICAgICAgdXNlRXhpc3Rpbmc6IFByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2UsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdEdyaWRJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgcmVhZG9ubHkgUHJvZHVjdExpc3RPdXRsZXRzID0gUHJvZHVjdExpc3RPdXRsZXRzO1xuICBASW5wdXQoKSBwcm9kdWN0OiBhbnk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJvdGVjdGVkIHByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2U6IFByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2VcbiAgKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM/OiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXM/LnByb2R1Y3QpIHtcbiAgICAgIHRoaXMucHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZS5wcm9kdWN0JC5uZXh0KHRoaXMucHJvZHVjdCk7XG4gICAgfVxuICB9XG59XG4iLCI8YVxuICBbcm91dGVyTGlua109XCJ7IGN4Um91dGU6ICdwcm9kdWN0JywgcGFyYW1zOiBwcm9kdWN0IH0gfCBjeFVybFwiXG4gIGNsYXNzPVwiY3gtcHJvZHVjdC1pbWFnZS1jb250YWluZXJcIlxuICB0YWJpbmRleD1cIi0xXCJcbj5cbiAgPGN4LW1lZGlhXG4gICAgY2xhc3M9XCJjeC1wcm9kdWN0LWltYWdlXCJcbiAgICBbY29udGFpbmVyXT1cInByb2R1Y3QuaW1hZ2VzPy5QUklNQVJZXCJcbiAgICBmb3JtYXQ9XCJwcm9kdWN0XCJcbiAgICBbYWx0XT1cInByb2R1Y3Quc3VtbWFyeVwiXG4gID48L2N4LW1lZGlhPlxuPC9hPlxuPGFcbiAgW3JvdXRlckxpbmtdPVwieyBjeFJvdXRlOiAncHJvZHVjdCcsIHBhcmFtczogcHJvZHVjdCB9IHwgY3hVcmxcIlxuICBjbGFzcz1cImN4LXByb2R1Y3QtbmFtZVwiXG4gIFtpbm5lckhUTUxdPVwicHJvZHVjdC5uYW1lSHRtbFwiXG4+PC9hPlxuXG48bmctdGVtcGxhdGUgW2N4T3V0bGV0XT1cIlByb2R1Y3RMaXN0T3V0bGV0cy5JVEVNX0RFVEFJTFNcIj5cbiAgPGRpdiBjbGFzcz1cImN4LXByb2R1Y3QtcmF0aW5nXCI+XG4gICAgPGN4LXN0YXItcmF0aW5nXG4gICAgICAqbmdJZj1cInByb2R1Y3QuYXZlcmFnZVJhdGluZ1wiXG4gICAgICBbcmF0aW5nXT1cInByb2R1Y3Q/LmF2ZXJhZ2VSYXRpbmdcIlxuICAgID48L2N4LXN0YXItcmF0aW5nPlxuICAgIDxkaXYgKm5nSWY9XCIhcHJvZHVjdC5hdmVyYWdlUmF0aW5nXCI+XG4gICAgICB7eyAncHJvZHVjdERldGFpbHMubm9SZXZpZXdzJyB8IGN4VHJhbnNsYXRlIH19XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY3gtcHJvZHVjdC1wcmljZS1jb250YWluZXJcIj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImN4LXByb2R1Y3QtcHJpY2VcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCIncHJvZHVjdERldGFpbHMucHJvZHVjdFByaWNlJyB8IGN4VHJhbnNsYXRlXCJcbiAgICA+XG4gICAgICB7eyBwcm9kdWN0LnByaWNlPy5mb3JtYXR0ZWRWYWx1ZSB9fVxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSBbY3hPdXRsZXRdPVwiUHJvZHVjdExpc3RPdXRsZXRzLklURU1fQUNUSU9OU1wiPlxuICA8Y3gtYWRkLXRvLWNhcnRcbiAgICAqbmdJZj1cInByb2R1Y3Quc3RvY2s/LnN0b2NrTGV2ZWxTdGF0dXMgIT09ICdvdXRPZlN0b2NrJ1wiXG4gICAgW3Nob3dRdWFudGl0eV09XCJmYWxzZVwiXG4gICAgW3Byb2R1Y3RdPVwicHJvZHVjdFwiXG4gID48L2N4LWFkZC10by1jYXJ0PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==