feat: support global config

- close #30

README.md

@@ -79,6 +79,22 @@ resetTimer(){
 | notify | number[] |  | 第xx秒时调用 notify 函数，值必须是**正整数** |
 | repaint | Function |  | Custom repaintes |
 
+**Global Config**
+
+```ts
+function countdownConfigFactory(): Config {
+  return { template: `$!h!:$!m!:$!s!` };
+}
+
+@NgModule({
+  imports: [ CountdownModule ],
+  providers: [
+    { provide: CountdownConfig, useFactory: countdownConfigFactory }
+  ],
+})
+export class AppDemoModule {}
+```
+
 ## About repaints
 
 The timer will call repaint function every time, if it's `0.1s` accuracy, it will be more frequent. so you can make same special effects, like [Flip](https://cipchk.github.io/ngx-countdown/#/tpl/flip).

angular.json

@@ -17,7 +17,10 @@
             "tsConfig": "src/tsconfig.json",
             "polyfills": "src/polyfills.ts",
             "assets": ["src/assets"],
-            "styles": [],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.css",
+              "node_modules/ngx-toastr/toastr.css"
+            ],
             "scripts": []
           },
           "configurations": {

lib/src/countdown.component.ts

@@ -10,23 +10,29 @@ import {
   OnInit,
   SimpleChange,
   ChangeDetectionStrategy,
+  ViewEncapsulation,
+  Inject,
 } from '@angular/core';
 
 import { Config, Hand } from './interfaces';
 import { Timer } from './countdown.timer';
+import { CountdownConfig } from './countdown.config';
 
 @Component({
   selector: 'countdown',
-  template: `<ng-content></ng-content>`,
+  template: `
+    <ng-content></ng-content>
+  `,
   styles: [
     `
-      :host {
+      countdown {
         display: none;
       }
     `,
   ],
   host: { '[class.count-down]': 'true' },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
   private frequency = 1000;
@@ -40,15 +46,19 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   config: Config;
   @Output()
-  start = new EventEmitter();
+  readonly start = new EventEmitter();
   @Output()
-  finished = new EventEmitter();
+  readonly finished = new EventEmitter();
   @Output()
-  notify = new EventEmitter();
+  readonly notify = new EventEmitter();
   @Output()
-  event = new EventEmitter<{ action: string; left: number }>();
+  readonly event = new EventEmitter<{ action: string; left: number }>();
 
-  constructor(private el: ElementRef, private timer: Timer) {}
+  constructor(
+    private el: ElementRef,
+    private timer: Timer,
+    private cog: CountdownConfig,
+  ) {}
 
   /** 开始，当 `demand: false` 时触发 */
   begin() {
@@ -92,17 +102,7 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
 
   private init() {
     const me = this;
-    me.config = Object.assign(
-      <Config>{
-        demand: false,
-        leftTime: 0,
-        template: '$!h!时$!m!分$!s!秒',
-        effect: 'normal',
-        varRegular: /\$\!([\-\w]+)\!/g,
-        clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1],
-      },
-      me.config,
-    );
+    me.config = { ...new CountdownConfig(), ...me.cog, ...me.config };
     const el = me.el.nativeElement as HTMLElement;
     me.paused = me.config.demand;
     me.stoped = false;

lib/src/countdown.config.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class CountdownConfig {
+  demand = false;
+  leftTime = 0;
+  template = '$!h!时$!m!分$!s!秒';
+  effect = 'normal';
+  varRegular?: RegExp = /\$\!([\-\w]+)\!/g;
+  clock?: any[] = ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1];
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-countdown",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Simple, easy and performance countdown for angular",
   "repository": {
     "type": "git",
@@ -31,41 +31,44 @@
     "release": "npm run build && cd publish && npm publish --access public"
   },
   "devDependencies": {
-    "@angular/animations": "^6.1.9",
-    "@angular/common": "^6.1.9",
-    "@angular/compiler": "^6.1.9",
-    "@angular/core": "^6.1.9",
-    "@angular/forms": "^6.1.9",
-    "@angular/http": "^6.1.9",
-    "@angular/platform-browser": "^6.1.9",
-    "@angular/platform-browser-dynamic": "^6.1.9",
-    "@angular/router": "^6.1.9",
+    "@angular/animations": "~7.2.0",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/forms": "~7.2.0",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
-    "rxjs": "^6.1.9",
-    "zone.js": "^0.8.26",
-    "ngx-highlight-js": "^2.0.0",
-    "ngx-notify": "^2.0.0",
-    "@angular-devkit/build-angular": "^0.8.0",
-    "@angular/cli": "^6.1.9",
-    "@angular/compiler-cli": "^6.1.9",
-    "@angular/language-service": "^6.1.9",
-    "@types/jasmine": "~2.8.6",
-    "@types/jasminewd2": "~2.0.3",
+    "rxjs": "~6.3.3",
+    "tslib": "^1.9.0",
+    "zone.js": "~0.8.26",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "~7.3.0",
+    "@angular/compiler-cli": "~7.2.0",
+    "@angular/language-service": "~7.2.0",
     "@types/node": "~8.9.4",
-    "codecov": "^3.0.0",
-    "codelyzer": "~4.2.1",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.0.0",
+    "karma": "~3.1.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.3.0",
+    "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
-    "typescript": "~2.9.2",
-    "ng-packagr": "^4.1.1"
+    "typescript": "~3.2.2",
+    "ngx-highlight-js": "^2.1.1",
+    "ngx-toastr": "^9.1.1",
+    "codecov": "^3.1.0",
+    "bootstrap": "^4.2.1",
+    "gh-pages": "^2.0.1",
+    "tsickle": "^0.34.3",
+    "ng-packagr": "^4.7.0"
   },
   "ngPackage": {
     "lib": {

src/app/app.module.ts

@@ -1,14 +1,12 @@
-import { HttpModule } from '@angular/http';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { Routes, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { HighlightJsModule } from 'ngx-highlight-js';
-import { NotifyModule } from 'ngx-notify';
-// import { TabsModule } from 'ngx-bootstrap/tabs';
+import { ToastrModule } from 'ngx-toastr';
 
-import { CountdownModule } from 'ngx-countdown';
+import { CountdownModule, Config } from 'ngx-countdown';
 
 import { AppComponent } from './app.component';
 import { LayoutComponent } from './components/layout.component';
@@ -17,53 +15,52 @@ import { ALotComponent } from './components/alot.component';
 import { TplComponent } from './components/tpl.component';
 import { NothingComponent } from './components/nothing.component';
 import { TplFlipComponent } from './tpl/flip/flip.component';
+import { CountdownConfig } from 'ngx-countdown/src/countdown.config';
+
+export function countdownConfigFactory(): Config {
+  return { template: `$!h!:$!m!:$!s!` };
+}
 
 @NgModule({
-    imports: [
-        BrowserModule,
-        FormsModule,
-        HttpModule,
-        CommonModule,
-        HighlightJsModule,
-        // TabsModule.forRoot(),
-        NotifyModule.forRoot({
-            notify: {
-                theme: 'bootstrap',
-                progress: false
-            }
-        }),
-        RouterModule.forRoot([
-            {
-                path: '',
-                component: LayoutComponent,
-                children: [
-                    { path: '', component: DemoComponent },
-                    { path: 'alot', component: ALotComponent },
-                    { path: 'tpl', component: TplComponent },
-                    { path: 'nothing', component: NothingComponent }
-                ]
-            },
-            {
-                path: 'tpl',
-                children: [
-                    { path: 'flip', component: TplFlipComponent }
-                ]
-            }
-        ], { useHash: true }),
-        CountdownModule
-    ],
-    declarations: [
-        AppComponent,
-        LayoutComponent,
-        DemoComponent,
-        ALotComponent,
-        NothingComponent,
-        TplComponent,
-        TplFlipComponent
-    ],
-    providers: [],
-    bootstrap: [AppComponent]
+  imports: [
+    BrowserModule,
+    FormsModule,
+    CommonModule,
+    HighlightJsModule,
+    ToastrModule.forRoot(),
+    RouterModule.forRoot(
+      [
+        {
+          path: '',
+          component: LayoutComponent,
+          children: [
+            { path: '', component: DemoComponent },
+            { path: 'alot', component: ALotComponent },
+            { path: 'tpl', component: TplComponent },
+            { path: 'nothing', component: NothingComponent },
+          ],
+        },
+        {
+          path: 'tpl',
+          children: [{ path: 'flip', component: TplFlipComponent }],
+        },
+      ],
+      { useHash: true },
+    ),
+    CountdownModule,
+  ],
+  declarations: [
+    AppComponent,
+    LayoutComponent,
+    DemoComponent,
+    ALotComponent,
+    NothingComponent,
+    TplComponent,
+    TplFlipComponent,
+  ],
+  providers: [
+    { provide: CountdownConfig, useFactory: countdownConfigFactory }
+  ],
+  bootstrap: [AppComponent],
 })
-
-export class AppDemoModule {
-}
+export class AppDemoModule {}

src/app/components/demo.component.ts

@@ -6,7 +6,7 @@ import {
   ViewChild,
   ElementRef,
 } from '@angular/core';
-import { NotifyService } from 'ngx-notify';
+import { ToastrService } from 'ngx-toastr';
 import { CountdownComponent } from 'ngx-countdown';
 
 @Component({
@@ -16,7 +16,7 @@ import { CountdownComponent } from 'ngx-countdown';
   encapsulation: ViewEncapsulation.None,
 })
 export class DemoComponent {
-  constructor(private _ns: NotifyService) {}
+  constructor(private ts: ToastrService) {}
 
   notify: string;
   config: any = { leftTime: 10, notify: [2, 5] };

src/index.html

@@ -7,8 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="./">
   <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
-    crossorigin="anonymous">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/atom-one-dark.min.css">
   <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
 </head>