@sreyaj/ng-star-rating
Version:
A Simple and Customizable SVG based Star Rating Component For Angular
102 lines • 8.22 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, EventEmitter, Output } from '@angular/core';
export class StarRatingComponent {
constructor() {
this.total = 5;
this.rating = 0;
this.readonly = false;
this.size = '24px';
this.type = 'hollow';
this.filledColor = '#3db700';
this.emptyColor = '#e0e0e0';
this.rated = new EventEmitter();
this.ratings = [];
}
/**
* @return {?}
*/
ngOnInit() {
for (let i = 1; i <= this.total; i++) {
this.ratings.push(i);
}
}
/**
* @param {?} index
* @return {?}
*/
getRatingColor(index) {
return this.rating >= index || this.rating >= index - 0.5
? this.filledColor
: this.emptyColor;
}
/**
* @param {?} index
* @return {?}
*/
getIcon(index) {
if (this.rating >= index) {
return 'star';
}
else {
if (this.rating >= index - 0.5) {
return 'star_half';
}
else {
return this.type === 'hollow' ? 'star_border' : 'star';
}
}
}
/**
* @param {?} index
* @return {?}
*/
rate(index) {
if (!this.readonly) {
this.rating = index;
this.rated.emit(index);
}
}
}
StarRatingComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-star-rating',
template: "<div>\r\n <span *ngFor=\"let item of ratings\" (click)=\"rate(item)\" [ngClass]=\"{'hover': !readonly}\">\r\n <svg *ngIf=\"getIcon(item) === 'star'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path [attr.fill]=\"getRatingColor(item)\"\r\n d=\"M12 17.3l6.2 3.7-1.7-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7z\" />\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n </svg>\r\n <svg *ngIf=\"getIcon(item) === 'star_border'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\r\n <path [attr.fill]=\"getRatingColor(item)\"\r\n d=\"M22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7 6.2-3.7 6.2 3.7-1.6-7L22 9.2zm-10 6.2l-3.8 2.3 1-4.3L6 10.5l4.4-.4 1.7-4 1.7 4 4.4.4-3.3 2.9 1 4.3-3.8-2.3z\" />\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n </svg>\r\n <svg *ngIf=\"getIcon(item) === 'star_half'\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24\" height=\"24\">\r\n <defs>\r\n <path id=\"a\" d=\"M0 0h24v24H0V0z\" />\r\n </defs>\r\n <clipPath id=\"b\">\r\n <use xlink:href=\"#a\" overflow=\"visible\" />\r\n </clipPath>\r\n <path [attr.fill]=\"getRatingColor(item)\" clip-path=\"url(#b)\"\r\n d=\"M22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7 6.2-3.7 6.2 3.7-1.6-7L22 9.2zm-10 6.2V6.1l1.7 4 4.4.4-3.3 2.9 1 4.3-3.8-2.3z\" />\r\n </svg>\r\n </span>\r\n</div>\r\n",
styles: [".hover{cursor:pointer}"]
}] }
];
/** @nocollapse */
StarRatingComponent.ctorParameters = () => [];
StarRatingComponent.propDecorators = {
total: [{ type: Input }],
rating: [{ type: Input }],
readonly: [{ type: Input }],
size: [{ type: Input }],
type: [{ type: Input }],
filledColor: [{ type: Input }],
emptyColor: [{ type: Input }],
rated: [{ type: Output }]
};
if (false) {
/** @type {?} */
StarRatingComponent.prototype.total;
/** @type {?} */
StarRatingComponent.prototype.rating;
/** @type {?} */
StarRatingComponent.prototype.readonly;
/** @type {?} */
StarRatingComponent.prototype.size;
/** @type {?} */
StarRatingComponent.prototype.type;
/** @type {?} */
StarRatingComponent.prototype.filledColor;
/** @type {?} */
StarRatingComponent.prototype.emptyColor;
/** @type {?} */
StarRatingComponent.prototype.rated;
/** @type {?} */
StarRatingComponent.prototype.ratings;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rhci1yYXRpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNyZXlhai9uZy1zdGFyLXJhdGluZy8iLCJzb3VyY2VzIjpbImxpYi9zdGFyLXJhdGluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFPL0UsTUFBTSxPQUFPLG1CQUFtQjtJQVU5QjtRQVRTLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixTQUFJLEdBQUcsTUFBTSxDQUFDO1FBQ2QsU0FBSSxHQUF3QixRQUFRLENBQUM7UUFDckMsZ0JBQVcsR0FBRyxTQUFTLENBQUM7UUFDeEIsZUFBVSxHQUFHLFNBQVMsQ0FBQztRQUN0QixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUM3QyxZQUFPLEdBQWEsRUFBRSxDQUFDO0lBQ1IsQ0FBQzs7OztJQUVoQixRQUFRO1FBQ04sS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDcEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDdEI7SUFDSCxDQUFDOzs7OztJQUVELGNBQWMsQ0FBQyxLQUFhO1FBQzFCLE9BQU8sSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLEdBQUcsR0FBRztZQUN2RCxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVc7WUFDbEIsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7SUFDdEIsQ0FBQzs7Ozs7SUFFRCxPQUFPLENBQUMsS0FBYTtRQUNuQixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksS0FBSyxFQUFFO1lBQ3hCLE9BQU8sTUFBTSxDQUFDO1NBQ2Y7YUFBTTtZQUNMLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLEdBQUcsR0FBRyxFQUFFO2dCQUM5QixPQUFPLFdBQVcsQ0FBQzthQUNwQjtpQkFBTTtnQkFDTCxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQzthQUN4RDtTQUNGO0lBQ0gsQ0FBQzs7Ozs7SUFFRCxJQUFJLENBQUMsS0FBYTtRQUNoQixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztZQUNwQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUN4QjtJQUNILENBQUM7OztZQTlDRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IseWdEQUEyQzs7YUFFNUM7Ozs7O29CQUVFLEtBQUs7cUJBQ0wsS0FBSzt1QkFDTCxLQUFLO21CQUNMLEtBQUs7bUJBQ0wsS0FBSzswQkFDTCxLQUFLO3lCQUNMLEtBQUs7b0JBQ0wsTUFBTTs7OztJQVBQLG9DQUFtQjs7SUFDbkIscUNBQW9COztJQUNwQix1Q0FBMEI7O0lBQzFCLG1DQUF1Qjs7SUFDdkIsbUNBQThDOztJQUM5QywwQ0FBaUM7O0lBQ2pDLHlDQUFnQzs7SUFDaEMsb0NBQTZDOztJQUM3QyxzQ0FBdUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1zdGFyLXJhdGluZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGFyLXJhdGluZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3N0YXItcmF0aW5nLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgU3RhclJhdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHRvdGFsID0gNTtcbiAgQElucHV0KCkgcmF0aW5nID0gMDtcbiAgQElucHV0KCkgcmVhZG9ubHkgPSBmYWxzZTtcbiAgQElucHV0KCkgc2l6ZSA9ICcyNHB4JztcbiAgQElucHV0KCkgdHlwZTogJ2ZpbGxlZCcgfCAnaG9sbG93JyA9ICdob2xsb3cnO1xuICBASW5wdXQoKSBmaWxsZWRDb2xvciA9ICcjM2RiNzAwJztcbiAgQElucHV0KCkgZW1wdHlDb2xvciA9ICcjZTBlMGUwJztcbiAgQE91dHB1dCgpIHJhdGVkID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG4gIHJhdGluZ3M6IG51bWJlcltdID0gW107XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICBmb3IgKGxldCBpID0gMTsgaSA8PSB0aGlzLnRvdGFsOyBpKyspIHtcbiAgICAgIHRoaXMucmF0aW5ncy5wdXNoKGkpO1xuICAgIH1cbiAgfVxuXG4gIGdldFJhdGluZ0NvbG9yKGluZGV4OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLnJhdGluZyA+PSBpbmRleCB8fCB0aGlzLnJhdGluZyA+PSBpbmRleCAtIDAuNVxuICAgICAgPyB0aGlzLmZpbGxlZENvbG9yXG4gICAgICA6IHRoaXMuZW1wdHlDb2xvcjtcbiAgfVxuXG4gIGdldEljb24oaW5kZXg6IG51bWJlcik6IHN0cmluZyB7XG4gICAgaWYgKHRoaXMucmF0aW5nID49IGluZGV4KSB7XG4gICAgICByZXR1cm4gJ3N0YXInO1xuICAgIH0gZWxzZSB7XG4gICAgICBpZiAodGhpcy5yYXRpbmcgPj0gaW5kZXggLSAwLjUpIHtcbiAgICAgICAgcmV0dXJuICdzdGFyX2hhbGYnO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgcmV0dXJuIHRoaXMudHlwZSA9PT0gJ2hvbGxvdycgPyAnc3Rhcl9ib3JkZXInIDogJ3N0YXInO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHJhdGUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICghdGhpcy5yZWFkb25seSkge1xuICAgICAgdGhpcy5yYXRpbmcgPSBpbmRleDtcbiAgICAgIHRoaXMucmF0ZWQuZW1pdChpbmRleCk7XG4gICAgfVxuICB9XG59XG4iXX0=