feat(timepicker): added config to separate file

components/timepicker.ts

@@ -1,2 +1,3 @@
 export { TimepickerComponent } from './timepicker/timepicker.component';
 export { TimepickerModule } from './timepicker/timepicker.module';
+export { TimepickerConfig } from './timepicker/timepicker.config';

components/timepicker/timepicker.component.ts

@@ -1,46 +1,16 @@
 import { Component, Input, OnInit, Self } from '@angular/core';
 import { ControlValueAccessor, NgModel } from '@angular/forms';
+import { TimepickerConfig } from './timepicker.config';
 
-export interface TimepickerConfig {
-  hourStep:number;
-  minuteStep:number;
-  showMeridian:boolean;
-  meridians?:any[];
-  readonlyInput:boolean;
-  mousewheel:boolean;
-  arrowkeys:boolean;
-  showSpinners:boolean;
-  min?:number;
-  max?:number;
-}
-
-// todo: implement global configuration via DI
 // todo: refactor directive has to many functions! (extract to stateless helper)
 // todo: use moment js?
 // todo: implement `time` validator
 // todo: replace increment/decrement blockers with getters, or extract
 // todo: unify work with selected
-export const timepickerConfig:TimepickerConfig = {
-  hourStep: 1,
-  minuteStep: 1,
-  showMeridian: true,
-  meridians: void 0,
-  readonlyInput: false,
-  mousewheel: true,
-  arrowkeys: true,
-  showSpinners: true,
-  min: void 0,
-  max: void 0
-};
-
 function isDefined(value:any):boolean {
   return typeof value !== 'undefined';
 }
 
-function def(value:any, fn:Function, defaultValue:any):any {
-  return fn(value) ? value : defaultValue;
-}
-
 function addMinutes(date:any, minutes:number):Date {
   let dt = new Date(date.getTime() + minutes * 60000);
   let newDate = new Date(date);
@@ -84,7 +54,7 @@ function addMinutes(date:any, minutes:number):Date {
 })
 export class TimepickerComponent implements ControlValueAccessor, OnInit {
   public cd:NgModel;
-  // config
+
   @Input() public hourStep:number;
   @Input() public minuteStep:number;
   @Input() public readonlyInput:boolean;
@@ -93,7 +63,7 @@ export class TimepickerComponent implements ControlValueAccessor, OnInit {
   @Input() public showSpinners:boolean;
   @Input() public min:Date;
   @Input() public max:Date;
-  @Input() public meridians:Array<string> = ['AM', 'PM']; // ??
+  @Input() public meridians:Array<string>;
 
   @Input()
   public get showMeridian():boolean {
@@ -145,36 +115,24 @@ export class TimepickerComponent implements ControlValueAccessor, OnInit {
     }
   }
 
-  public constructor(@Self() cd:NgModel) {
+  public constructor(@Self() cd:NgModel, private _config: TimepickerConfig) {
+    Object.assign(this, _config);
     this.cd = cd;
     cd.valueAccessor = this;
   }
 
   // todo: add formatter value to Date object
   public ngOnInit():void {
     // todo: take in account $locale.DATETIME_FORMATS.AMPMS;
-    this.meridians = def(this.meridians, isDefined, timepickerConfig.meridians) || ['AM',
-        'PM'];
-    this.mousewheel = def(this.mousewheel, isDefined, timepickerConfig.mousewheel);
     if (this.mousewheel) {
       // this.setupMousewheelEvents();
     }
-    this.arrowkeys = def(this.arrowkeys, isDefined, timepickerConfig.arrowkeys);
+
     if (this.arrowkeys) {
       // this.setupArrowkeyEvents();
     }
 
-    this.readonlyInput = def(this.readonlyInput, isDefined, timepickerConfig.readonlyInput);
-
     // this.setupInputEvents();
-
-    this.hourStep = def(this.hourStep, isDefined, timepickerConfig.hourStep);
-    this.minuteStep = def(this.minuteStep, isDefined, timepickerConfig.minuteStep);
-    this.min = def(this.min, isDefined, timepickerConfig.min);
-    this.max = def(this.max, isDefined, timepickerConfig.max);
-    // 12H / 24H mode
-    this.showMeridian = def(this.showMeridian, isDefined, timepickerConfig.showMeridian);
-    this.showSpinners = def(this.showSpinners, isDefined, timepickerConfig.showSpinners);
   }
 
   public writeValue(v:any):void {
@@ -356,6 +314,11 @@ export class TimepickerComponent implements ControlValueAccessor, OnInit {
     // }
     this.hours = this.pad(hours);
     this.minutes = this.pad(minutes);
+
+    if (!this.meridians) {
+      this.meridians = this._config.meridians;
+    }
+
     this.meridian = this.selected.getHours() < 12
       ? this.meridians[0]
       : this.meridians[1];

components/timepicker/timepicker.config.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+
+export class TimepickerConfig {
+  public hourStep: number = 1;
+  public minuteStep: number = 5;
+  public showMeridian: boolean = true;
+  public meridians:Array<string> = ['AM', 'PM'];
+  public readonlyInput: boolean = false;
+  public mousewheel: boolean = true;
+  public arrowkeys: boolean = true;
+  public showSpinners: boolean = true;
+  public min: number = void 0;
+  public max: number = void 0;
+}

components/timepicker/timepicker.module.ts

@@ -3,11 +3,13 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import  { TimepickerComponent } from './timepicker.component';
+import { TimepickerConfig } from './timepicker.config';
 
 @NgModule({
   imports: [CommonModule, FormsModule],
   declarations: [TimepickerComponent],
-  exports: [FormsModule, TimepickerComponent]
+  exports: [FormsModule, TimepickerComponent],
+  providers: [TimepickerConfig]
 })
 export class TimepickerModule {
 }