feat(rating): allow set rating to 0 on click

Fixes #1284

Closes #1515

src/rating/rating-config.spec.ts

@@ -6,5 +6,6 @@ describe('ngb-rating-config', () => {
 
     expect(config.max).toBe(10);
     expect(config.readonly).toBe(false);
+    expect(config.resettable).toBe(false);
   });
 });

src/rating/rating-config.ts

@@ -9,4 +9,5 @@ import {Injectable} from '@angular/core';
 export class NgbRatingConfig {
   max = 10;
   readonly = false;
+  resettable = false;
 }

src/rating/rating.spec.ts

@@ -172,6 +172,44 @@ describe('ngb-rating', () => {
     expect(fixture.componentInstance.rate).toBe(3);
   });
 
+  it('should not reset rating to 0 by default', fakeAsync(() => {
+       const fixture = createTestComponent('<ngb-rating [(rate)]="rate" max="5"></ngb-rating>');
+       const el = fixture.debugElement;
+
+       // 3/5 initially
+       expect(getState(el)).toEqual([true, true, true, false, false]);
+       expect(fixture.componentInstance.rate).toBe(3);
+
+       // click 3 -> 3/5
+       getStar(el.nativeElement, 3).click();
+       fixture.detectChanges();
+       expect(getState(el)).toEqual([true, true, true, false, false]);
+       expect(fixture.componentInstance.rate).toBe(3);
+     }));
+
+  it('should set `resettable` rating to 0', fakeAsync(() => {
+       const fixture = createTestComponent('<ngb-rating [(rate)]="rate" max="5" [resettable]="true"></ngb-rating>');
+       const el = fixture.debugElement;
+
+       // 3/5 initially
+       expect(getState(el)).toEqual([true, true, true, false, false]);
+       expect(fixture.componentInstance.rate).toBe(3);
+
+       // click 3 -> 0/5
+       getStar(el.nativeElement, 3).click();
+       tick();
+       fixture.detectChanges();
+       expect(getState(el)).toEqual([false, false, false, false, false]);
+       expect(fixture.componentInstance.rate).toBe(0);
+
+       // click 2 -> 2/5
+       getStar(el.nativeElement, 2).click();
+       tick();
+       fixture.detectChanges();
+       expect(getState(el)).toEqual([true, true, false, false, false]);
+       expect(fixture.componentInstance.rate).toBe(2);
+     }));
+
   it('handles correctly the mouse enter/leave', () => {
     const fixture = createTestComponent('<ngb-rating [(rate)]="rate" max="5"></ngb-rating>');
     const el = fixture.debugElement;

src/rating/rating.ts

@@ -63,7 +63,7 @@ const NGB_RATING_VALUE_ACCESSOR = {
     <ng-template #t let-fill="fill">{{ fill === 100 ? '&#9733;' : '&#9734;' }}</ng-template>
     <ng-template ngFor [ngForOf]="contexts" let-index="index">
       <span class="sr-only">({{ index < nextRate ? '*' : ' ' }})</span>
-      <span (mouseenter)="enter(index + 1)" (click)="update(index + 1)" [style.cursor]="readonly || disabled ? 'default' : 'pointer'">
+      <span (mouseenter)="enter(index + 1)" (click)="handleClick(index + 1)" [style.cursor]="readonly || disabled ? 'default' : 'pointer'">
         <ng-template [ngTemplateOutlet]="starTemplate || t" [ngOutletContext]="contexts[index]"></ng-template>
       </span>
     </ng-template>
@@ -92,6 +92,11 @@ export class NgbRating implements ControlValueAccessor,
    */
   @Input() readonly: boolean;
 
+  /**
+   * A flag indicating if rating can be reset to 0 on mouse click
+   */
+  @Input() resettable: boolean;
+
   /**
    * A template to override star display.
    * Alternatively put a <ng-template> as the only child of <ngb-rating> element
@@ -133,6 +138,8 @@ export class NgbRating implements ControlValueAccessor,
     this.hover.emit(value);
   }
 
+  handleClick(value: number) { this.update(this.resettable && this.rate === value ? 0 : value); }
+
   handleKeyDown(event: KeyboardEvent) {
     if (Key[toString(event.which)]) {
       event.preventDefault();