ngx-stars
Version:
Simple stars rating component for Angular >= 2
2 lines • 9.99 kB
JavaScript
!function(t,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-stars",["exports","@angular/core","@angular/common"],a):a((t="undefined"!=typeof globalThis?globalThis:t||self)["ngx-stars"]={},t.ng.core,t.ng.common)}(this,(function(t,a,s){"use strict";var e=function(){function t(){var t=this;this.maxStars=5,this.initialStars=0,this.animationSpeed=100,this.wholeStars=!1,this.ratingOutput=new a.EventEmitter,this.customClassIdentifier=Math.random().toString(36).substring(2),this.safeSize=function(){return Number.isInteger(t.size)&&t.size>0&&t.size<6?t.size:1}}return t.prototype.ngOnInit=function(){this.setupStarImages(),this.editableStars=Array.from(new Array(this.maxStars)).map((function(t,a){return new i(a)})),this.setRating(this.initialStars),this.animation&&(this.animationInterval=setInterval(this.starAnimation.bind(this),this.animationSpeed))},t.prototype.ngOnDestroy=function(){this.customCssClasses&&this.customCssClasses.forEach((function(t){t&&t.parentNode&&t.parentNode.removeChild(t)}))},t.prototype.setupStarImages=function(){var t=this;this.customStarIcons&&(this.customCssClasses=[],Object.keys(this.customStarIcons).map((function(t){return t})).forEach((function(a){var s=t.getStarClass(a);t.createCssClass(s,a)})))},t.prototype.createCssClass=function(t,a){var s=document.createElement("style");s.type="text/css",s.innerHTML="."+t+" {\n -webkit-mask-image: url("+this.customStarIcons[a]+");\n mask-image: url("+this.customStarIcons[a]+");\n }",document.getElementsByTagName("head")[0].appendChild(s),this.customCssClasses.push(s)},t.prototype.starPadding=function(){return{"margin-right":this.customPadding||"calc("+this.starSize().width+" / 10)"}},t.prototype.starColorAndSize=function(){return Object.assign({},this.starColor(),this.starSize())},t.prototype.starColor=function(){return{"background-color":this.color||"crimson"}},t.prototype.starSize=function(){return{height:this.customSize||15*this.safeSize()+"px",width:this.customSize||16*this.safeSize()+"px"}},t.prototype.starAnimation=function(){this.animationRunning=!0,this.rating<this.maxStars?this.setRating(this.rating+=.5):this.setRating(0)},t.prototype.cancelStarAnimation=function(){this.animationRunning&&(clearInterval(this.animationInterval),this.rating=0,this.animationRunning=!1)},t.prototype.setRating=function(t){this.rating=Math.round(2*t)/2,this.onStarsUnhover()},t.prototype.onStarHover=function(t,a){var s=this;this.cancelStarAnimation();var e=this.clickedInFirstHalf(t);a.classname=!this.wholeStars&&e?this.getStarClass("half"):this.getStarClass("full"),this.editableStars.forEach((function(t){t.position>a.position?t.classname=s.getStarClass("empty"):t.position<a.position&&(t.classname=s.getStarClass("full"))}))},t.prototype.onStarClick=function(t,a){this.cancelStarAnimation();var s=this.clickedInFirstHalf(t);this.rating=a.position+(!this.wholeStars&&s?.5:1),this.ratingOutput.emit(this.rating)},t.prototype.onZeroStarClick=function(){this.setRating(0),this.ratingOutput.emit(this.rating)},t.prototype.onZeroStarHover=function(){var t=this;this.editableStars.forEach((function(a){return a.classname=t.getStarClass("empty")}))},t.prototype.onStarsUnhover=function(){var t=this;this.editableStars.forEach((function(a){var s=a.position+1;t.rating>=s?a.classname=t.getStarClass("full"):t.rating>s-1&&t.rating<s?a.classname=t.getStarClass("half"):a.classname=t.getStarClass("empty")}))},t.prototype.clickedInFirstHalf=function(t){var a=t.target;return t.pageX<a.getBoundingClientRect().left+a.offsetWidth/2},t.prototype.noop=function(){},t.prototype.getStarClass=function(t){return this.customCssClasses?"ngx-stars-star-"+t+"-"+this.customClassIdentifier:"star-"+t},t.prototype.getAriaLabel=function(){return"Rating: "+this.rating+" out of "+this.maxStars+" stars "+(this.readonly?"":". Can be edited.")},t}();e.decorators=[{type:a.Component,args:[{selector:"ngx-stars",template:'<div class="stars-line" (mouseleave)="readonly ? noop() : onStarsUnhover()" role="img" [attr.aria-label]="getAriaLabel()">\n <span class="star zero-star" [ngStyle]="starSize()" aria-hidden="true" (click)="onZeroStarClick()" (mousemove)="readonly ? noop() : onZeroStarHover()"></span>\n <div *ngFor="let star of editableStars;" [ngStyle]="starPadding()" aria-hidden="true" (click)="readonly ? noop() : onStarClick($event, star)" (mousemove)="readonly ? noop() : onStarHover($event, star)">\n <span class="star" [ngClass]="star.classname" [ngStyle]="starColorAndSize()" aria-hidden="true"></span>\n </div>\n</div>\n',styles:[".stars-line{display:flex;align-items:center;position:relative}.stars-line>div{z-index:999}.zero-star{color:transparent;position:absolute;left:-16px}.star{display:inline-block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.star-empty{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='star' class='svg-inline--fa fa-star fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z'%3E%3C/path%3E%3C/svg%3E%0A\");mask-image:url(\"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='far' data-icon='star' class='svg-inline--fa fa-star fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z'%3E%3C/path%3E%3C/svg%3E%0A\")}.star-half{-webkit-mask-image:url(\"data:image/svg+xml,%3C!-- had to hack this one's viewbox otherwise it didn't line up with the other two --%3E%3C!-- changed viewbox from '0 0 536 512' to '-20 0 576 512' --%3E%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star-half-alt' class='svg-inline--fa fa-star-half-alt fa-w-17' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-20 0 576 512'%3E%3Cpath fill='currentColor' d='M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C!-- had to hack this one's viewbox otherwise it didn't line up with the other two --%3E%3C!-- changed viewbox from '0 0 536 512' to '-20 0 576 512' --%3E%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star-half-alt' class='svg-inline--fa fa-star-half-alt fa-w-17' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='-20 0 576 512'%3E%3Cpath fill='currentColor' d='M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z'%3E%3C/path%3E%3C/svg%3E\")}.star-full{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star' class='svg-inline--fa fa-star fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star' class='svg-inline--fa fa-star fa-w-18' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='currentColor' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'%3E%3C/path%3E%3C/svg%3E\")}"]}]}],e.propDecorators={maxStars:[{type:a.Input}],initialStars:[{type:a.Input}],readonly:[{type:a.Input}],size:[{type:a.Input}],customSize:[{type:a.Input}],color:[{type:a.Input}],animation:[{type:a.Input}],animationSpeed:[{type:a.Input}],customPadding:[{type:a.Input}],wholeStars:[{type:a.Input}],customStarIcons:[{type:a.Input}],ratingOutput:[{type:a.Output}]};var i=function(t){this.position=t},n=function(){};n.decorators=[{type:a.NgModule,args:[{imports:[s.CommonModule],declarations:[e],exports:[e]}]}],t.EditableStar=i,t.NgxStarsComponent=e,t.NgxStarsModule=n,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-stars.umd.min.js.map