ngx-star-rating-input
Version:
An Angular library for displaying star ratings.
120 lines (114 loc) • 7.32 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Output, Input, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class StarRatingComponent {
constructor() {
this.count = 5;
this.filledColor = 'gold';
this.emptyColor = 'lightgray';
this.fillOnHover = true;
this.size = 14;
this.disabled = false;
this.ratingChange = new EventEmitter();
this.stars = [];
this.selectedRating = 0;
this.hoveredRating = null;
this.onChange = (value) => { };
this.onTouched = () => { };
this.updateStars();
}
ngOnChanges(changes) {
if (changes['count']) {
this.updateStars();
}
}
updateStars() {
this.stars = Array.from({ length: this.count }, (_, i) => i + 1);
}
isStarFilled(index) {
return !this.disabled && index <= (this.hoveredRating ?? this.selectedRating);
}
onMouseEnter(rating) {
if (!this.disabled && this.fillOnHover) {
this.hoveredRating = rating;
}
}
onMouseLeave() {
if (!this.disabled && this.fillOnHover) {
this.hoveredRating = null;
}
}
onStarClick(rating) {
if (!this.disabled) {
this.selectedRating = rating;
this.ratingChange.emit(this.selectedRating);
this.onChange(this.selectedRating);
this.onTouched();
}
}
// ControlValueAccessor methods
writeValue(value) {
this.selectedRating = value || 0;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: StarRatingComponent, selector: "ngx-star-rating", inputs: { count: "count", filledColor: "filledColor", emptyColor: "emptyColor", fillOnHover: "fillOnHover", size: "size", disabled: "disabled" }, outputs: { ratingChange: "ratingChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StarRatingComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div class=\"rating-box {{disabled ? 'disabled' : ''}}\">\r\n @for (star of stars;let i = $index; track i) {\r\n <svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" [attr.width]=\"size\"\r\n (click)=\"onStarClick(star)\" [attr.height]=\"size\" (mouseenter)=\"onMouseEnter(star)\" (mouseleave)=\"onMouseLeave()\"\r\n viewBox=\"0 0 64 64\" enable-background=\"new 0 0 64 64\" xml:space=\"preserve\">\r\n <path [attr.fill]=\"isStarFilled(star) ? filledColor : emptyColor\" d=\"M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r\n\t C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r\n\t c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r\n\t c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r\n\t c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r\n\t C63.951,25.771,64.131,24.987,63.893,24.277z\" />\r\n </svg>\r\n }\r\n</div>", styles: [".rating-box{display:inline-flex;gap:4px}.rating-box svg{cursor:pointer}.rating-box.disabled{pointer-events:none;opacity:.5}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StarRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-star-rating', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => StarRatingComponent),
multi: true
}
], template: "<div class=\"rating-box {{disabled ? 'disabled' : ''}}\">\r\n @for (star of stars;let i = $index; track i) {\r\n <svg version=\"1.0\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" [attr.width]=\"size\"\r\n (click)=\"onStarClick(star)\" [attr.height]=\"size\" (mouseenter)=\"onMouseEnter(star)\" (mouseleave)=\"onMouseLeave()\"\r\n viewBox=\"0 0 64 64\" enable-background=\"new 0 0 64 64\" xml:space=\"preserve\">\r\n <path [attr.fill]=\"isStarFilled(star) ? filledColor : emptyColor\" d=\"M63.893,24.277c-0.238-0.711-0.854-1.229-1.595-1.343l-19.674-3.006L33.809,1.15\r\n\t C33.479,0.448,32.773,0,31.998,0s-1.48,0.448-1.811,1.15l-8.815,18.778L1.698,22.935c-0.741,0.113-1.356,0.632-1.595,1.343\r\n\t c-0.238,0.71-0.059,1.494,0.465,2.031l14.294,14.657L11.484,61.67c-0.124,0.756,0.195,1.517,0.822,1.957\r\n\t c0.344,0.243,0.747,0.366,1.151,0.366c0.332,0,0.666-0.084,0.968-0.25l17.572-9.719l17.572,9.719c0.302,0.166,0.636,0.25,0.968,0.25\r\n\t c0.404,0,0.808-0.123,1.151-0.366c0.627-0.44,0.946-1.201,0.822-1.957l-3.378-20.704l14.294-14.657\r\n\t C63.951,25.771,64.131,24.987,63.893,24.277z\" />\r\n </svg>\r\n }\r\n</div>", styles: [".rating-box{display:inline-flex;gap:4px}.rating-box svg{cursor:pointer}.rating-box.disabled{pointer-events:none;opacity:.5}\n"] }]
}], ctorParameters: () => [], propDecorators: { count: [{
type: Input
}], filledColor: [{
type: Input
}], emptyColor: [{
type: Input
}], fillOnHover: [{
type: Input
}], size: [{
type: Input
}], disabled: [{
type: Input
}], ratingChange: [{
type: Output
}] } });
class NgxStarRating {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxStarRating, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NgxStarRating, declarations: [StarRatingComponent], exports: [StarRatingComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxStarRating }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxStarRating, decorators: [{
type: NgModule,
args: [{
declarations: [StarRatingComponent],
exports: [StarRatingComponent]
}]
}] });
/*
* Public API Surface of star-rating
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxStarRating, StarRatingComponent };
//# sourceMappingURL=ngx-star-rating-input.mjs.map