@sreyaj/ng-star-rating/fesm2015/sreyaj-ng-star-rating.js

A Simple and Customizable SVG based Star Rating Component For Angular

import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
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 }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class StarRatingModule {
}
StarRatingModule.decorators = [
    { type: NgModule, args: [{
                declarations: [StarRatingComponent],
                imports: [CommonModule],
                exports: [StarRatingComponent]
            },] }
];

export { StarRatingComponent, StarRatingModule };
//# sourceMappingURL=sreyaj-ng-star-rating.js.map