@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
76 lines • 13.6 kB
JavaScript
import { ChangeDetectionStrategy, Component, } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../current-product.service";
import * as i2 from "@spartacus/core";
import * as i3 from "../../../shared/components/star-rating/star-rating.component";
import * as i4 from "@angular/common";
export class ProductIntroComponent {
constructor(currentProductService, translationService, winRef) {
this.currentProductService = currentProductService;
this.translationService = translationService;
this.winRef = winRef;
this.reviewsTabAvailable = new BehaviorSubject(false);
this.product$ = this.currentProductService.getProduct();
}
ngAfterContentChecked() {
this.reviewsTabAvailable.next(!!this.getReviewsComponent());
}
// Scroll to views component on page and click "Reviews" tab
showReviews() {
// Use translated label for Reviews tab reference
this.translationService
.translate('TabPanelContainer.tabs.ProductReviewsTabComponent')
.subscribe((reviewsTabLabel) => {
const tabsComponent = this.getTabsComponent();
const reviewsTab = this.getTabByLabel(reviewsTabLabel, tabsComponent);
const reviewsComponent = this.getReviewsComponent();
if (reviewsTab && reviewsComponent) {
this.clickTabIfInactive(reviewsTab);
setTimeout(() => reviewsComponent.scrollIntoView({ behavior: 'smooth' }), 0);
}
})
.unsubscribe();
}
// NOTE: Does not currently exists as its own component
// but part of tabs component. This is likely to change in refactor.
getReviewsComponent() {
return this.winRef.document.querySelector('cx-product-reviews');
}
// Get Tabs Component if exists on page
getTabsComponent() {
return this.winRef.document.querySelector('cx-tab-paragraph-container');
}
// Click to activate tab if not already active
clickTabIfInactive(tab) {
if (!tab.classList.contains('active') ||
tab.classList.contains('toggled')) {
tab.click();
}
}
// Get Tab by label if exists on page
getTabByLabel(label, tabsComponent) {
if (tabsComponent) {
// NOTE: Reads through button tags to click on correct tab
// There may be a better way of doing this now/after refactor
const tabElements = tabsComponent.getElementsByTagName('button');
// Look through button tab elements until finding tab with label
for (const buttonElement of Array.from(tabElements)) {
if (buttonElement.innerHTML.includes(label)) {
return buttonElement;
}
}
}
}
}
ProductIntroComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductIntroComponent, deps: [{ token: i1.CurrentProductService }, { token: i2.TranslationService }, { token: i2.WindowRef }], target: i0.ɵɵFactoryTarget.Component });
ProductIntroComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductIntroComponent, selector: "cx-product-intro", ngImport: i0, template: "<ng-container *ngIf=\"product$ | async as product\">\n <div class=\"rating\" *ngIf=\"product.averageRating\">\n <cx-star-rating [rating]=\"product?.averageRating\"></cx-star-rating>\n\n <div class=\"count\">({{ product?.numberOfReviews }})</div>\n\n <button\n *ngIf=\"reviewsTabAvailable | async\"\n class=\"btn btn-link cx-action-link\"\n (click)=\"showReviews()\"\n [attr.aria-label]=\"\n 'productSummary.showReviewsDetailed'\n | cxTranslate\n : {\n rating: product.averageRating | number: '1.0-1',\n count: product?.numberOfReviews\n }\n \"\n >\n {{ 'productSummary.showReviews' | cxTranslate }}\n </button>\n </div>\n <div class=\"rating\" *ngIf=\"!product.averageRating\">\n {{ 'productDetails.noReviews' | cxTranslate }}\n </div>\n <div class=\"code\">\n {{ 'productSummary.id' | cxTranslate }} {{ product?.code }}\n </div>\n</ng-container>\n", components: [{ type: i3.StarRatingComponent, selector: "cx-star-rating", inputs: ["disabled", "rating"], outputs: ["change"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe, "cxTranslate": i2.TranslatePipe, "number": i4.DecimalPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductIntroComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-intro',
templateUrl: './product-intro.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i1.CurrentProductService }, { type: i2.TranslationService }, { type: i2.WindowRef }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1pbnRyby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1jb21wb25lbnRzL3Byb2R1Y3QvcHJvZHVjdC1pbnRyby9wcm9kdWN0LWludHJvLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvcHJvZHVjdC9wcm9kdWN0LWludHJvL3Byb2R1Y3QtaW50cm8uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLHVCQUF1QixFQUN2QixTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGVBQWUsRUFBYyxNQUFNLE1BQU0sQ0FBQzs7Ozs7O0FBUW5ELE1BQU0sT0FBTyxxQkFBcUI7SUFLaEMsWUFDWSxxQkFBNEMsRUFDOUMsa0JBQXNDLEVBQ3BDLE1BQWlCO1FBRmpCLDBCQUFxQixHQUFyQixxQkFBcUIsQ0FBdUI7UUFDOUMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFvQjtRQUNwQyxXQUFNLEdBQU4sTUFBTSxDQUFXO1FBUDdCLHdCQUFtQixHQUFHLElBQUksZUFBZSxDQUFVLEtBQUssQ0FBQyxDQUFDO1FBRTFELGFBQVEsR0FBd0IsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFVBQVUsRUFBRSxDQUFDO0lBTXJFLENBQUM7SUFFSixxQkFBcUI7UUFDbkIsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsQ0FBQztJQUM5RCxDQUFDO0lBRUQsNERBQTREO0lBQzVELFdBQVc7UUFDVCxpREFBaUQ7UUFDakQsSUFBSSxDQUFDLGtCQUFrQjthQUNwQixTQUFTLENBQUMsbURBQW1ELENBQUM7YUFDOUQsU0FBUyxDQUFDLENBQUMsZUFBZSxFQUFFLEVBQUU7WUFDN0IsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7WUFDOUMsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxlQUFlLEVBQUUsYUFBYSxDQUFDLENBQUM7WUFDdEUsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQztZQUNwRCxJQUFJLFVBQVUsSUFBSSxnQkFBZ0IsRUFBRTtnQkFDbEMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFVBQVUsQ0FBQyxDQUFDO2dCQUNwQyxVQUFVLENBQ1IsR0FBRyxFQUFFLENBQUMsZ0JBQWdCLENBQUMsY0FBYyxDQUFDLEVBQUUsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQzdELENBQUMsQ0FDRixDQUFDO2FBQ0g7UUFDSCxDQUFDLENBQUM7YUFDRCxXQUFXLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsdURBQXVEO0lBQ3ZELG9FQUFvRTtJQUM1RCxtQkFBbUI7UUFDekIsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsb0JBQW9CLENBQUMsQ0FBQztJQUNsRSxDQUFDO0lBRUQsdUNBQXVDO0lBQy9CLGdCQUFnQjtRQUN0QixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDO0lBQzFFLENBQUM7SUFFRCw4Q0FBOEM7SUFDdEMsa0JBQWtCLENBQUMsR0FBZ0I7UUFDekMsSUFDRSxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQztZQUNqQyxHQUFHLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxTQUFTLENBQUMsRUFDakM7WUFDQSxHQUFHLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDYjtJQUNILENBQUM7SUFFRCxxQ0FBcUM7SUFDN0IsYUFBYSxDQUFDLEtBQWEsRUFBRSxhQUFzQjtRQUN6RCxJQUFJLGFBQWEsRUFBRTtZQUNqQiwwREFBMEQ7WUFDMUQsNkRBQTZEO1lBQzdELE1BQU0sV0FBVyxHQUNmLGFBQWEsQ0FBQyxvQkFBb0IsQ0FBQyxRQUFRLENBQUMsQ0FBQztZQUUvQyxnRUFBZ0U7WUFDaEUsS0FBSyxNQUFNLGFBQWEsSUFBSSxLQUFLLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFO2dCQUNuRCxJQUFJLGFBQWEsQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFO29CQUMzQyxPQUFPLGFBQWEsQ0FBQztpQkFDdEI7YUFDRjtTQUNGO0lBQ0gsQ0FBQzs7a0hBdkVVLHFCQUFxQjtzR0FBckIscUJBQXFCLHdEQ2RsQyxpOUJBNkJBOzJGRGZhLHFCQUFxQjtrQkFMakMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsa0JBQWtCO29CQUM1QixXQUFXLEVBQUUsZ0NBQWdDO29CQUM3QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRDaGVja2VkLFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFByb2R1Y3QsIFRyYW5zbGF0aW9uU2VydmljZSwgV2luZG93UmVmIH0gZnJvbSAnQHNwYXJ0YWN1cy9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCwgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQ3VycmVudFByb2R1Y3RTZXJ2aWNlIH0gZnJvbSAnLi4vY3VycmVudC1wcm9kdWN0LnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjeC1wcm9kdWN0LWludHJvJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Byb2R1Y3QtaW50cm8uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdEludHJvQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50Q2hlY2tlZCB7XG4gIHJldmlld3NUYWJBdmFpbGFibGUgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PGJvb2xlYW4+KGZhbHNlKTtcblxuICBwcm9kdWN0JDogT2JzZXJ2YWJsZTxQcm9kdWN0PiA9IHRoaXMuY3VycmVudFByb2R1Y3RTZXJ2aWNlLmdldFByb2R1Y3QoKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgY3VycmVudFByb2R1Y3RTZXJ2aWNlOiBDdXJyZW50UHJvZHVjdFNlcnZpY2UsXG4gICAgcHJpdmF0ZSB0cmFuc2xhdGlvblNlcnZpY2U6IFRyYW5zbGF0aW9uU2VydmljZSxcbiAgICBwcm90ZWN0ZWQgd2luUmVmOiBXaW5kb3dSZWZcbiAgKSB7fVxuXG4gIG5nQWZ0ZXJDb250ZW50Q2hlY2tlZCgpIHtcbiAgICB0aGlzLnJldmlld3NUYWJBdmFpbGFibGUubmV4dCghIXRoaXMuZ2V0UmV2aWV3c0NvbXBvbmVudCgpKTtcbiAgfVxuXG4gIC8vIFNjcm9sbCB0byB2aWV3cyBjb21wb25lbnQgb24gcGFnZSBhbmQgY2xpY2sgXCJSZXZpZXdzXCIgdGFiXG4gIHNob3dSZXZpZXdzKCkge1xuICAgIC8vIFVzZSB0cmFuc2xhdGVkIGxhYmVsIGZvciBSZXZpZXdzIHRhYiByZWZlcmVuY2VcbiAgICB0aGlzLnRyYW5zbGF0aW9uU2VydmljZVxuICAgICAgLnRyYW5zbGF0ZSgnVGFiUGFuZWxDb250YWluZXIudGFicy5Qcm9kdWN0UmV2aWV3c1RhYkNvbXBvbmVudCcpXG4gICAgICAuc3Vic2NyaWJlKChyZXZpZXdzVGFiTGFiZWwpID0+IHtcbiAgICAgICAgY29uc3QgdGFic0NvbXBvbmVudCA9IHRoaXMuZ2V0VGFic0NvbXBvbmVudCgpO1xuICAgICAgICBjb25zdCByZXZpZXdzVGFiID0gdGhpcy5nZXRUYWJCeUxhYmVsKHJldmlld3NUYWJMYWJlbCwgdGFic0NvbXBvbmVudCk7XG4gICAgICAgIGNvbnN0IHJldmlld3NDb21wb25lbnQgPSB0aGlzLmdldFJldmlld3NDb21wb25lbnQoKTtcbiAgICAgICAgaWYgKHJldmlld3NUYWIgJiYgcmV2aWV3c0NvbXBvbmVudCkge1xuICAgICAgICAgIHRoaXMuY2xpY2tUYWJJZkluYWN0aXZlKHJldmlld3NUYWIpO1xuICAgICAgICAgIHNldFRpbWVvdXQoXG4gICAgICAgICAgICAoKSA9PiByZXZpZXdzQ29tcG9uZW50LnNjcm9sbEludG9WaWV3KHsgYmVoYXZpb3I6ICdzbW9vdGgnIH0pLFxuICAgICAgICAgICAgMFxuICAgICAgICAgICk7XG4gICAgICAgIH1cbiAgICAgIH0pXG4gICAgICAudW5zdWJzY3JpYmUoKTtcbiAgfVxuXG4gIC8vIE5PVEU6IERvZXMgbm90IGN1cnJlbnRseSBleGlzdHMgYXMgaXRzIG93biBjb21wb25lbnRcbiAgLy8gYnV0IHBhcnQgb2YgdGFicyBjb21wb25lbnQuIFRoaXMgaXMgbGlrZWx5IHRvIGNoYW5nZSBpbiByZWZhY3Rvci5cbiAgcHJpdmF0ZSBnZXRSZXZpZXdzQ29tcG9uZW50KCk6IEVsZW1lbnQge1xuICAgIHJldHVybiB0aGlzLndpblJlZi5kb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdjeC1wcm9kdWN0LXJldmlld3MnKTtcbiAgfVxuXG4gIC8vIEdldCBUYWJzIENvbXBvbmVudCBpZiBleGlzdHMgb24gcGFnZVxuICBwcml2YXRlIGdldFRhYnNDb21wb25lbnQoKTogRWxlbWVudCB7XG4gICAgcmV0dXJuIHRoaXMud2luUmVmLmRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2N4LXRhYi1wYXJhZ3JhcGgtY29udGFpbmVyJyk7XG4gIH1cblxuICAvLyBDbGljayB0byBhY3RpdmF0ZSB0YWIgaWYgbm90IGFscmVhZHkgYWN0aXZlXG4gIHByaXZhdGUgY2xpY2tUYWJJZkluYWN0aXZlKHRhYjogSFRNTEVsZW1lbnQpOiB2b2lkIHtcbiAgICBpZiAoXG4gICAgICAhdGFiLmNsYXNzTGlzdC5jb250YWlucygnYWN0aXZlJykgfHxcbiAgICAgIHRhYi5jbGFzc0xpc3QuY29udGFpbnMoJ3RvZ2dsZWQnKVxuICAgICkge1xuICAgICAgdGFiLmNsaWNrKCk7XG4gICAgfVxuICB9XG5cbiAgLy8gR2V0IFRhYiBieSBsYWJlbCBpZiBleGlzdHMgb24gcGFnZVxuICBwcml2YXRlIGdldFRhYkJ5TGFiZWwobGFiZWw6IHN0cmluZywgdGFic0NvbXBvbmVudDogRWxlbWVudCk6IEhUTUxFbGVtZW50IHtcbiAgICBpZiAodGFic0NvbXBvbmVudCkge1xuICAgICAgLy8gTk9URTogUmVhZHMgdGhyb3VnaCBidXR0b24gdGFncyB0byBjbGljayBvbiBjb3JyZWN0IHRhYlxuICAgICAgLy8gVGhlcmUgbWF5IGJlIGEgYmV0dGVyIHdheSBvZiBkb2luZyB0aGlzIG5vdy9hZnRlciByZWZhY3RvclxuICAgICAgY29uc3QgdGFiRWxlbWVudHM6IEhUTUxDb2xsZWN0aW9uT2Y8SFRNTEVsZW1lbnQ+ID1cbiAgICAgICAgdGFic0NvbXBvbmVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnYnV0dG9uJyk7XG5cbiAgICAgIC8vIExvb2sgdGhyb3VnaCBidXR0b24gdGFiIGVsZW1lbnRzIHVudGlsIGZpbmRpbmcgdGFiIHdpdGggbGFiZWxcbiAgICAgIGZvciAoY29uc3QgYnV0dG9uRWxlbWVudCBvZiBBcnJheS5mcm9tKHRhYkVsZW1lbnRzKSkge1xuICAgICAgICBpZiAoYnV0dG9uRWxlbWVudC5pbm5lckhUTUwuaW5jbHVkZXMobGFiZWwpKSB7XG4gICAgICAgICAgcmV0dXJuIGJ1dHRvbkVsZW1lbnQ7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJwcm9kdWN0JCB8IGFzeW5jIGFzIHByb2R1Y3RcIj5cbiAgPGRpdiBjbGFzcz1cInJhdGluZ1wiICpuZ0lmPVwicHJvZHVjdC5hdmVyYWdlUmF0aW5nXCI+XG4gICAgPGN4LXN0YXItcmF0aW5nIFtyYXRpbmddPVwicHJvZHVjdD8uYXZlcmFnZVJhdGluZ1wiPjwvY3gtc3Rhci1yYXRpbmc+XG5cbiAgICA8ZGl2IGNsYXNzPVwiY291bnRcIj4oe3sgcHJvZHVjdD8ubnVtYmVyT2ZSZXZpZXdzIH19KTwvZGl2PlxuXG4gICAgPGJ1dHRvblxuICAgICAgKm5nSWY9XCJyZXZpZXdzVGFiQXZhaWxhYmxlIHwgYXN5bmNcIlxuICAgICAgY2xhc3M9XCJidG4gYnRuLWxpbmsgY3gtYWN0aW9uLWxpbmtcIlxuICAgICAgKGNsaWNrKT1cInNob3dSZXZpZXdzKClcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJcbiAgICAgICAgJ3Byb2R1Y3RTdW1tYXJ5LnNob3dSZXZpZXdzRGV0YWlsZWQnXG4gICAgICAgICAgfCBjeFRyYW5zbGF0ZVxuICAgICAgICAgICAgOiB7XG4gICAgICAgICAgICAgICAgcmF0aW5nOiBwcm9kdWN0LmF2ZXJhZ2VSYXRpbmcgfCBudW1iZXI6ICcxLjAtMScsXG4gICAgICAgICAgICAgICAgY291bnQ6IHByb2R1Y3Q/Lm51bWJlck9mUmV2aWV3c1xuICAgICAgICAgICAgICB9XG4gICAgICBcIlxuICAgID5cbiAgICAgIHt7ICdwcm9kdWN0U3VtbWFyeS5zaG93UmV2aWV3cycgfCBjeFRyYW5zbGF0ZSB9fVxuICAgIDwvYnV0dG9uPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInJhdGluZ1wiICpuZ0lmPVwiIXByb2R1Y3QuYXZlcmFnZVJhdGluZ1wiPlxuICAgIHt7ICdwcm9kdWN0RGV0YWlscy5ub1Jldmlld3MnIHwgY3hUcmFuc2xhdGUgfX1cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJjb2RlXCI+XG4gICAge3sgJ3Byb2R1Y3RTdW1tYXJ5LmlkJyB8IGN4VHJhbnNsYXRlIH19IHt7IHByb2R1Y3Q/LmNvZGUgfX1cbiAgPC9kaXY+XG48L25nLWNvbnRhaW5lcj5cbiJdfQ==