ng-rating-bar
Version:
Star rating component for angular
212 lines (206 loc) • 8.39 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgRatingBarComponent {
constructor() {
this.ratingCount = 7;
this.colorActive = '#edb867';
this.colorDefault = '#d2d2d2';
this.disabled = false;
this.resetAble = false;
this.styles = {
fontSize: '28px',
backgroundColor: '',
margin: '5px',
padding: '0'
};
this.value = 5;
this.valueChange = new EventEmitter();
this.hoverChange = new EventEmitter();
this.symbol = '★';
this.numbers = [];
this.hoverIndex = -1;
this.selectedValue = 0;
this.halfValue = 0;
this.halfIndex = -1;
this.isHovered = false;
}
;
ngOnInit() {
this.ratingCount = this.ratingCount || 5;
this.colorActive = this.colorActive || '#edb867';
this.colorDefault = this.colorDefault || '#d2d2d2';
if (!this.styles) {
this.styles = {
fontSize: '28px',
backgroundColor: '',
margin: '5px',
padding: '0'
};
}
}
ngOnChanges(changes) {
if (changes['value'] || this.control) {
this.initNumbers();
this.calculateHalfValue();
}
}
initNumbers() {
this.numbers = Array(this.ratingCount)
.fill(0)
.map((x, i) => i);
if (this.control) {
this.selectedValue = this.control.value || 0;
}
else {
this.selectedValue = this.value;
}
this.hoverIndex = this.selectedValue - 1;
}
enter(i) {
if (this.disabled) {
return;
}
this.isHovered = true;
this.hoverIndex = i;
this.hoverChange.emit(1 + i);
}
leave(i) {
if (this.disabled) {
return;
}
this.isHovered = false;
this.hoverIndex = this.selectedValue - 1;
}
setSelected(i) {
if (this.disabled) {
return;
}
// set/unset selected value on same value click
if (this.resetAble && this.selectedValue === i + 1) {
this.selectedValue = 0;
}
else {
this.selectedValue = i + 1;
}
if (this.control) {
this.control.setValue(this.selectedValue || null);
this.control.markAsTouched();
}
else {
this.valueChange.emit(this.selectedValue);
}
this.isHovered = false;
this.calculateHalfValue();
}
calculateHalfValue() {
this.halfValue = Math.round(100 * (this.selectedValue - Math.floor(this.selectedValue)));
this.halfIndex = Math.ceil(this.selectedValue) - 1;
}
}
NgRatingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgRatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: NgRatingBarComponent, selector: "ng-rating-bar", inputs: { ratingCount: "ratingCount", colorActive: "colorActive", colorDefault: "colorDefault", disabled: "disabled", resetAble: "resetAble", control: "control", styles: "styles", value: "value", symbol: "symbol" }, outputs: { valueChange: "valueChange", hoverChange: "hoverChange" }, usesOnChanges: true, ngImport: i0, template: `
<ng-container *ngFor="let item of numbers; let i = index">
<span
class="star"
(mouseenter)="enter(i)"
(mouseleave)="leave(i)"
(click)="setSelected(i)"
[ngStyle]="{'color': (i <= hoverIndex) ? colorActive : colorDefault}"
[style.fontSize]="styles.fontSize"
[style.backgroundColor]="styles.backgroundColor"
[style.marginRight]="styles.margin"
[style.padding]="styles.padding"
>
<span [innerHTML]="symbol"></span>
<span
class="star half"
*ngIf="!isHovered && i == halfIndex"
[style.width.%]="halfValue"
[style.color]="colorActive"
[innerHTML]="symbol"
[style.padding]="styles.padding"
>
</span>
</span>
</ng-container>
`, isInline: true, styles: [".star{position:relative}.star:not(.half){min-height:20px;min-width:20px;cursor:pointer;display:inline-block}.star.active{color:inherit}.star.half{height:inherit;font-size:inherit;cursor:pointer;position:absolute;left:0;top:0;display:inline-block;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-rating-bar', template: `
<ng-container *ngFor="let item of numbers; let i = index">
<span
class="star"
(mouseenter)="enter(i)"
(mouseleave)="leave(i)"
(click)="setSelected(i)"
[ngStyle]="{'color': (i <= hoverIndex) ? colorActive : colorDefault}"
[style.fontSize]="styles.fontSize"
[style.backgroundColor]="styles.backgroundColor"
[style.marginRight]="styles.margin"
[style.padding]="styles.padding"
>
<span [innerHTML]="symbol"></span>
<span
class="star half"
*ngIf="!isHovered && i == halfIndex"
[style.width.%]="halfValue"
[style.color]="colorActive"
[innerHTML]="symbol"
[style.padding]="styles.padding"
>
</span>
</span>
</ng-container>
`, styles: [".star{position:relative}.star:not(.half){min-height:20px;min-width:20px;cursor:pointer;display:inline-block}.star.active{color:inherit}.star.half{height:inherit;font-size:inherit;cursor:pointer;position:absolute;left:0;top:0;display:inline-block;overflow:hidden}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { ratingCount: [{
type: Input
}], colorActive: [{
type: Input
}], colorDefault: [{
type: Input
}], disabled: [{
type: Input
}], resetAble: [{
type: Input
}], control: [{
type: Input
}], styles: [{
type: Input
}], value: [{
type: Input
}], valueChange: [{
type: Output
}], hoverChange: [{
type: Output
}], symbol: [{
type: Input
}] } });
class NgRatingBarModule {
}
NgRatingBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgRatingBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarModule, declarations: [NgRatingBarComponent], imports: [CommonModule], exports: [NgRatingBarComponent] });
NgRatingBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarModule, imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: NgRatingBarModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgRatingBarComponent
],
imports: [
CommonModule
],
exports: [
NgRatingBarComponent
]
}]
}] });
/*
* Public API Surface of ng-rating-bar
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgRatingBarComponent, NgRatingBarModule };
//# sourceMappingURL=ng-rating-bar.mjs.map