feat: add count-down component.

docs/getting-started.en-US.md

@@ -0,0 +1,77 @@
+---
+order: 0
+title:
+  en-US: Getting Started
+  zh-CN: 开始使用
+type: Basic
+---
+
+## Foreword
+
+ng-alain is a production-ready solution for admin interfaces based on ng-zorro-antd, which should help you buid angular project to be faster and simpler.
+
+## Installation
+
+There are two ways to install:
+
+### Clone the Git Repository
+
+```bash
+$ git clone -b 0.2.0 --depth=1 https://github.com/cipchk/ng-alain.git my-project
+$ cd my-project
+```
+
+### Download the Package
+
+Download [https://github.com/cipchk/ng-alain/archive/0.2.0.zip](https://github.com/cipchk/ng-alain/archive/0.2.0.zip), and un-archive.
+
+## Scaffolding
+
+ng-alain is a standard Angular cli project, and have built the following template. which should help you prototyping production-ready admin interfaces.
+
+```
+├── src
+│   ├── app
+│   │   ├── core                                # Core module
+│   │   │   ├── i18n
+│   │   │   ├── net
+│   │   │   │   └── default.interceptor.ts      # HTTP Interceptor
+│   │   │   ├── services
+│   │   │   │   └── startup.service.ts          # Startup Service
+│   │   │   └── core.module.ts
+│   │   ├── layout                              # Common Layouts
+│   │   ├── routes
+│   │   │   ├── **                              # Your Business
+│   │   │   ├── routes.module.ts                # Router module file of business
+│   │   │   └── routes.ts                       # Router Register
+│   │   ├── shared
+│   │   │   └── core.module.ts                  # Shared module file
+│   │   ├── app.component.ts                    # Root component
+│   │   └── app.module.ts                       # Root module file
+│   ├── assets                                  # Local static files
+│   ├── environments                            # Environments config
+│   ├── styles                                  # Theme config
+└── └── style.less                              # Global Stylesheet
+```
+
+## Development
+
+Install Dependencies
+
+```bash
+$ npm install
+```
+
+```bash
+$ npm start
+```
+
+or use HMR mode
+
+```bash
+$ npm run serve:hmr
+```
+
+open [http://localhost:4200](http://localhost:4200), If you see the following page then you have succeeded.
+
+![](./assets/screenshot/desktop.png | width=700)

docs/getting-started.md → docs/getting-started.zh-CN.md

@@ -74,6 +74,6 @@ $ npm start
 $ npm run serve:hmr
 ```
 
-启动完成后会自动打开浏览器访问 [http://localhost:4200](http://localhost:4200)，你看到下面的页面就代表成功了。
+启动完成后会打开浏览器访问 [http://localhost:4200](http://localhost:4200)，你看到下面的页面就代表成功了。
 
 ![](./assets/screenshot/desktop.png | width=700)

package.json

@@ -35,8 +35,8 @@
 		"site:serve:cli": "ng serve --app site",
 		"site:serve": "npm-run-all -s site:clean site:gen site:serve:cli",
 		"site:ts": "ng build --app site --prod --build-optimizer --bh ./",
-        "site:build": "npm-run-all -s site:clean site:gen site:ts site:cname",
-        "site:cname": "cname site/dist",
+		"site:build": "npm-run-all -s site:clean site:gen site:ts site:cname",
+		"site:cname": "cname site/dist",
 		"site:deploy": "gh-pages -d site/dist",
 		"site:release": "npm-run-all -s site:build site:deploy",
 		"build:package": "npm-run-all -s clean:tmp:lib build:copy-sources build:ts build:inline-resources build:bundle clean:tmp",
@@ -71,6 +71,7 @@
 		"moment": "^2.19.2",
 		"ng-zorro-antd": "^0.6.1",
 		"ng-zorro-antd-extra": "^1.1.2",
+		"ngx-countdown": "^1.0.3",
 		"ngx-highlight-js": "^1.0.3",
 		"rxjs": "^5.5.2",
 		"zone.js": "^0.8.14"

src/app/abc/component.ts

@@ -1,25 +1,20 @@
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import * as moment from 'moment';
+import { NzMessageService } from 'ng-zorro-antd';
 
 @Component({
   selector: 'app-demo',
   template: `
-  <div style="width: 90px; margin-bottom: 100px;">
-    <mini-bar height="45" [data]="visitData"></mini-bar>
-  </div>
-  <mini-area line color="#cceafe" height="45" [data]="visitData"></mini-area>
+  <p class="mb-sm">10s: <count-down [target]="10" (end)="onEnd()" style="font-size: 20px"></count-down></p>
+  <p>10m: <count-down [target]="target"></count-down></p>
   `
 })
-export class DemoComponent implements OnInit {
-    visitData: any[] = [];
-    ngOnInit(): void {
-        const beginDay = new Date().getTime();
-        for (let i = 0; i < 20; i += 1) {
-            this.visitData.push({
-                x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-                y: Math.floor(Math.random() * 100) + 10,
-            });
-        }
+export class DemoComponent {
+    target = moment().add(10, 'm');
+    constructor(private msg: NzMessageService) {}
+
+    onEnd() {
+        this.msg.success('finised');
     }
 }

src/core/abc/components/count-down/count-down.component.ts

@@ -0,0 +1,44 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import * as moment from 'moment';
+
+@Component({
+    selector: 'count-down',
+    template: `
+    <countdown *ngIf="config" [config]="config"
+        (start)="_start()"
+        (finished)="_finished()"
+        (notify)="_notify($event)"></countdown>
+    `,
+    styleUrls: [ './count-down.less' ]
+})
+export class CountDownComponent {
+
+    @Input() config: any;
+
+    /**
+     * 目标时间
+     */
+    @Input()
+    set target(value: number | Date) {
+        this.config = {
+            template: `$!h!:$!m!:$!s!`,
+            stopTime: typeof value === 'number' ? moment().add(value, 's').valueOf() : moment(value).valueOf()
+        };
+    }
+
+    @Output() begin = new EventEmitter();
+    @Output() notify = new EventEmitter<number>();
+    @Output() end = new EventEmitter();
+
+    _start() {
+        this.begin.emit();
+    }
+
+    _notify(time: number) {
+        this.notify.emit(time);
+    }
+
+    _finished() {
+        this.end.emit();
+    }
+}

src/core/abc/components/count-down/count-down.less

@@ -0,0 +1,18 @@
+
+:host {
+	::ng-deep {
+        .count-down {
+            color: inherit;
+            font-size: inherit;
+            font-family: inherit;
+            .hand {
+                margin: 0;
+            }
+            .digital {
+                color: inherit;
+                font-size: inherit;
+                font-weight: inherit;
+            }
+        }
+	}
+}

src/core/abc/components/count-down/count-down.module.ts

@@ -0,0 +1,26 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CountdownModule } from 'ngx-countdown';
+
+import { CountDownComponent } from './count-down.component';
+
+const COMPONENTS = [CountDownComponent];
+
+// region: zorro modules
+
+// import { NzToolTipModule, NzAvatarModule } from 'ng-zorro-antd';
+
+const ZORROMODULES = [ ];
+
+// endregion
+
+@NgModule({
+    imports:        [CommonModule, CountdownModule, ...ZORROMODULES],
+    declarations:   [...COMPONENTS],
+    exports:        [...COMPONENTS]
+})
+export class AdCountDownModule {
+    static forRoot(): ModuleWithProviders {
+        return { ngModule: AdCountDownModule, providers: [] };
+    }
+}

src/core/abc/components/count-down/demo/accuracy.md

@@ -0,0 +1,29 @@
+---
+order: 0
+title:
+  zh-CN: 精度
+  en-US: Accuracy
+---
+
+## zh-CN
+
+0.1s精度使用方式。
+
+## en-US
+
+The `0.1s` accuracy usage.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `<count-down [config]="config"></count-down>`
+})
+export class DemoComponent {
+    config: any = {
+        template: `$!s-ext!秒`,
+        leftTime: 30
+    };
+}
+```

src/core/abc/components/count-down/demo/simple.md

@@ -0,0 +1,36 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+简单的倒计时组件使用。
+
+## en-US
+
+The simplest usage.
+
+```ts
+import { Component } from '@angular/core';
+import * as moment from 'moment';
+import { NzMessageService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+  <p class="mb-sm">10s: <count-down [target]="10" (end)="onEnd()" style="font-size: 20px"></count-down></p>
+  <p>10m: <count-down [target]="target"></count-down></p>
+  `
+})
+export class DemoComponent {
+    target = moment().add(10, 'm');
+    constructor(private msg: NzMessageService) {}
+
+    onEnd() {
+        this.msg.success('finised');
+    }
+}
+```

src/core/abc/components/count-down/index.md

@@ -0,0 +1,36 @@
+---
+title: count-down
+subtitle: 倒计时
+cols: 1
+order: 3
+---
+
+倒计时组件，依赖 [ngx-countdown](https://github.com/cipchk/ngx-countdown)。
+
+## API
+
+| 参数      | 说明          | 类型         | 默认值 |
+|----------|---------------|-------------|-------|
+| target | 目标时间，`number` 表示秒 | `number | Date` | - |
+| config | 完整参数 | `Object` |  |
+| (begin) |  开始时触发 | `EventEmitter` | -|
+| (notify) |  通知时触发，需要在 `config` 中配置 notify | `EventEmitter` | -|
+| (end) |  结束时触发 | `EventEmitter` | -|
+
+### config
+
+| Name    | Type           | Default  | Summary |
+| ------- | ------------- | ----- | ----- |
+| template | string | $!h!时$!m!分$!s!秒 | 自定义模板，如果为空以组件 innerHTML 为准，再不然使用默认值。`$!s!` 有另一种表示法 `$!s-ext!` 表示0.1s精度。  |
+| size | string | lite | lite、medium、large 三种不同风格，见DEMO |
+| leftTime | number | 0 | 剩余时间：指的是根据服务端计算剩余时间值进行倒计时，支持0.1s精度，但有可能会出现丢帧的情况。（单位：秒） |
+| stopTime | number | 0 | 结束时间：指的是根据本地时间至结束时间进行倒计时。（单位：UNIX时间戳 ms） |
+| varRegular | RegExp | `/\$\{([\-\w]+)\}/g` | 模板解析正则表达式，有时候由于模板结构比较特殊，无法根据默认的表达式进行解析，那就需要修改它。 |
+| clock | Array |  | 时钟控制数组，特殊需求时可以修改，里面是三元组：指针名、进制、位数，可参考大于99小时demo |
+| notify | number[] |  | 第xx秒时调用 notify 函数，值必须是**正整数** |
+| className | string |  | 自定义类名 |
+| repaint | Function |  | 自定义重绘 |
+
+## 关于重绘
+
+重绘是指当Timer一次跳动时会执行一次（如果是0.1s精度的，会更频繁）；因此，可以制定一些不一样的效果。有关细节可以参考 [Flip](https://cipchk.github.io/ngx-countdown/#/tpl/flip)。

src/core/abc/components/count-down/index.ts

@@ -0,0 +1,2 @@
+export { CountDownComponent } from './count-down.component';
+export { AdCountDownModule } from './count-down.module';

src/core/abc/index.ts

@@ -20,12 +20,13 @@ import { AdTagSelectModule } from './components/tag-select/tag-select.module';
 import { AdTrendModule } from './components/trend/trend.module';
 import { AdUtilsModule } from './components/utils/utils.module';
 import { AdChartsModule } from './components/charts/charts.module';
+import { AdCountDownModule } from './components/count-down/count-down.module';
 
 const MODULES = [
     AdErrorCollectModule, AdFooterToolbarModule, AdSidebarNavModule, AdDownFileModule, AdImageModule,
     AdAvatarListModule, AdDescListModule, AdEllipsisModule, AdGlobalFooterModule, AdExceptionModule,
     AdNoticeIconModule, AdNumberInfoModule, AdProHeaderModule, AdResultModule, AdStandardFormRowModule,
-    AdTagSelectModule, AdTrendModule, AdUtilsModule, AdChartsModule
+    AdTagSelectModule, AdTrendModule, AdUtilsModule, AdChartsModule, AdCountDownModule
 ];
 
 // endregion
@@ -51,6 +52,7 @@ export * from './components/tag-select';
 export * from './components/trend';
 export * from './components/utils';
 export * from './components/charts';
+export * from './components/count-down';
 
 // endregion
 
@@ -59,7 +61,7 @@ export * from './components/charts';
         AdErrorCollectModule.forRoot(), AdFooterToolbarModule.forRoot(), AdSidebarNavModule.forRoot(), AdDownFileModule.forRoot(), AdImageModule.forRoot(),
         AdAvatarListModule.forRoot(), AdDescListModule.forRoot(), AdEllipsisModule.forRoot(), AdExceptionModule.forRoot(), AdExceptionModule.forRoot(),
         AdNoticeIconModule.forRoot(), AdNumberInfoModule.forRoot(), AdProHeaderModule.forRoot(), AdResultModule.forRoot(), AdStandardFormRowModule.forRoot(),
-        AdTagSelectModule.forRoot(), AdTrendModule.forRoot(), AdUtilsModule.forRoot(), AdChartsModule.forRoot()
+        AdTagSelectModule.forRoot(), AdTrendModule.forRoot(), AdUtilsModule.forRoot(), AdChartsModule.forRoot(), AdCountDownModule.forRoot()
     ],
     exports: MODULES
 })

src/core/abc/package.json

@@ -17,5 +17,6 @@
 	"homepage": "https://github.com/cipchk/delon#readme",
 	"keywords": ["delon", "ng-alain", "alain", "antd", "ng-zorro-antd"],
 	"peerDependencies": {
+		"ngx-countdown": "^1.0.3"
 	}
 }

src/core/theme/pipes/date/moment-date.pipe.ts

@@ -8,13 +8,13 @@ import * as moment from 'moment';
  *
  * @example
  * ```html
- * {{ data | _data }}
+ * {{ data | _date }}
  * 2017-09-17 15:35
  *
- * {{ data | _data: 'YYYY年MM月DD日' }}
+ * {{ data | _date: 'YYYY年MM月DD日' }}
  * 2017年09月17
  *
- * {{ data | _data: 'fn' }}
+ * {{ data | _date: 'fn' }}
  * 10 秒前
  * ```
  */