feat(rating): set cursor on stars of rating component (#411)

The cursor used on the stars of the rating component is a text selection cursor, which doesn't make it clear that they're clickable. The cursor stays the same if the rating component is readonly.
This commit sets a 'pointer' cursor on the stars, and a 'not-allowed' cursor when it's read-only.

src/rating/rating.spec.ts

@@ -83,6 +83,27 @@ describe('ngb-rating', () => {
        });
      })));
 
+  it('should set pointer cursor on stars when not readonly', async(inject([TestComponentBuilder], (tcb) => {
+       tcb.createAsync(NgbRating).then((fixture) => {
+         fixture.detectChanges();
+
+         const compiled = fixture.nativeElement;
+
+         expect(window.getComputedStyle(getStar(compiled, 1)).getPropertyValue('cursor')).toBe('pointer');
+       });
+     })));
+
+  it('should set not allowed cursor on stars when readonly', async(inject([TestComponentBuilder], (tcb) => {
+       const html = '<ngb-rating [readonly]="true"></ngb-rating>';
+       return tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
+         fixture.detectChanges();
+
+         const compiled = fixture.nativeElement;
+
+         expect(window.getComputedStyle(getStar(compiled, 1)).getPropertyValue('cursor')).toBe('not-allowed');
+       });
+     })));
+
   describe('aria support', () => {
     it('contains aria-valuemax with the number of stars', async(inject([TestComponentBuilder], (tcb) => {
          const html = '<ngb-rating [max]="max"></ngb-rating>';

src/rating/rating.ts

@@ -11,7 +11,8 @@ import {Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnInit}
       <template ngFor let-r [ngForOf]="range" let-index="index">
         <span class="sr-only">({{ index < rate ? '*' : ' ' }})</span>
         <span (mouseenter)="enter(index + 1)" (click)="update(index + 1)" [title]="r.title" 
-        [attr.aria-valuetext]="r.title">{{ index < rate ? '&#9733;' : '&#9734;' }}</span>
+        [attr.aria-valuetext]="r.title" 
+        [style.cursor]="readonly ? 'not-allowed' : 'pointer'">{{ index < rate ? '&#9733;' : '&#9734;' }}</span>
       </template>
     </span>
   `