@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 • 11.1 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 ProductListItemComponent {
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);
}
}
}
ProductListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductListItemComponent, deps: [{ token: i1.ProductListItemContextSource }], target: i0.ɵɵFactoryTarget.Component });
ProductListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductListItemComponent, selector: "cx-product-list-item", inputs: { product: "product" }, providers: [
ProductListItemContextSource,
{
provide: ProductListItemContext,
useExisting: ProductListItemContextSource,
},
], usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <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 </div>\n <div class=\"col-12 col-md-8\">\n <a\n [routerLink]=\"{ cxRoute: 'product', params: product } | cxUrl\"\n class=\"cx-product-name\"\n >\n <h2 [innerHtml]=\"product.nameHtml\"></h2>\n </a>\n\n <ng-template [cxOutlet]=\"ProductListOutlets.ITEM_DETAILS\">\n <cx-star-rating\n *ngIf=\"product.averageRating\"\n [rating]=\"product?.averageRating\"\n ></cx-star-rating>\n <div *ngIf=\"!product.averageRating\" class=\"cx-product-no-review\">\n {{ 'productDetails.noReviews' | cxTranslate }}\n </div>\n <div\n class=\"cx-product-price\"\n [attr.aria-label]=\"'productDetails.productPrice' | cxTranslate\"\n >\n {{ product.price?.formattedValue }}\n </div>\n </ng-template>\n\n <div class=\"row\">\n <div class=\"col-12 col-md-8\">\n <p class=\"cx-product-summary\" [innerHtml]=\"product.summary\">\n {{ product.summary }}\n </p>\n </div>\n <div class=\"col-12 col-md-4\">\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 </div>\n </div>\n </div>\n</div>\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: ProductListItemComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-list-item',
templateUrl: './product-list-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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1saXN0LWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9jbXMtY29tcG9uZW50cy9wcm9kdWN0L3Byb2R1Y3QtbGlzdC9wcm9kdWN0LWxpc3QtaXRlbS9wcm9kdWN0LWxpc3QtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1jb21wb25lbnRzL3Byb2R1Y3QvcHJvZHVjdC1saXN0L3Byb2R1Y3QtbGlzdC1pdGVtL3Byb2R1Y3QtbGlzdC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULEtBQUssR0FHTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsNEJBQTRCLEVBQUUsTUFBTSxpREFBaUQsQ0FBQztBQUMvRixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQzs7Ozs7Ozs7OztBQWNsRixNQUFNLE9BQU8sd0JBQXdCO0lBSW5DLFlBQ1ksNEJBQTBEO1FBQTFELGlDQUE0QixHQUE1Qiw0QkFBNEIsQ0FBOEI7UUFKN0QsdUJBQWtCLEdBQUcsa0JBQWtCLENBQUM7SUFLOUMsQ0FBQztJQUVKLFdBQVcsQ0FBQyxPQUF1QjtRQUNqQyxJQUFJLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRSxPQUFPLEVBQUU7WUFDcEIsSUFBSSxDQUFDLDRCQUE0QixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1NBQy9EO0lBQ0gsQ0FBQzs7cUhBWlUsd0JBQXdCO3lHQUF4Qix3QkFBd0IsK0VBUnhCO1FBQ1QsNEJBQTRCO1FBQzVCO1lBQ0UsT0FBTyxFQUFFLHNCQUFzQjtZQUMvQixXQUFXLEVBQUUsNEJBQTRCO1NBQzFDO0tBQ0YsK0NDckJILDZ1REF5REE7MkZEbENhLHdCQUF3QjtrQkFacEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsc0JBQXNCO29CQUNoQyxXQUFXLEVBQUUsb0NBQW9DO29CQUNqRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsU0FBUyxFQUFFO3dCQUNULDRCQUE0Qjt3QkFDNUI7NEJBQ0UsT0FBTyxFQUFFLHNCQUFzQjs0QkFDL0IsV0FBVyxFQUFFLDRCQUE0Qjt5QkFDMUM7cUJBQ0Y7aUJBQ0Y7bUhBR1UsT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9kdWN0TGlzdE91dGxldHMgfSBmcm9tICcuLi8uLi9wcm9kdWN0LW91dGxldHMubW9kZWwnO1xuaW1wb3J0IHsgUHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZSB9IGZyb20gJy4uL21vZGVsL3Byb2R1Y3QtbGlzdC1pdGVtLWNvbnRleHQtc291cmNlLm1vZGVsJztcbmltcG9ydCB7IFByb2R1Y3RMaXN0SXRlbUNvbnRleHQgfSBmcm9tICcuLi9tb2RlbC9wcm9kdWN0LWxpc3QtaXRlbS1jb250ZXh0Lm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3gtcHJvZHVjdC1saXN0LWl0ZW0nLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZHVjdC1saXN0LWl0ZW0uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgcHJvdmlkZXJzOiBbXG4gICAgUHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBQcm9kdWN0TGlzdEl0ZW1Db250ZXh0LFxuICAgICAgdXNlRXhpc3Rpbmc6IFByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2UsXG4gICAgfSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdExpc3RJdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgcmVhZG9ubHkgUHJvZHVjdExpc3RPdXRsZXRzID0gUHJvZHVjdExpc3RPdXRsZXRzO1xuICBASW5wdXQoKSBwcm9kdWN0OiBhbnk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJvdGVjdGVkIHByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2U6IFByb2R1Y3RMaXN0SXRlbUNvbnRleHRTb3VyY2VcbiAgKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM/OiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXM/LnByb2R1Y3QpIHtcbiAgICAgIHRoaXMucHJvZHVjdExpc3RJdGVtQ29udGV4dFNvdXJjZS5wcm9kdWN0JC5uZXh0KHRoaXMucHJvZHVjdCk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwicm93XCI+XG4gIDxkaXYgY2xhc3M9XCJjb2wtMTIgY29sLW1kLTRcIj5cbiAgICA8YVxuICAgICAgW3JvdXRlckxpbmtdPVwieyBjeFJvdXRlOiAncHJvZHVjdCcsIHBhcmFtczogcHJvZHVjdCB9IHwgY3hVcmxcIlxuICAgICAgY2xhc3M9XCJjeC1wcm9kdWN0LWltYWdlLWNvbnRhaW5lclwiXG4gICAgICB0YWJpbmRleD1cIi0xXCJcbiAgICA+XG4gICAgICA8Y3gtbWVkaWFcbiAgICAgICAgY2xhc3M9XCJjeC1wcm9kdWN0LWltYWdlXCJcbiAgICAgICAgW2NvbnRhaW5lcl09XCJwcm9kdWN0LmltYWdlcz8uUFJJTUFSWVwiXG4gICAgICAgIGZvcm1hdD1cInByb2R1Y3RcIlxuICAgICAgICBbYWx0XT1cInByb2R1Y3Quc3VtbWFyeVwiXG4gICAgICA+PC9jeC1tZWRpYT5cbiAgICA8L2E+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiY29sLTEyIGNvbC1tZC04XCI+XG4gICAgPGFcbiAgICAgIFtyb3V0ZXJMaW5rXT1cInsgY3hSb3V0ZTogJ3Byb2R1Y3QnLCBwYXJhbXM6IHByb2R1Y3QgfSB8IGN4VXJsXCJcbiAgICAgIGNsYXNzPVwiY3gtcHJvZHVjdC1uYW1lXCJcbiAgICA+XG4gICAgICA8aDIgW2lubmVySHRtbF09XCJwcm9kdWN0Lm5hbWVIdG1sXCI+PC9oMj5cbiAgICA8L2E+XG5cbiAgICA8bmctdGVtcGxhdGUgW2N4T3V0bGV0XT1cIlByb2R1Y3RMaXN0T3V0bGV0cy5JVEVNX0RFVEFJTFNcIj5cbiAgICAgIDxjeC1zdGFyLXJhdGluZ1xuICAgICAgICAqbmdJZj1cInByb2R1Y3QuYXZlcmFnZVJhdGluZ1wiXG4gICAgICAgIFtyYXRpbmddPVwicHJvZHVjdD8uYXZlcmFnZVJhdGluZ1wiXG4gICAgICA+PC9jeC1zdGFyLXJhdGluZz5cbiAgICAgIDxkaXYgKm5nSWY9XCIhcHJvZHVjdC5hdmVyYWdlUmF0aW5nXCIgY2xhc3M9XCJjeC1wcm9kdWN0LW5vLXJldmlld1wiPlxuICAgICAgICB7eyAncHJvZHVjdERldGFpbHMubm9SZXZpZXdzJyB8IGN4VHJhbnNsYXRlIH19XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXZcbiAgICAgICAgY2xhc3M9XCJjeC1wcm9kdWN0LXByaWNlXCJcbiAgICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCIncHJvZHVjdERldGFpbHMucHJvZHVjdFByaWNlJyB8IGN4VHJhbnNsYXRlXCJcbiAgICAgID5cbiAgICAgICAge3sgcHJvZHVjdC5wcmljZT8uZm9ybWF0dGVkVmFsdWUgfX1cbiAgICAgIDwvZGl2PlxuICAgIDwvbmctdGVtcGxhdGU+XG5cbiAgICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29sLTEyIGNvbC1tZC04XCI+XG4gICAgICAgIDxwIGNsYXNzPVwiY3gtcHJvZHVjdC1zdW1tYXJ5XCIgW2lubmVySHRtbF09XCJwcm9kdWN0LnN1bW1hcnlcIj5cbiAgICAgICAgICB7eyBwcm9kdWN0LnN1bW1hcnkgfX1cbiAgICAgICAgPC9wPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiY29sLTEyIGNvbC1tZC00XCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBbY3hPdXRsZXRdPVwiUHJvZHVjdExpc3RPdXRsZXRzLklURU1fQUNUSU9OU1wiPlxuICAgICAgICAgIDxjeC1hZGQtdG8tY2FydFxuICAgICAgICAgICAgKm5nSWY9XCJwcm9kdWN0LnN0b2NrPy5zdG9ja0xldmVsU3RhdHVzICE9PSAnb3V0T2ZTdG9jaydcIlxuICAgICAgICAgICAgW3Nob3dRdWFudGl0eV09XCJmYWxzZVwiXG4gICAgICAgICAgICBbcHJvZHVjdF09XCJwcm9kdWN0XCJcbiAgICAgICAgICA+PC9jeC1hZGQtdG8tY2FydD5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19