@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
52 lines • 7.27 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
import { ICON_TYPE } from '../../../misc/icon/icon.model';
import * as i0 from "@angular/core";
import * as i1 from "../../../misc/icon/icon.component";
import * as i2 from "@angular/common";
import * as i3 from "@spartacus/core";
export var ViewModes;
(function (ViewModes) {
ViewModes["Grid"] = "grid";
ViewModes["List"] = "list";
})(ViewModes || (ViewModes = {}));
export class ProductViewComponent {
constructor() {
this.iconTypes = ICON_TYPE;
this.modeChange = new EventEmitter();
}
get buttonClass() {
const viewName = this.viewMode.toLowerCase();
return `cx-product-${viewName}`;
}
/**
* Display icons inversely to allow users
* to see the view they will navigate to
*/
get viewMode() {
if (this.mode === 'list') {
return this.iconTypes.GRID;
}
else if (this.mode === 'grid') {
return this.iconTypes.LIST;
}
}
changeMode() {
const newMode = this.mode === ViewModes.Grid ? ViewModes.List : ViewModes.Grid;
this.modeChange.emit(newMode);
}
}
ProductViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ProductViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: ProductViewComponent, selector: "cx-product-view", inputs: { mode: "mode" }, outputs: { modeChange: "modeChange" }, ngImport: i0, template: "<button\n class=\"btn cx-product-layout\"\n [ngClass]=\"buttonClass\"\n (click)=\"changeMode()\"\n tabindex=\"0\"\n attr.aria-label=\"{{\n viewMode === iconTypes.GRID\n ? ('productView.gridView' | cxTranslate)\n : viewMode === iconTypes.LIST\n ? ('productView.listView' | cxTranslate)\n : null\n }}\"\n>\n <cx-icon\n *ngIf=\"viewMode === iconTypes.GRID\"\n [type]=\"iconTypes.GRID\"\n ></cx-icon>\n <cx-icon\n *ngIf=\"viewMode === iconTypes.LIST\"\n [type]=\"iconTypes.LIST\"\n ></cx-icon>\n</button>\n", components: [{ type: i1.IconComponent, selector: "cx-icon,[cxIcon]", inputs: ["cxIcon", "type"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "cxTranslate": i3.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: ProductViewComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-product-view',
templateUrl: './product-view.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { mode: [{
type: Input
}], modeChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0b3JlZnJvbnRsaWIvY21zLWNvbXBvbmVudHMvcHJvZHVjdC9wcm9kdWN0LWxpc3QvcHJvZHVjdC12aWV3L3Byb2R1Y3Qtdmlldy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL2Ntcy1jb21wb25lbnRzL3Byb2R1Y3QvcHJvZHVjdC1saXN0L3Byb2R1Y3Qtdmlldy9wcm9kdWN0LXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7OztBQUUxRCxNQUFNLENBQU4sSUFBWSxTQUdYO0FBSEQsV0FBWSxTQUFTO0lBQ25CLDBCQUFhLENBQUE7SUFDYiwwQkFBYSxDQUFBO0FBQ2YsQ0FBQyxFQUhXLFNBQVMsS0FBVCxTQUFTLFFBR3BCO0FBT0QsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQU1FLGNBQVMsR0FBRyxTQUFTLENBQUM7UUFJdEIsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7S0F3QnpDO0lBdEJDLElBQUksV0FBVztRQUNiLE1BQU0sUUFBUSxHQUFXLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDckQsT0FBTyxjQUFjLFFBQVEsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFRDs7O09BR0c7SUFDSCxJQUFJLFFBQVE7UUFDVixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFO1lBQ3hCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUM7U0FDNUI7YUFBTSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFO1lBQy9CLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUM7U0FDNUI7SUFDSCxDQUFDO0lBRUQsVUFBVTtRQUNSLE1BQU0sT0FBTyxHQUNYLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQztRQUNqRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoQyxDQUFDOztpSEE1QlUsb0JBQW9CO3FHQUFwQixvQkFBb0Isd0hDbkJqQyxxaUJBc0JBOzJGREhhLG9CQUFvQjtrQkFMaEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQixXQUFXLEVBQUUsK0JBQStCO29CQUM1QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7OEJBSUMsSUFBSTtzQkFESCxLQUFLO2dCQUdOLFVBQVU7c0JBRFQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQ09OX1RZUEUgfSBmcm9tICcuLi8uLi8uLi9taXNjL2ljb24vaWNvbi5tb2RlbCc7XG5cbmV4cG9ydCBlbnVtIFZpZXdNb2RlcyB7XG4gIEdyaWQgPSAnZ3JpZCcsXG4gIExpc3QgPSAnbGlzdCcsXG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LXByb2R1Y3QtdmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0LXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgUHJvZHVjdFZpZXdDb21wb25lbnQge1xuICBpY29uVHlwZXMgPSBJQ09OX1RZUEU7XG4gIEBJbnB1dCgpXG4gIG1vZGU6IFZpZXdNb2RlcztcbiAgQE91dHB1dCgpXG4gIG1vZGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBnZXQgYnV0dG9uQ2xhc3MoKSB7XG4gICAgY29uc3Qgdmlld05hbWU6IHN0cmluZyA9IHRoaXMudmlld01vZGUudG9Mb3dlckNhc2UoKTtcbiAgICByZXR1cm4gYGN4LXByb2R1Y3QtJHt2aWV3TmFtZX1gO1xuICB9XG5cbiAgLyoqXG4gICAqICAgRGlzcGxheSBpY29ucyBpbnZlcnNlbHkgdG8gYWxsb3cgdXNlcnNcbiAgICogICB0byBzZWUgdGhlIHZpZXcgdGhleSB3aWxsIG5hdmlnYXRlIHRvXG4gICAqL1xuICBnZXQgdmlld01vZGUoKSB7XG4gICAgaWYgKHRoaXMubW9kZSA9PT0gJ2xpc3QnKSB7XG4gICAgICByZXR1cm4gdGhpcy5pY29uVHlwZXMuR1JJRDtcbiAgICB9IGVsc2UgaWYgKHRoaXMubW9kZSA9PT0gJ2dyaWQnKSB7XG4gICAgICByZXR1cm4gdGhpcy5pY29uVHlwZXMuTElTVDtcbiAgICB9XG4gIH1cblxuICBjaGFuZ2VNb2RlKCkge1xuICAgIGNvbnN0IG5ld01vZGUgPVxuICAgICAgdGhpcy5tb2RlID09PSBWaWV3TW9kZXMuR3JpZCA/IFZpZXdNb2Rlcy5MaXN0IDogVmlld01vZGVzLkdyaWQ7XG4gICAgdGhpcy5tb2RlQ2hhbmdlLmVtaXQobmV3TW9kZSk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgY2xhc3M9XCJidG4gY3gtcHJvZHVjdC1sYXlvdXRcIlxuICBbbmdDbGFzc109XCJidXR0b25DbGFzc1wiXG4gIChjbGljayk9XCJjaGFuZ2VNb2RlKClcIlxuICB0YWJpbmRleD1cIjBcIlxuICBhdHRyLmFyaWEtbGFiZWw9XCJ7e1xuICAgIHZpZXdNb2RlID09PSBpY29uVHlwZXMuR1JJRFxuICAgICAgPyAoJ3Byb2R1Y3RWaWV3LmdyaWRWaWV3JyB8IGN4VHJhbnNsYXRlKVxuICAgICAgOiB2aWV3TW9kZSA9PT0gaWNvblR5cGVzLkxJU1RcbiAgICAgID8gKCdwcm9kdWN0Vmlldy5saXN0VmlldycgfCBjeFRyYW5zbGF0ZSlcbiAgICAgIDogbnVsbFxuICB9fVwiXG4+XG4gIDxjeC1pY29uXG4gICAgKm5nSWY9XCJ2aWV3TW9kZSA9PT0gaWNvblR5cGVzLkdSSURcIlxuICAgIFt0eXBlXT1cImljb25UeXBlcy5HUklEXCJcbiAgPjwvY3gtaWNvbj5cbiAgPGN4LWljb25cbiAgICAqbmdJZj1cInZpZXdNb2RlID09PSBpY29uVHlwZXMuTElTVFwiXG4gICAgW3R5cGVdPVwiaWNvblR5cGVzLkxJU1RcIlxuICA+PC9jeC1pY29uPlxuPC9idXR0b24+XG4iXX0=