feat(defaults): defaults are now configured by passing them via Confi…

…rmModule.forRoot()

BREAKING CHANGE:
Before:
```
const defaults = new ConfirmOptions();
defaults.confirmButtonType = 'danger';

providers: [
  {provide: ConfirmOptions, useValue: defaults}
]
```

After:
```
imports: [
  ConfirmModule.forRoot({
    confirmButtonType: 'danger'
  })
]
```

README.md

@@ -35,14 +35,24 @@ npm install --save angular2-bootstrap-confirm
 Then use it in your app on a component:
 
 ```typescript
-import {Component} from '@angular/core';
-import {ConfirmOptions} from 'angular2-bootstrap-confirm';
+import {NgModule, Component} from '@angular/core';
+import {ConfirmModule} from 'angular2-bootstrap-confirm';
 
+// first add it to your apps module
+@NgModule({
+  declarations: [MyComponent],
+  imports: [
+    ConfirmModule.forRoot({
+      confirmButtonType: 'danger' // set defaults here
+    })
+  ],
+  bootstrap: [MyComponent]
+})
+class MyModule {}
+
+// now use it within your component
 @Component({
   selector: 'my-component',
-  providers: [ // you can pass both of these when bootstrapping the app to configure globally throughout your app
-    ConfirmOptions
-  ],
   template: `
     <button
       class="btn btn-default"
@@ -65,17 +75,6 @@ class MyComponent {
   public isOpen: boolean = false;
 }
 
-// now use within your apps module
-import {NgModule} from '@angular/core';
-import {ConfirmModule} from 'angular2-bootstrap-confirm';
-
-@NgModule({
-  declarations: [MyComponent],
-  imports: [ConfirmModule],
-  bootstrap: [MyComponent]
-})
-class MyModule {}
-
 ```
 
 You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular2-bootstrap-confirm/blob/master/demo/demo.ts).

demo/demo.component.ts

@@ -1,15 +1,7 @@
 import {Component} from '@angular/core';
-import {ConfirmOptions} from './../src';
-
-const options: ConfirmOptions = new ConfirmOptions();
-options.focusButton = 'confirm';
 
 @Component({
   selector: 'demo-app',
-  providers: [{
-    provide: ConfirmOptions,
-    useValue: options
-  }],
   template: `
     <div>
       <div class="form-group">

demo/demo.module.ts

@@ -6,7 +6,13 @@ import {Demo} from './demo.component';
 
 @NgModule({
   declarations: [Demo],
-  imports: [BrowserModule, FormsModule, ConfirmModule],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    ConfirmModule.forRoot({
+      focusButton: 'confirm'
+    })
+  ],
   bootstrap: [Demo]
 })
 export class DemoModule {}

src/confirm.directive.ts

@@ -33,7 +33,7 @@ interface Coords {
 }
 
 /**
- * All properties can be set on the directive as attributes like so (use the `ConfirmOptions` provider to configure them globally):
+ * All properties can be set on the directive as attributes like so (use `ConfirmModule.forRoot()` to configure them globally):
  * ```
  * <button
  *  class="btn btn-default"

src/confirm.module.ts

@@ -1,13 +1,40 @@
-import {NgModule} from '@angular/core';
+import {NgModule, ModuleWithProviders, OpaqueToken} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Confirm} from './confirm.directive';
 import {ConfirmPopover} from './confirmPopover.component';
 import {Focus} from './focus.directive';
+import {ConfirmOptions, ConfirmOptionsInterface} from './confirmOptions.provider';
+
+const USER_OPTIONS: OpaqueToken = new OpaqueToken('confirmation popover user options');
+
+export function optionsFactory(userOptions: ConfirmOptions): ConfirmOptions {
+  const options: ConfirmOptions = new ConfirmOptions();
+  Object.assign(options, userOptions);
+  return options;
+}
 
 @NgModule({
   declarations: [Confirm, ConfirmPopover, Focus],
   imports: [CommonModule],
   exports: [Confirm, Focus],
   entryComponents: [ConfirmPopover]
 })
-export class ConfirmModule {}
+export class ConfirmModule {
+
+  static forRoot(options?: ConfirmOptionsInterface): ModuleWithProviders {
+
+    return {
+      ngModule: ConfirmModule,
+      providers: [{
+        provide: USER_OPTIONS,
+        useValue: options
+      }, {
+        provide: ConfirmOptions,
+        useFactory: optionsFactory,
+        deps: [USER_OPTIONS]
+      }]
+    };
+
+  }
+
+}

src/confirmOptions.provider.ts

@@ -1,79 +1,83 @@
-import {Injectable, TemplateRef} from '@angular/core';
+import {TemplateRef, Injectable} from '@angular/core';
 
-/**
- * Use this for configuring the confirmation popover defaults
- *
- * Use it like so:
- * ```
- * const options: ConfirmOptions = new ConfirmOptions();
- * // focus the confirm button by default. See below for an explanation of all options.
- * options.focusButton = 'confirm';
- *
- * providers: [{provide: ConfirmOptions, useValue: options}]
- * ```
- */
-@Injectable()
-export class ConfirmOptions {
+export interface ConfirmOptionsInterface {
 
   /**
    * The popover title
    */
-  public title: string;
+  title?: string;
 
   /**
    * The popover message
    */
-  public message: string;
+  message?: string;
 
   /**
    * The popover confirmation button text
    */
-  public confirmText: string = 'Confirm';
+  confirmText?: string;
 
   /**
    * The popover cancel button text
    */
-  public cancelText: string = 'Cancel';
+  cancelText?: string;
 
   /**
    * The popover confirm button type e.g. `success`, `danger` etc
    */
-  public confirmButtonType: string = 'success';
+  confirmButtonType?: string;
 
   /**
    * The popover cancel button type  e.g. `success`, `danger` etc
    */
-  public cancelButtonType: string = 'default';
+  cancelButtonType?: string;
 
   /**
    * The popover placement. Can be `top`, `bottom`, `left`, `right`
    */
-  public placement: string = 'top';
+  placement?: string;
 
   /**
    * Which button to cancel. Can be either `confirm` or `cancel`
    */
-  public focusButton: string;
+  focusButton?: string;
 
   /**
    * Whether to hide the confirmation button
    */
-  public hideConfirmButton: boolean = false;
+  hideConfirmButton?: boolean;
 
   /**
    * Whether to hide the cancel button
    */
-  public hideCancelButton: boolean = false;
+  hideCancelButton?: boolean;
 
   /**
    * A custom CSS class to be added to the popover
    */
-  public popoverClass: string = '';
+  popoverClass?: string;
 
   /**
    * Whether to append the popover to the document body
    */
-  public appendToBody: boolean = false;
+  appendToBody?: boolean;
+
+}
+
+export class ConfirmOptions implements ConfirmOptionsInterface {
+
+  title: string;
+  message: string;
+  confirmText: string = 'Confirm';
+  cancelText: string = 'Cancel';
+  confirmButtonType: string = 'success';
+  cancelButtonType: string = 'default';
+  placement: string = 'top';
+  focusButton: string;
+  hideConfirmButton: boolean = false;
+  hideCancelButton: boolean = false;
+  popoverClass: string = '';
+  appendToBody: boolean = false;
 
 }
 

src/index.ts

@@ -1,2 +1 @@
-export {ConfirmOptions} from './confirmOptions.provider';
-export * from './confirm.module';
+export {ConfirmModule} from './confirm.module';

test/angular2-bootstrap-confirm.spec.ts

@@ -21,11 +21,7 @@ import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
-import {
-  ConfirmModule,
-  ConfirmOptions,
-  Position
-} from './../src';
+import {ConfirmModule} from './../src';
 import {Confirm} from './../src/confirm.directive';
 import {ConfirmPopover} from './../src/confirmPopover.component';
 import {expect, use} from 'chai';
@@ -92,12 +88,7 @@ describe('bootstrap confirm', () => {
     };
 
     beforeEach(() => {
-      TestBed.configureTestingModule({imports: [ConfirmModule], declarations: [TestCmp]});
-      TestBed.configureCompiler({
-        providers: [
-          ConfirmOptions
-        ]
-      });
+      TestBed.configureTestingModule({imports: [ConfirmModule.forRoot()], declarations: [TestCmp]});
 
       createPopover = (): ComponentRef<ConfirmPopover> => {
         const fixture: ComponentFixture<TestCmp> = TestBed.createComponent(TestCmp);
@@ -426,16 +417,16 @@ describe('bootstrap confirm', () => {
       @ViewChild(Confirm) confirm: Confirm;
     }
 
-    const options: ConfirmOptions = new ConfirmOptions();
-    options.confirmText = 'Derp';
-
     beforeEach(() => {
-      TestBed.configureTestingModule({imports: [ConfirmModule], declarations: [TestCmp]});
-      TestBed.configureCompiler({
-        providers: [{
-          provide: ConfirmOptions,
-          useValue: options
-        }]
+      TestBed.configureTestingModule({
+        imports: [
+          ConfirmModule.forRoot({
+            confirmText: 'Derp'
+          })
+        ],
+        declarations: [
+          TestCmp
+        ]
       });
     });