ng-star-rate
Version:
A simple star rating library
98 lines (97 loc) • 8.71 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Component, Output, Input, EventEmitter, ElementRef } from '@angular/core';
var RatingComponent = /** @class */ (function () {
function RatingComponent(el) {
this.el = el;
this.ratingSelection = new EventEmitter();
}
/**
* @return {?}
*/
RatingComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var /** @type {?} */ style = "\n .active {color :" + this.selctedColor + "; }\n .list:hover .star {color: " + this.selctedColor + "; }\n ";
this.createStyle(style);
this.generateRating();
};
/**
* @param {?} style
* @return {?}
*/
RatingComponent.prototype.createStyle = /**
* @param {?} style
* @return {?}
*/
function (style) {
var /** @type {?} */ styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(style));
this.el.nativeElement.appendChild(styleElement);
};
/**
* @return {?}
*/
RatingComponent.prototype.generateRating = /**
* @return {?}
*/
function () {
this.stars = Array.from({ length: this.maxRating }, function (v, k) { return k + 1; });
};
/**
* @param {?} item
* @return {?}
*/
RatingComponent.prototype.rate = /**
* @param {?} item
* @return {?}
*/
function (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: "\n <div class=\"rating\">\n <ul class=\"list\">\n <li\n id=\"starId\"\n class=\"star\"\n *ngFor=\"let item of stars\"\n [ngClass]=\"{'active': item <= star}\"\n (click)=\"rate(item)\">\n <i class=\"fa\" [ngClass]=\"item <= star ? 'fa-star' : 'fa-star-o'\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n <span *ngIf=\"showRatingCounter\">{{ star }} of {{ maxRating }}</span>\n </div>\n ",
styles: [
"\n .rating {\n font-family: \"Avenir\", Helvetica, Arial, sans-serif;\n font-size: 22px;\n color: #a7a8a8;\n }\n .list {\n margin: 0 0 5px 0;\n padding: 0;\n list-style-type: none;\n }\n .star {\n display: inline-block;\n cursor: pointer;\n }\n .star:hover ~ .star:not(.active) {\n color: inherit;\n }\n "
]
},] },
];
/** @nocollapse */
RatingComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
RatingComponent.propDecorators = {
selctedColor: [{ type: Input }],
star: [{ type: Input }],
maxRating: [{ type: Input }],
showRatingCounter: [{ type: Input }],
ratingSelection: [{ type: Output }]
};
return RatingComponent;
}());
export { RatingComponent };
function RatingComponent_tsickle_Closure_declarations() {
/** @type {?} */
RatingComponent.prototype.selctedColor;
/** @type {?} */
RatingComponent.prototype.star;
/** @type {?} */
RatingComponent.prototype.maxRating;
/** @type {?} */
RatingComponent.prototype.showRatingCounter;
/** @type {?} */
RatingComponent.prototype.ratingSelection;
/** @type {?} */
RatingComponent.prototype.stars;
/** @type {?} */
RatingComponent.prototype.el;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLXN0YXItcmF0ZS8iLCJzb3VyY2VzIjpbImxpYi9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0lBa0R6Rix5QkFBb0IsRUFBYztRQUFkLE9BQUUsR0FBRixFQUFFLENBQVk7K0JBSGdCLElBQUksWUFBWSxFQUFVO0tBR3JDOzs7O0lBRXZDLGtDQUFROzs7SUFBUjtRQUNFLHFCQUFNLEtBQUssR0FBRywyQkFDSSxJQUFJLENBQUMsWUFBWSwyQ0FDUCxJQUFJLENBQUMsWUFBWSxhQUM3QyxDQUFDO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7S0FDdkI7Ozs7O0lBRUQscUNBQVc7Ozs7SUFBWCxVQUFZLEtBQWE7UUFDdkIscUJBQU0sWUFBWSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckQsWUFBWSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFDO0tBQ2pEOzs7O0lBRUQsd0NBQWM7OztJQUFkO1FBQ0UsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsSUFBSSxDQUFDLEVBQUUsTUFBTSxFQUFFLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxVQUFDLENBQUMsRUFBRSxDQUFDLElBQUssT0FBQSxDQUFDLEdBQUcsQ0FBQyxFQUFMLENBQUssQ0FBQyxDQUFDO0tBQ3RFOzs7OztJQUVELDhCQUFJOzs7O0lBQUosVUFBSyxJQUFZO1FBQ2YsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQ2pELENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDakUsSUFBSSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0tBQ3RDOztnQkF6RUYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlOztvQkFFekIsUUFBUSxFQUFFLGdjQWNUO29CQUNELE1BQU0sRUFBRTt3QkFDTiwwWkFrQkQ7cUJBQ0E7aUJBQ0Y7Ozs7Z0JBekN3RCxVQUFVOzs7K0JBMkNoRSxLQUFLO3VCQUNMLEtBQUs7NEJBQ0wsS0FBSztvQ0FDTCxLQUFLO2tDQUNMLE1BQU07OzBCQS9DVDs7U0EwQ2EsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBPdXRwdXQsIElucHV0LCBFdmVudEVtaXR0ZXIsIEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLXN0YXItcmF0ZScsXG4gIC8vIHRlbXBsYXRlVXJsOiAnLi9yYXRpbmcuY29tcG9uZW50Lmh0bWwnLFxuICB0ZW1wbGF0ZTogYFxuICA8ZGl2IGNsYXNzPVwicmF0aW5nXCI+XG4gICAgPHVsIGNsYXNzPVwibGlzdFwiPlxuICAgICAgPGxpXG4gICAgICAgIGlkPVwic3RhcklkXCJcbiAgICAgICAgY2xhc3M9XCJzdGFyXCJcbiAgICAgICAgKm5nRm9yPVwibGV0IGl0ZW0gb2Ygc3RhcnNcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2FjdGl2ZSc6IGl0ZW0gPD0gc3Rhcn1cIlxuICAgICAgICAoY2xpY2spPVwicmF0ZShpdGVtKVwiPlxuICAgICAgICA8aSBjbGFzcz1cImZhXCIgW25nQ2xhc3NdPVwiaXRlbSA8PSBzdGFyID8gJ2ZhLXN0YXInIDogJ2ZhLXN0YXItbydcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L2k+XG4gICAgICA8L2xpPlxuICAgIDwvdWw+XG4gICAgPHNwYW4gKm5nSWY9XCJzaG93UmF0aW5nQ291bnRlclwiPnt7IHN0YXIgfX0gb2Yge3sgbWF4UmF0aW5nIH19PC9zcGFuPlxuICA8L2Rpdj5cbiAgYCxcbiAgc3R5bGVzOiBbXG4gICAgYFxuICAgICAgLnJhdGluZyB7XG4gICAgICAgIGZvbnQtZmFtaWx5OiBcIkF2ZW5pclwiLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICBmb250LXNpemU6IDIycHg7XG4gICAgICAgIGNvbG9yOiAjYTdhOGE4O1xuICAgICAgfVxuICAgICAgLmxpc3Qge1xuICAgICAgICBtYXJnaW46IDAgMCA1cHggMDtcbiAgICAgICAgcGFkZGluZzogMDtcbiAgICAgICAgbGlzdC1zdHlsZS10eXBlOiBub25lO1xuICAgICAgfVxuICAgICAgLnN0YXIge1xuICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgIH1cbiAgICAgIC5zdGFyOmhvdmVyIH4gLnN0YXI6bm90KC5hY3RpdmUpIHtcbiAgICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgICB9XG4gIGBcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBSYXRpbmdDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzZWxjdGVkQ29sb3I6IHN0cmluZztcbiAgQElucHV0KCkgc3RhcjogbnVtYmVyO1xuICBASW5wdXQoKSBtYXhSYXRpbmc6IG51bWJlcjtcbiAgQElucHV0KCkgc2hvd1JhdGluZ0NvdW50ZXI6IGJvb2xlYW47XG4gIEBPdXRwdXQoKSByYXRpbmdTZWxlY3Rpb246IEV2ZW50RW1pdHRlcjxudW1iZXI+ID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG4gIHN0YXJzOiBBcnJheTxudW1iZXI+O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYpIHsgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIGNvbnN0IHN0eWxlID0gYFxuICAgIC5hY3RpdmUge2NvbG9yIDoke3RoaXMuc2VsY3RlZENvbG9yfTsgfVxuICAgIC5saXN0OmhvdmVyIC5zdGFyIHtjb2xvcjogJHt0aGlzLnNlbGN0ZWRDb2xvcn07IH1cbiAgIGA7XG4gICAgdGhpcy5jcmVhdGVTdHlsZShzdHlsZSk7XG4gICAgdGhpcy5nZW5lcmF0ZVJhdGluZygpO1xuICB9XG5cbiAgY3JlYXRlU3R5bGUoc3R5bGU6IHN0cmluZyk6IHZvaWQge1xuICAgIGNvbnN0IHN0eWxlRWxlbWVudCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJyk7XG4gICAgc3R5bGVFbGVtZW50LmFwcGVuZENoaWxkKGRvY3VtZW50LmNyZWF0ZVRleHROb2RlKHN0eWxlKSk7XG4gICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LmFwcGVuZENoaWxkKHN0eWxlRWxlbWVudCk7XG4gIH1cblxuICBnZW5lcmF0ZVJhdGluZygpIHtcbiAgICB0aGlzLnN0YXJzID0gQXJyYXkuZnJvbSh7IGxlbmd0aDogdGhpcy5tYXhSYXRpbmcgfSwgKHYsIGspID0+IGsgKyAxKTtcbiAgfVxuXG4gIHJhdGUoaXRlbTogbnVtYmVyKSB7XG4gICAgdGhpcy5zdGFyID0gKGl0ZW0gPD0gdGhpcy5tYXhSYXRpbmcgJiYgaXRlbSA+PSAwKSA/XG4gICAgICAodGhpcy5zdGFyID0gdGhpcy5zdGFyID09PSBpdGVtID8gaXRlbSAtIDEgOiBpdGVtKSA6IHRoaXMuc3RhcjtcbiAgICB0aGlzLnJhdGluZ1NlbGVjdGlvbi5lbWl0KHRoaXMuc3Rhcik7XG4gIH1cbn1cbiJdfQ==