feat(rating): add config service to provide default values

refs #518

Closes #671

demo/src/app/components/rating/demos/config/config.component.html

@@ -0,0 +1,3 @@
+<p>This rating uses customized default values.</p>
+
+<ngb-rating [rate]="3"></ngb-rating>

demo/src/app/components/rating/demos/config/config.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {NgbRatingConfig} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-rating-config',
+  templateUrl: './config.component.html',
+  providers: [NgbRatingConfig] // add NgbRatingConfig to the component providers
+})
+export class RatingConfigComponent {
+  constructor(config: NgbRatingConfig) {
+    // customize default values of ratings used by this component tree
+    config.max = 5;
+    config.readonly = true;
+  }
+}

demo/src/app/components/rating/demos/index.ts

@@ -1,10 +1,15 @@
 import {RatingBasicComponent} from './basic/basic.component';
+import {RatingConfigComponent} from './config/config.component';
 
-export const DEMO_DIRECTIVES = [RatingBasicComponent];
+export const DEMO_DIRECTIVES = [RatingBasicComponent, RatingConfigComponent];
 
 export const DEMO_SNIPPETS = {
   basic: {
     code: require('!!prismjs?lang=typescript!./basic/basic.component'),
     markup: require('!!prismjs?lang=markup!./basic/basic.component.html')
+  },
+  config: {
+    code: require('!!prismjs?lang=typescript!./config/config.component'),
+    markup: require('!!prismjs?lang=markup!./config/config.component.html')
   }
 };

demo/src/app/components/rating/rating.component.html

@@ -1,6 +1,12 @@
 <ngbd-content-wrapper component="Rating">
   <ngbd-api-docs directive="NgbRating"></ngbd-api-docs>
+  <ngbd-api-docs-config type="NgbRatingConfig"></ngbd-api-docs-config>
   <ngbd-example-box demoTitle="Basic demo" [htmlSnippet]="snippets.basic.markup" [tsSnippet]="snippets.basic.code">
     <ngbd-rating-basic></ngbd-rating-basic>
   </ngbd-example-box>
+  <ngbd-example-box demoTitle="Global configuration of ratings"
+                    [htmlSnippet]="snippets.config.markup"
+                    [tsSnippet]="snippets.config.code">
+    <ngbd-rating-config></ngbd-rating-config>
+  </ngbd-example-box>
 </ngbd-content-wrapper>

demo/src/app/components/rating/rating.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import { DEMO_SNIPPETS } from './demos';
+import {DEMO_SNIPPETS} from './demos';
 
 @Component({
   selector: 'ngbd-rating',

src/index.ts

@@ -24,6 +24,7 @@ export {NgbAlertConfig, NgbDismissibleAlertConfig} from './alert/alert.module';
 export {NgbCarouselConfig} from './carousel/carousel.module';
 export {NgbPaginationConfig} from './pagination/pagination.module';
 export {NgbProgressbarConfig} from './progressbar/progressbar.module';
+export {NgbRatingConfig} from './rating/rating.module';
 
 @NgModule({
   exports: [

src/rating/rating-config.spec.ts

@@ -0,0 +1,10 @@
+import {NgbRatingConfig} from './rating-config';
+
+describe('ngb-rating-config', () => {
+  it('should have sensible default values', () => {
+    const config = new NgbRatingConfig();
+
+    expect(config.max).toBe(10);
+    expect(config.readonly).toBe(false);
+  });
+});

src/rating/rating-config.ts

@@ -0,0 +1,12 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the NgbRating component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the ratings used in the application.
+ */
+@Injectable()
+export class NgbRatingConfig {
+  max = 10;
+  readonly = false;
+}

src/rating/rating.module.ts

@@ -1,8 +1,16 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
+import {NgbRatingConfig} from './rating-config';
 
 import {NGB_RATING_DIRECTIVES} from './rating';
 
-@NgModule({declarations: NGB_RATING_DIRECTIVES, exports: NGB_RATING_DIRECTIVES, imports: [CommonModule]})
+export {NgbRatingConfig} from './rating-config';
+
+@NgModule({
+  declarations: NGB_RATING_DIRECTIVES,
+  exports: NGB_RATING_DIRECTIVES,
+  imports: [CommonModule],
+  providers: [NgbRatingConfig]
+})
 export class NgbRatingModule {
 }

src/rating/rating.spec.ts

@@ -1,10 +1,11 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {createGenericTestComponent} from '../util/tests';
 
 import {Component} from '@angular/core';
 
 import {NgbRatingModule} from './rating.module';
 import {NgbRating} from './rating';
+import {NgbRatingConfig} from './rating-config';
 
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
@@ -38,14 +39,21 @@ function getState(compiled) {
 describe('ngb-rating', () => {
   beforeEach(() => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [NgbRatingModule]}); });
 
-  it('should show 10 stars by default', () => {
+  it('should initialize inputs with default values', () => {
+    const defaultConfig = new NgbRatingConfig();
+    const rating = new NgbRating(new NgbRatingConfig());
+    expect(rating.max).toBe(defaultConfig.max);
+    expect(rating.readonly).toBe(defaultConfig.readonly);
+  });
+
+  it('should show as many stars as the configured max by default', () => {
     const fixture = TestBed.createComponent(NgbRating);
     fixture.detectChanges();
 
     const compiled = fixture.nativeElement;
 
     const stars = getStars(compiled);
-    expect(stars.length).toBe(10);
+    expect(stars.length).toBe(new NgbRatingConfig().max);
   });
 
   it('should change the num of stars with `max`', () => {
@@ -135,6 +143,47 @@ describe('ngb-rating', () => {
       expect(compiled.querySelector('span').getAttribute('aria-valuenow')).toBe('7');
     });
   });
+
+  describe('Custom config', () => {
+    let config: NgbRatingConfig;
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [NgbRatingModule]}); });
+
+    beforeEach(inject([NgbRatingConfig], (c: NgbRatingConfig) => {
+      config = c;
+      config.max = 5;
+      config.readonly = true;
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(NgbRating);
+      fixture.detectChanges();
+
+      let rating = fixture.componentInstance;
+      expect(rating.max).toBe(config.max);
+      expect(rating.readonly).toBe(config.readonly);
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new NgbRatingConfig();
+    config.max = 5;
+    config.readonly = true;
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [NgbRatingModule], providers: [{provide: NgbRatingConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = TestBed.createComponent(NgbRating);
+      fixture.detectChanges();
+
+      let rating = fixture.componentInstance;
+      expect(rating.max).toBe(config.max);
+      expect(rating.readonly).toBe(config.readonly);
+    });
+  });
 });
 
 @Component({selector: 'test-cmp', template: ''})

src/rating/rating.ts

@@ -1,4 +1,5 @@
 import {Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnInit} from '@angular/core';
+import {NgbRatingConfig} from './rating-config';
 
 /**
  * Rating directive that will take care of visualising a star rating bar.
@@ -24,7 +25,7 @@ export class NgbRating implements OnInit {
   /**
    * Maximal rating that can be given using this widget.
    */
-  @Input() max = 10;
+  @Input() max: number;
 
   /**
    * Current rating.
@@ -34,7 +35,7 @@ export class NgbRating implements OnInit {
   /**
    * A flag indicating if rating can be updated.
    */
-  @Input() readonly = false;
+  @Input() readonly: boolean;
 
   /**
    * An event fired when a user is hovering over a given rating.
@@ -54,6 +55,11 @@ export class NgbRating implements OnInit {
    */
   @Output() rateChange = new EventEmitter<number>();
 
+  constructor(config: NgbRatingConfig) {
+    this.max = config.max;
+    this.readonly = config.readonly;
+  }
+
   enter(value: number): void {
     if (!this.readonly) {
       this.rate = value;