@sreyaj/ng-star-rating
Version:
A Simple and Customizable SVG based Star Rating Component For Angular
119 lines • 8.9 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, EventEmitter, Output } from '@angular/core';
var StarRatingComponent = /** @class */ (function () {
function StarRatingComponent() {
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 {?}
*/
StarRatingComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
for (var i = 1; i <= this.total; i++) {
this.ratings.push(i);
}
};
/**
* @param {?} index
* @return {?}
*/
StarRatingComponent.prototype.getRatingColor = /**
* @param {?} index
* @return {?}
*/
function (index) {
return this.rating >= index || this.rating >= index - 0.5
? this.filledColor
: this.emptyColor;
};
/**
* @param {?} index
* @return {?}
*/
StarRatingComponent.prototype.getIcon = /**
* @param {?} index
* @return {?}
*/
function (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 {?}
*/
StarRatingComponent.prototype.rate = /**
* @param {?} index
* @return {?}
*/
function (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 = function () { return []; };
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 }]
};
return StarRatingComponent;
}());
export { StarRatingComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Rhci1yYXRpbmcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQHNyZXlhai9uZy1zdGFyLXJhdGluZy8iLCJzb3VyY2VzIjpbImxpYi9zdGFyLXJhdGluZy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0U7SUFlRTtRQVRTLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixTQUFJLEdBQUcsTUFBTSxDQUFDO1FBQ2QsU0FBSSxHQUF3QixRQUFRLENBQUM7UUFDckMsZ0JBQVcsR0FBRyxTQUFTLENBQUM7UUFDeEIsZUFBVSxHQUFHLFNBQVMsQ0FBQztRQUN0QixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUM3QyxZQUFPLEdBQWEsRUFBRSxDQUFDO0lBQ1IsQ0FBQzs7OztJQUVoQixzQ0FBUTs7O0lBQVI7UUFDRSxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUNwQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUN0QjtJQUNILENBQUM7Ozs7O0lBRUQsNENBQWM7Ozs7SUFBZCxVQUFlLEtBQWE7UUFDMUIsT0FBTyxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssR0FBRyxHQUFHO1lBQ3ZELENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVztZQUNsQixDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztJQUN0QixDQUFDOzs7OztJQUVELHFDQUFPOzs7O0lBQVAsVUFBUSxLQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxLQUFLLEVBQUU7WUFDeEIsT0FBTyxNQUFNLENBQUM7U0FDZjthQUFNO1lBQ0wsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLEtBQUssR0FBRyxHQUFHLEVBQUU7Z0JBQzlCLE9BQU8sV0FBVyxDQUFDO2FBQ3BCO2lCQUFNO2dCQUNMLE9BQU8sSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDO2FBQ3hEO1NBQ0Y7SUFDSCxDQUFDOzs7OztJQUVELGtDQUFJOzs7O0lBQUosVUFBSyxLQUFhO1FBQ2hCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO1lBQ3BCLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3hCO0lBQ0gsQ0FBQzs7Z0JBOUNGLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsaUJBQWlCO29CQUMzQix5Z0RBQTJDOztpQkFFNUM7Ozs7O3dCQUVFLEtBQUs7eUJBQ0wsS0FBSzsyQkFDTCxLQUFLO3VCQUNMLEtBQUs7dUJBQ0wsS0FBSzs4QkFDTCxLQUFLOzZCQUNMLEtBQUs7d0JBQ0wsTUFBTTs7SUFrQ1QsMEJBQUM7Q0FBQSxBQS9DRCxJQStDQztTQTFDWSxtQkFBbUI7OztJQUM5QixvQ0FBbUI7O0lBQ25CLHFDQUFvQjs7SUFDcEIsdUNBQTBCOztJQUMxQixtQ0FBdUI7O0lBQ3ZCLG1DQUE4Qzs7SUFDOUMsMENBQWlDOztJQUNqQyx5Q0FBZ0M7O0lBQ2hDLG9DQUE2Qzs7SUFDN0Msc0NBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBFdmVudEVtaXR0ZXIsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtc3Rhci1yYXRpbmcnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3Rhci1yYXRpbmcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zdGFyLXJhdGluZy5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFN0YXJSYXRpbmdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSB0b3RhbCA9IDU7XG4gIEBJbnB1dCgpIHJhdGluZyA9IDA7XG4gIEBJbnB1dCgpIHJlYWRvbmx5ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNpemUgPSAnMjRweCc7XG4gIEBJbnB1dCgpIHR5cGU6ICdmaWxsZWQnIHwgJ2hvbGxvdycgPSAnaG9sbG93JztcbiAgQElucHV0KCkgZmlsbGVkQ29sb3IgPSAnIzNkYjcwMCc7XG4gIEBJbnB1dCgpIGVtcHR5Q29sb3IgPSAnI2UwZTBlMCc7XG4gIEBPdXRwdXQoKSByYXRlZCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuICByYXRpbmdzOiBudW1iZXJbXSA9IFtdO1xuICBjb25zdHJ1Y3RvcigpIHt9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgZm9yIChsZXQgaSA9IDE7IGkgPD0gdGhpcy50b3RhbDsgaSsrKSB7XG4gICAgICB0aGlzLnJhdGluZ3MucHVzaChpKTtcbiAgICB9XG4gIH1cblxuICBnZXRSYXRpbmdDb2xvcihpbmRleDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5yYXRpbmcgPj0gaW5kZXggfHwgdGhpcy5yYXRpbmcgPj0gaW5kZXggLSAwLjVcbiAgICAgID8gdGhpcy5maWxsZWRDb2xvclxuICAgICAgOiB0aGlzLmVtcHR5Q29sb3I7XG4gIH1cblxuICBnZXRJY29uKGluZGV4OiBudW1iZXIpOiBzdHJpbmcge1xuICAgIGlmICh0aGlzLnJhdGluZyA+PSBpbmRleCkge1xuICAgICAgcmV0dXJuICdzdGFyJztcbiAgICB9IGVsc2Uge1xuICAgICAgaWYgKHRoaXMucmF0aW5nID49IGluZGV4IC0gMC41KSB7XG4gICAgICAgIHJldHVybiAnc3Rhcl9oYWxmJztcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIHJldHVybiB0aGlzLnR5cGUgPT09ICdob2xsb3cnID8gJ3N0YXJfYm9yZGVyJyA6ICdzdGFyJztcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICByYXRlKGluZGV4OiBudW1iZXIpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMucmVhZG9ubHkpIHtcbiAgICAgIHRoaXMucmF0aW5nID0gaW5kZXg7XG4gICAgICB0aGlzLnJhdGVkLmVtaXQoaW5kZXgpO1xuICAgIH1cbiAgfVxufVxuIl19