@sreyaj/ng-star-rating
Version:
A Simple and Customizable SVG based Star Rating Component For Angular
2 lines • 3.14 kB
JavaScript
!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@sreyaj/ng-star-rating",["exports","@angular/core","@angular/common"],r):r(((t=t||self).sreyaj=t.sreyaj||{},t.sreyaj["ng-star-rating"]={}),t.ng.core,t.ng.common)}(this,function(t,r,n){"use strict";var e=function(){function t(){this.total=5,this.rating=0,this.readonly=!1,this.size="24px",this.type="hollow",this.filledColor="#3db700",this.emptyColor="#e0e0e0",this.rated=new r.EventEmitter,this.ratings=[]}return t.prototype.ngOnInit=function(){for(var t=1;t<=this.total;t++)this.ratings.push(t)},t.prototype.getRatingColor=function(t){return this.rating>=t||this.rating>=t-.5?this.filledColor:this.emptyColor},t.prototype.getIcon=function(t){return this.rating>=t?"star":this.rating>=t-.5?"star_half":"hollow"===this.type?"star_border":"star"},t.prototype.rate=function(t){this.readonly||(this.rating=t,this.rated.emit(t))},t.decorators=[{type:r.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}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={total:[{type:r.Input}],rating:[{type:r.Input}],readonly:[{type:r.Input}],size:[{type:r.Input}],type:[{type:r.Input}],filledColor:[{type:r.Input}],emptyColor:[{type:r.Input}],rated:[{type:r.Output}]},t}(),o=function(){function t(){}return t.decorators=[{type:r.NgModule,args:[{declarations:[e],imports:[n.CommonModule],exports:[e]}]}],t}();t.StarRatingComponent=e,t.StarRatingModule=o,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=sreyaj-ng-star-rating.umd.min.js.map