ng-star-rate
Version:
A simple star rating library
136 lines (130 loc) • 8.9 kB
JavaScript
import { Component, Output, Input, EventEmitter, ElementRef, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class RatingComponent {
/**
* @param {?} el
*/
constructor(el) {
this.el = el;
this.ratingSelection = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
const /** @type {?} */ style = `
.active {color :${this.selctedColor}; }
.list:hover .star {color: ${this.selctedColor}; }
`;
this.createStyle(style);
this.generateRating();
}
/**
* @param {?} style
* @return {?}
*/
createStyle(style) {
const /** @type {?} */ styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(style));
this.el.nativeElement.appendChild(styleElement);
}
/**
* @return {?}
*/
generateRating() {
this.stars = Array.from({ length: this.maxRating }, (v, k) => k + 1);
}
/**
* @param {?} item
* @return {?}
*/
rate(item) {
this.star = (item <= this.maxRating && item >= 0) ?
(this.star = this.star === item ? item - 1 : item) : this.star;
this.ratingSelection.emit(this.star);
}
}
RatingComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-star-rate',
// templateUrl: './rating.component.html',
template: `
<div class="rating">
<ul class="list">
<li
id="starId"
class="star"
*ngFor="let item of stars"
[ngClass]="{'active': item <= star}"
(click)="rate(item)">
<i class="fa" [ngClass]="item <= star ? 'fa-star' : 'fa-star-o'" aria-hidden="true"></i>
</li>
</ul>
<span *ngIf="showRatingCounter">{{ star }} of {{ maxRating }}</span>
</div>
`,
styles: [
`
.rating {
font-family: "Avenir", Helvetica, Arial, sans-serif;
font-size: 22px;
color: #a7a8a8;
}
.list {
margin: 0 0 5px 0;
padding: 0;
list-style-type: none;
}
.star {
display: inline-block;
cursor: pointer;
}
.star:hover ~ .star:not(.active) {
color: inherit;
}
`
]
},] },
];
/** @nocollapse */
RatingComponent.ctorParameters = () => [
{ type: ElementRef }
];
RatingComponent.propDecorators = {
selctedColor: [{ type: Input }],
star: [{ type: Input }],
maxRating: [{ type: Input }],
showRatingCounter: [{ type: Input }],
ratingSelection: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class StarRateModule {
}
StarRateModule.decorators = [
{ type: NgModule, args: [{
declarations: [RatingComponent],
imports: [
BrowserModule,
CommonModule
],
exports: [RatingComponent]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { StarRateModule, RatingComponent };
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctc3Rhci1yYXRlLmpzLm1hcCIsInNvdXJjZXMiOlsibmc6Ly9uZy1zdGFyLXJhdGUvbGliL3JhdGluZy9yYXRpbmcuY29tcG9uZW50LnRzIiwibmc6Ly9uZy1zdGFyLXJhdGUvbGliL3N0YXItcmF0ZS5tb2R1bGUudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE91dHB1dCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItc3Rhci1yYXRlJyxcbiAgLy8gdGVtcGxhdGVVcmw6ICcuL3JhdGluZy5jb21wb25lbnQuaHRtbCcsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJyYXRpbmdcIj5cbiAgICA8dWwgY2xhc3M9XCJsaXN0XCI+XG4gICAgICA8bGlcbiAgICAgICAgaWQ9XCJzdGFySWRcIlxuICAgICAgICBjbGFzcz1cInN0YXJcIlxuICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzdGFyc1wiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnYWN0aXZlJzogaXRlbSA8PSBzdGFyfVwiXG4gICAgICAgIChjbGljayk9XCJyYXRlKGl0ZW0pXCI+XG4gICAgICAgIDxpIGNsYXNzPVwiZmFcIiBbbmdDbGFzc109XCJpdGVtIDw9IHN0YXIgPyAnZmEtc3RhcicgOiAnZmEtc3Rhci1vJ1wiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvaT5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgICA8c3BhbiAqbmdJZj1cInNob3dSYXRpbmdDb3VudGVyXCI+e3sgc3RhciB9fSBvZiB7eyBtYXhSYXRpbmcgfX08L3NwYW4+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAucmF0aW5nIHtcbiAgICAgICAgZm9udC1mYW1pbHk6IFwiQXZlbmlyXCIsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgIGZvbnQtc2l6ZTogMjJweDtcbiAgICAgICAgY29sb3I6ICNhN2E4YTg7XG4gICAgICB9XG4gICAgICAubGlzdCB7XG4gICAgICAgIG1hcmdpbjogMCAwIDVweCAwO1xuICAgICAgICBwYWRkaW5nOiAwO1xuICAgICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgICB9XG4gICAgICAuc3RhciB7XG4gICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgfVxuICAgICAgLnN0YXI6aG92ZXIgfiAuc3Rhcjpub3QoLmFjdGl2ZSkge1xuICAgICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIH1cbiAgYFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFJhdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHNlbGN0ZWRDb2xvcjogc3RyaW5nO1xuICBASW5wdXQoKSBzdGFyOiBudW1iZXI7XG4gIEBJbnB1dCgpIG1heFJhdGluZzogbnVtYmVyO1xuICBASW5wdXQoKSBzaG93UmF0aW5nQ291bnRlcjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIHJhdGluZ1NlbGVjdGlvbjogRXZlbnRFbWl0dGVyPG51bWJlcj4gPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcbiAgc3RhcnM6IEFycmF5PG51bWJlcj47XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZikgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgY29uc3Qgc3R5bGUgPSBgXG4gICAgLmFjdGl2ZSB7Y29sb3IgOiR7dGhpcy5zZWxjdGVkQ29sb3J9OyB9XG4gICAgLmxpc3Q6aG92ZXIgLnN0YXIge2NvbG9yOiAke3RoaXMuc2VsY3RlZENvbG9yfTsgfVxuICAgYDtcbiAgICB0aGlzLmNyZWF0ZVN0eWxlKHN0eWxlKTtcbiAgICB0aGlzLmdlbmVyYXRlUmF0aW5nKCk7XG4gIH1cblxuICBjcmVhdGVTdHlsZShzdHlsZTogc3RyaW5nKTogdm9pZCB7XG4gICAgY29uc3Qgc3R5bGVFbGVtZW50ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKTtcbiAgICBzdHlsZUVsZW1lbnQuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoc3R5bGUpKTtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuYXBwZW5kQ2hpbGQoc3R5bGVFbGVtZW50KTtcbiAgfVxuXG4gIGdlbmVyYXRlUmF0aW5nKCkge1xuICAgIHRoaXMuc3RhcnMgPSBBcnJheS5mcm9tKHsgbGVuZ3RoOiB0aGlzLm1heFJhdGluZyB9LCAodiwgaykgPT4gayArIDEpO1xuICB9XG5cbiAgcmF0ZShpdGVtOiBudW1iZXIpIHtcbiAgICB0aGlzLnN0YXIgPSAoaXRlbSA8PSB0aGlzLm1heFJhdGluZyAmJiBpdGVtID49IDApID9cbiAgICAgICh0aGlzLnN0YXIgPSB0aGlzLnN0YXIgPT09IGl0ZW0gPyBpdGVtIC0gMSA6IGl0ZW0pIDogdGhpcy5zdGFyO1xuICAgIHRoaXMucmF0aW5nU2VsZWN0aW9uLmVtaXQodGhpcy5zdGFyKTtcbiAgfVxufVxuIiwiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJyb3dzZXJNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBSYXRpbmdDb21wb25lbnQgfSBmcm9tICcuL3JhdGluZy9yYXRpbmcuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbUmF0aW5nQ29tcG9uZW50XSxcbiAgaW1wb3J0czogW1xuICAgIEJyb3dzZXJNb2R1bGUsXG4gICAgQ29tbW9uTW9kdWxlXG4gIF0sXG4gIGV4cG9ydHM6IFtSYXRpbmdDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIFN0YXJSYXRlTW9kdWxlIHsgfVxuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7Ozs7SUFrREUsWUFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7K0JBSGdCLElBQUksWUFBWSxFQUFVO0tBR3JDOzs7O0lBRXZDLFFBQVE7UUFDTix1QkFBTSxLQUFLLEdBQUc7c0JBQ0ksSUFBSSxDQUFDLFlBQVk7Z0NBQ1AsSUFBSSxDQUFDLFlBQVk7SUFDN0MsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0tBQ3ZCOzs7OztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLHVCQUFNLFlBQVksR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3JELFlBQVksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1FBQ3pELElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQyxZQUFZLENBQUMsQ0FBQztLQUNqRDs7OztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQyxJQUFJLENBQUMsRUFBRSxNQUFNLEVBQUUsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7S0FDdEU7Ozs7O0lBRUQsSUFBSSxDQUFDLElBQVk7UUFDZixJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxJQUFJLENBQUM7YUFDN0MsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksR0FBRyxJQUFJLEdBQUcsQ0FBQyxHQUFHLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ2pFLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztLQUN0Qzs7O1lBekVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsZUFBZTs7Z0JBRXpCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7R0FjVDtnQkFDRCxNQUFNLEVBQUU7b0JBQ047Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCRDtpQkFDQTthQUNGOzs7O1lBekN3RCxVQUFVOzs7MkJBMkNoRSxLQUFLO21CQUNMLEtBQUs7d0JBQ0wsS0FBSztnQ0FDTCxLQUFLOzhCQUNMLE1BQU07Ozs7Ozs7QUMvQ1Q7OztZQUtDLFFBQVEsU0FBQztnQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7Z0JBQy9CLE9BQU8sRUFBRTtvQkFDUCxhQUFhO29CQUNiLFlBQVk7aUJBQ2I7Z0JBQ0QsT0FBTyxFQUFFLENBQUMsZUFBZSxDQUFDO2FBQzNCOzs7Ozs7Ozs7Ozs7Ozs7In0=