@spartacus/storefront
Version:
Spartacus Storefront is a package that you can include in your application, which allows you to add default storefront features.
80 lines • 8.45 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, HostListener, Input, Output, } from '@angular/core';
import { ICON_TYPE } from '../../../cms-components/misc/index';
import * as i0 from "@angular/core";
import * as i1 from "../../../cms-components/misc/icon/icon.component";
import * as i2 from "@angular/common";
/**
* Star rating component can be used to view existing ratings as well
* as create new ratings. The component can be used for any ratings.
*/
export class StarRatingComponent {
constructor() {
this.initialRate = 0;
this.icon = ICON_TYPE.STAR;
/**
* The rating component can be used in disabled mode,
* so that the interaction is not provided.
*
* Defaults to true.
*/
this.disabled = true;
/**
* The rating is used to color the rating stars. It can have a
* precise number. The rating number is used for a CSS custom property
* (AKA css variable) value. The actually coloring is done in CSS.
*/
this.rating = this.initialRate;
/**
* Emits the given rating when the user clicks on a star.
*/
// eslint-disable-next-line @angular-eslint/no-output-native
this.change = new EventEmitter();
}
setRate(value) {
if (this.disabled) {
return;
}
this.rating = value;
}
reset() {
var _a;
if (this.disabled) {
return;
}
this.rating = (_a = this.initialRate) !== null && _a !== void 0 ? _a : 0;
}
saveRate(rating) {
if (this.disabled) {
return;
}
this.initialRate = rating;
this.setRate(rating);
this.change.emit(rating);
}
}
StarRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
StarRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: StarRatingComponent, selector: "cx-star-rating", inputs: { disabled: "disabled", rating: "rating" }, outputs: { change: "change" }, host: { listeners: { "mouseout": "reset()" }, properties: { "attr.disabled": "this.disabled", "style.--star-fill": "this.rating" } }, ngImport: i0, template: "<cx-icon\n *ngFor=\"let i of [1, 2, 3, 4, 5]\"\n [type]=\"icon\"\n class=\"star\"\n (mouseover)=\"setRate(i)\"\n (click)=\"saveRate(i)\"\n (keydown.space)=\"saveRate(i)\"\n [attr.tabindex]=\"disabled ? null : 0\"\n></cx-icon>\n", components: [{ type: i1.IconComponent, selector: "cx-icon,[cxIcon]", inputs: ["cxIcon", "type"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: StarRatingComponent, decorators: [{
type: Component,
args: [{
selector: 'cx-star-rating',
templateUrl: './star-rating.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], propDecorators: { disabled: [{
type: Input
}, {
type: HostBinding,
args: ['attr.disabled']
}], rating: [{
type: Input
}, {
type: HostBinding,
args: ['style.--star-fill']
}], change: [{
type: Output
}], reset: [{
type: HostListener,
args: ['mouseout']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rhci1yYXRpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvc3RvcmVmcm9udGxpYi9zaGFyZWQvY29tcG9uZW50cy9zdGFyLXJhdGluZy9zdGFyLXJhdGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zdG9yZWZyb250bGliL3NoYXJlZC9jb21wb25lbnRzL3N0YXItcmF0aW5nL3N0YXItcmF0aW5nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7O0FBRS9EOzs7R0FHRztBQU1ILE1BQU0sT0FBTyxtQkFBbUI7SUFMaEM7UUFNWSxnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUUxQixTQUFJLEdBQUcsU0FBUyxDQUFDLElBQUksQ0FBQztRQUV0Qjs7Ozs7V0FLRztRQUNvQyxhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRXZEOzs7O1dBSUc7UUFHSCxXQUFNLEdBQVcsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUVsQzs7V0FFRztRQUNILDREQUE0RDtRQUNsRCxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztLQXlCL0M7SUF2QkMsT0FBTyxDQUFDLEtBQWE7UUFDbkIsSUFBSSxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2pCLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFHRCxLQUFLOztRQUNILElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNqQixPQUFPO1NBQ1I7UUFDRCxJQUFJLENBQUMsTUFBTSxHQUFHLE1BQUEsSUFBSSxDQUFDLFdBQVcsbUNBQUksQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRCxRQUFRLENBQUMsTUFBYztRQUNyQixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDakIsT0FBTztTQUNSO1FBQ0QsSUFBSSxDQUFDLFdBQVcsR0FBRyxNQUFNLENBQUM7UUFDMUIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMzQixDQUFDOztnSEFsRFUsbUJBQW1CO29HQUFuQixtQkFBbUIsK1FDcEJoQyw0T0FTQTsyRkRXYSxtQkFBbUI7a0JBTC9CLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsV0FBVyxFQUFFLDhCQUE4QjtvQkFDM0MsZUFBZSxFQUFFLHVCQUF1QixDQUFDLE1BQU07aUJBQ2hEOzhCQVl3QyxRQUFRO3NCQUE5QyxLQUFLOztzQkFBSSxXQUFXO3VCQUFDLGVBQWU7Z0JBU3JDLE1BQU07c0JBRkwsS0FBSzs7c0JBQ0wsV0FBVzt1QkFBQyxtQkFBbUI7Z0JBT3RCLE1BQU07c0JBQWYsTUFBTTtnQkFVUCxLQUFLO3NCQURKLFlBQVk7dUJBQUMsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQ09OX1RZUEUgfSBmcm9tICcuLi8uLi8uLi9jbXMtY29tcG9uZW50cy9taXNjL2luZGV4JztcblxuLyoqXG4gKiBTdGFyIHJhdGluZyBjb21wb25lbnQgY2FuIGJlIHVzZWQgdG8gdmlldyBleGlzdGluZyByYXRpbmdzIGFzIHdlbGxcbiAqIGFzIGNyZWF0ZSBuZXcgcmF0aW5ncy4gVGhlIGNvbXBvbmVudCBjYW4gYmUgdXNlZCBmb3IgYW55IHJhdGluZ3MuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N4LXN0YXItcmF0aW5nJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N0YXItcmF0aW5nLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFN0YXJSYXRpbmdDb21wb25lbnQge1xuICBwcm90ZWN0ZWQgaW5pdGlhbFJhdGUgPSAwO1xuXG4gIGljb24gPSBJQ09OX1RZUEUuU1RBUjtcblxuICAvKipcbiAgICogVGhlIHJhdGluZyBjb21wb25lbnQgY2FuIGJlIHVzZWQgaW4gZGlzYWJsZWQgbW9kZSxcbiAgICogc28gdGhhdCB0aGUgaW50ZXJhY3Rpb24gaXMgbm90IHByb3ZpZGVkLlxuICAgKlxuICAgKiBEZWZhdWx0cyB0byB0cnVlLlxuICAgKi9cbiAgQElucHV0KCkgQEhvc3RCaW5kaW5nKCdhdHRyLmRpc2FibGVkJykgZGlzYWJsZWQgPSB0cnVlO1xuXG4gIC8qKlxuICAgKiBUaGUgcmF0aW5nIGlzIHVzZWQgdG8gY29sb3IgdGhlIHJhdGluZyBzdGFycy4gSXQgY2FuIGhhdmUgYVxuICAgKiBwcmVjaXNlIG51bWJlci4gVGhlIHJhdGluZyBudW1iZXIgaXMgdXNlZCBmb3IgYSBDU1MgY3VzdG9tIHByb3BlcnR5XG4gICAqIChBS0EgY3NzIHZhcmlhYmxlKSB2YWx1ZS4gVGhlIGFjdHVhbGx5IGNvbG9yaW5nIGlzIGRvbmUgaW4gQ1NTLlxuICAgKi9cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCdzdHlsZS4tLXN0YXItZmlsbCcpXG4gIHJhdGluZzogbnVtYmVyID0gdGhpcy5pbml0aWFsUmF0ZTtcblxuICAvKipcbiAgICogRW1pdHMgdGhlIGdpdmVuIHJhdGluZyB3aGVuIHRoZSB1c2VyIGNsaWNrcyBvbiBhIHN0YXIuXG4gICAqL1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L25vLW91dHB1dC1uYXRpdmVcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIHNldFJhdGUodmFsdWU6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMucmF0aW5nID0gdmFsdWU7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZW91dCcpXG4gIHJlc2V0KCkge1xuICAgIGlmICh0aGlzLmRpc2FibGVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMucmF0aW5nID0gdGhpcy5pbml0aWFsUmF0ZSA/PyAwO1xuICB9XG5cbiAgc2F2ZVJhdGUocmF0aW5nOiBudW1iZXIpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kaXNhYmxlZCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmluaXRpYWxSYXRlID0gcmF0aW5nO1xuICAgIHRoaXMuc2V0UmF0ZShyYXRpbmcpO1xuICAgIHRoaXMuY2hhbmdlLmVtaXQocmF0aW5nKTtcbiAgfVxufVxuIiwiPGN4LWljb25cbiAgKm5nRm9yPVwibGV0IGkgb2YgWzEsIDIsIDMsIDQsIDVdXCJcbiAgW3R5cGVdPVwiaWNvblwiXG4gIGNsYXNzPVwic3RhclwiXG4gIChtb3VzZW92ZXIpPVwic2V0UmF0ZShpKVwiXG4gIChjbGljayk9XCJzYXZlUmF0ZShpKVwiXG4gIChrZXlkb3duLnNwYWNlKT1cInNhdmVSYXRlKGkpXCJcbiAgW2F0dHIudGFiaW5kZXhdPVwiZGlzYWJsZWQgPyBudWxsIDogMFwiXG4+PC9jeC1pY29uPlxuIl19