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

refs #518

Closes #655

Author: jnizet

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

@@ -10,6 +10,7 @@ import {DEMO_SNIPPETS} from './demos';
       <ngbd-api-docs directive="NgbPanelTitle"></ngbd-api-docs>
       <ngbd-api-docs directive="NgbPanelContent"></ngbd-api-docs>
       <ngbd-api-docs-class type="NgbPanelChangeEvent"></ngbd-api-docs-class>
+      <ngbd-api-docs-config type="NgbAccordionConfig"></ngbd-api-docs-config>
       <ngbd-example-box demoTitle="Accordion" [htmlSnippet]="snippets.basic.markup" [tsSnippet]="snippets.basic.code">
         <ngbd-accordion-basic></ngbd-accordion-basic>
       </ngbd-example-box>
@@ -23,6 +24,11 @@ import {DEMO_SNIPPETS} from './demos';
         [tsSnippet]="snippets.preventChange.code">
         <ngbd-accordion-preventchange></ngbd-accordion-preventchange>
       </ngbd-example-box>
+      <ngbd-example-box demoTitle="Global configuration of accordions" 
+                        [htmlSnippet]="snippets.config.markup" 
+                        [tsSnippet]="snippets.config.code">
+        <ngbd-accordion-config></ngbd-accordion-config>
+      </ngbd-example-box>
     </ngbd-content-wrapper>
   `
 })

demo/src/app/components/accordion/demos/config/accordion-config.html

@@ -0,0 +1,24 @@
+<p>This accordion uses customized default values.</p>
+
+<ngb-accordion #acc="ngbAccordion" activeIds="config-panel-one">
+  <ngb-panel title="One" id="config-panel-one">
+    <template ngbPanelContent>
+      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
+      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
+      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
+      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
+      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+      labore sustainable VHS.
+    </template>
+  </ngb-panel>
+  <ngb-panel title="Two">
+    <template ngbPanelContent>
+      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
+      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
+      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
+      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
+      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+      labore sustainable VHS.
+    </template>
+  </ngb-panel>
+</ngb-accordion>

demo/src/app/components/accordion/demos/config/accordion-config.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {NgbAccordionConfig} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-accordion-config',
+  templateUrl: './accordion-config.html',
+  providers: [NgbAccordionConfig] // add the NgbAccordionConfig to the component providers
+})
+export class NgbdAccordionConfig {
+  constructor(config: NgbAccordionConfig) {
+    // customize default values of accordions used by this component tree
+    config.closeOthers = true;
+    config.type = 'info';
+  }
+}

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

@@ -2,9 +2,10 @@ import {NgbdAccordionBasic} from './basic/accordion-basic';
 import {NgbdAccordionPreventchange} from './preventchange/accordion-preventchange';
 import {NgbdAccordionStatic} from './static/accordion-static';
 import {NgbdAccordionToggle} from './toggle/accordion-toggle';
+import {NgbdAccordionConfig} from './config/accordion-config';
 
 export const DEMO_DIRECTIVES =
-    [NgbdAccordionBasic, NgbdAccordionPreventchange, NgbdAccordionStatic, NgbdAccordionToggle];
+    [NgbdAccordionBasic, NgbdAccordionPreventchange, NgbdAccordionStatic, NgbdAccordionToggle, NgbdAccordionConfig];
 
 export const DEMO_SNIPPETS = {
   basic: {
@@ -22,5 +23,9 @@ export const DEMO_SNIPPETS = {
   toggle: {
     code: require('!!prismjs?lang=typescript!./toggle/accordion-toggle'),
     markup: require('!!prismjs?lang=markup!./toggle/accordion-toggle.html')
+  },
+  config: {
+    code: require('!!prismjs?lang=typescript!./config/accordion-config'),
+    markup: require('!!prismjs?lang=markup!./config/accordion-config.html')
   }
 };

demo/src/app/components/shared/api-docs/api-docs.component.ts

@@ -38,16 +38,12 @@ export class NgbdApiDocs {
   };
 
   /**
-   * Returns the default value of the given directive input. If falsy, returns the default value of the matching
-   * config service property
+   * Returns the default value of the given directive input by first looking for it in the matching config service
+   * property. If there is no matching config property, it reads it from the input.
    */
   defaultInputValue(input: InputDesc): string {
-    if (input.defaultValue !== undefined) {
-      return input.defaultValue;
-    }
-
     const configProperty = this._configProperties[input.name];
-    return (configProperty && configProperty.defaultValue);
+    return configProperty ? configProperty.defaultValue : input.defaultValue;
   }
 
   /**

src/accordion/accordion-config.spec.ts

@@ -0,0 +1,10 @@
+import {NgbAccordionConfig} from './accordion-config';
+
+describe('ngb-accordion-config', () => {
+  it('should have sensible default values', () => {
+    const config = new NgbAccordionConfig();
+
+    expect(config.closeOthers).toBe(false);
+    expect(config.type).toBeUndefined();
+  });
+});

src/accordion/accordion-config.ts

@@ -0,0 +1,12 @@
+import {Injectable} from '@angular/core';
+
+/**
+ * Configuration service for the NgbAccordion 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 accordions used in the application.
+ */
+@Injectable()
+export class NgbAccordionConfig {
+  closeOthers = false;
+  type: string;
+}

src/accordion/accordion.module.ts

@@ -2,9 +2,16 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {NGB_ACCORDION_DIRECTIVES} from './accordion';
+import {NgbAccordionConfig} from './accordion-config';
 
 export {NgbPanelChangeEvent} from './accordion';
+export {NgbAccordionConfig} from './accordion-config';
 
-@NgModule({declarations: NGB_ACCORDION_DIRECTIVES, exports: NGB_ACCORDION_DIRECTIVES, imports: [CommonModule]})
+@NgModule({
+  declarations: NGB_ACCORDION_DIRECTIVES,
+  exports: NGB_ACCORDION_DIRECTIVES,
+  imports: [CommonModule],
+  providers: [NgbAccordionConfig]
+})
 export class NgbAccordionModule {
 }

src/accordion/accordion.spec.ts

@@ -1,9 +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 {NgbAccordionModule} from './accordion.module';
+import {NgbAccordionConfig} from './accordion-config';
+import {NgbAccordion} from './accordion';
 
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
@@ -45,6 +47,13 @@ describe('ngb-accordion', () => {
     TestBed.overrideComponent(TestComponent, {set: {template: html}});
   });
 
+  it('should initialize inputs with default values', () => {
+    const defaultConfig = new NgbAccordionConfig();
+    const accordionCmp = new NgbAccordion(defaultConfig);
+    expect(accordionCmp.type).toBe(defaultConfig.type);
+    expect(accordionCmp.closeOtherPanels).toBe(defaultConfig.closeOthers);
+  });
+
   it('should have no open panels', () => {
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();
@@ -303,6 +312,47 @@ describe('ngb-accordion', () => {
     expect(el[1]).toHaveCssClass('card-danger');
     expect(el[2]).toHaveCssClass('card-warning');
   });
+
+  describe('Custom config', () => {
+    let config: NgbAccordionConfig;
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [NgbAccordionModule]}); });
+
+    beforeEach(inject([NgbAccordionConfig], (c: NgbAccordionConfig) => {
+      config = c;
+      config.closeOthers = true;
+      config.type = 'success';
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(NgbAccordion);
+      fixture.detectChanges();
+
+      let accordion = fixture.componentInstance;
+      expect(accordion.closeOtherPanels).toBe(config.closeOthers);
+      expect(accordion.type).toBe(config.type);
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new NgbAccordionConfig();
+    config.closeOthers = true;
+    config.type = 'success';
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [NgbAccordionModule], providers: [{provide: NgbAccordionConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = TestBed.createComponent(NgbAccordion);
+      fixture.detectChanges();
+
+      let accordion = fixture.componentInstance;
+      expect(accordion.closeOtherPanels).toBe(config.closeOthers);
+      expect(accordion.type).toBe(config.type);
+    });
+  });
 });
 
 @Component({selector: 'test-cmp', template: ''})

src/accordion/accordion.ts

@@ -11,6 +11,7 @@ import {
   AfterContentChecked
 } from '@angular/core';
 import {isString} from '../util/util';
+import {NgbAccordionConfig} from './accordion-config';
 
 let nextId = 0;
 
@@ -115,7 +116,7 @@ export class NgbAccordion implements AfterContentChecked {
   /**
    *  Whether the other panels should be closed when a panel is opened
    */
-  @Input('closeOthers') closeOtherPanels = false;
+  @Input('closeOthers') closeOtherPanels: boolean;
 
   /**
    *  Type of accordion's panels. Bootstrap 4 recognizes the following types: "success", "info", "warning" and "danger".
@@ -138,6 +139,11 @@ export class NgbAccordion implements AfterContentChecked {
    */
   private _panelRefs: Map<string, NgbPanel> = new Map<string, NgbPanel>();
 
+  constructor(config: NgbAccordionConfig) {
+    this.type = config.type;
+    this.closeOtherPanels = config.closeOthers;
+  }
+
   /**
    * Programmatically toggle a panel with a given id.
    */