1 | import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
|
2 | import { CommonModule } from '@angular/common';
|
3 | import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
4 |
|
5 | const RATING_VALUE_ACCESSOR = {
|
6 | provide: NG_VALUE_ACCESSOR,
|
7 | useExisting: forwardRef(() => Rating),
|
8 | multi: true
|
9 | };
|
10 | class Rating {
|
11 | constructor(cd) {
|
12 | this.cd = cd;
|
13 | this.stars = 5;
|
14 | this.cancel = true;
|
15 | this.iconOnClass = 'pi pi-star';
|
16 | this.iconOffClass = 'pi pi-star-o';
|
17 | this.iconCancelClass = 'pi pi-ban';
|
18 | this.onRate = new EventEmitter();
|
19 | this.onCancel = new EventEmitter();
|
20 | this.onModelChange = () => { };
|
21 | this.onModelTouched = () => { };
|
22 | }
|
23 | ngOnInit() {
|
24 | this.starsArray = [];
|
25 | for (let i = 0; i < this.stars; i++) {
|
26 | this.starsArray[i] = i;
|
27 | }
|
28 | }
|
29 | rate(event, i) {
|
30 | if (!this.readonly && !this.disabled) {
|
31 | this.value = (i + 1);
|
32 | this.onModelChange(this.value);
|
33 | this.onModelTouched();
|
34 | this.onRate.emit({
|
35 | originalEvent: event,
|
36 | value: (i + 1)
|
37 | });
|
38 | }
|
39 | event.preventDefault();
|
40 | }
|
41 | clear(event) {
|
42 | if (!this.readonly && !this.disabled) {
|
43 | this.value = null;
|
44 | this.onModelChange(this.value);
|
45 | this.onModelTouched();
|
46 | this.onCancel.emit(event);
|
47 | }
|
48 | event.preventDefault();
|
49 | }
|
50 | writeValue(value) {
|
51 | this.value = value;
|
52 | this.cd.detectChanges();
|
53 | }
|
54 | registerOnChange(fn) {
|
55 | this.onModelChange = fn;
|
56 | }
|
57 | registerOnTouched(fn) {
|
58 | this.onModelTouched = fn;
|
59 | }
|
60 | setDisabledState(val) {
|
61 | this.disabled = val;
|
62 | this.cd.markForCheck();
|
63 | }
|
64 | }
|
65 | Rating.decorators = [
|
66 | { type: Component, args: [{
|
67 | selector: 'p-rating',
|
68 | template: `
|
69 | <div class="p-rating" [ngClass]="{'p-readonly': readonly, 'p-disabled': disabled}">
|
70 | <span [attr.tabindex]="(disabled || readonly) ? null : '0'" *ngIf="cancel" (click)="clear($event)" (keydown.enter)="clear($event)" class="p-rating-icon p-rating-cancel" [ngClass]="iconCancelClass" [ngStyle]="iconCancelStyle"></span>
|
71 | <span *ngFor="let star of starsArray;let i=index" class="p-rating-icon" [attr.tabindex]="(disabled || readonly) ? null : '0'" (click)="rate($event,i)" (keydown.enter)="rate($event,i)"
|
72 | [ngClass]="(!value || i >= value) ? iconOffClass : iconOnClass"
|
73 | [ngStyle]="(!value || i >= value) ? iconOffStyle : iconOnStyle"></span>
|
74 | </div>
|
75 | `,
|
76 | providers: [RATING_VALUE_ACCESSOR],
|
77 | changeDetection: ChangeDetectionStrategy.OnPush,
|
78 | encapsulation: ViewEncapsulation.None,
|
79 | styles: [".p-rating-icon{cursor:pointer}.p-rating.p-rating-readonly .p-rating-icon{cursor:default}"]
|
80 | },] }
|
81 | ];
|
82 | Rating.ctorParameters = () => [
|
83 | { type: ChangeDetectorRef }
|
84 | ];
|
85 | Rating.propDecorators = {
|
86 | disabled: [{ type: Input }],
|
87 | readonly: [{ type: Input }],
|
88 | stars: [{ type: Input }],
|
89 | cancel: [{ type: Input }],
|
90 | iconOnClass: [{ type: Input }],
|
91 | iconOnStyle: [{ type: Input }],
|
92 | iconOffClass: [{ type: Input }],
|
93 | iconOffStyle: [{ type: Input }],
|
94 | iconCancelClass: [{ type: Input }],
|
95 | iconCancelStyle: [{ type: Input }],
|
96 | onRate: [{ type: Output }],
|
97 | onCancel: [{ type: Output }]
|
98 | };
|
99 | class RatingModule {
|
100 | }
|
101 | RatingModule.decorators = [
|
102 | { type: NgModule, args: [{
|
103 | imports: [CommonModule],
|
104 | exports: [Rating],
|
105 | declarations: [Rating]
|
106 | },] }
|
107 | ];
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | export { RATING_VALUE_ACCESSOR, Rating, RatingModule };
|
114 |
|