feat(module:pipes): add pipes (#4812)

.github/CODEOWNERS

@@ -63,6 +63,7 @@ components/form/**                        @danranVm
 components/page-header/**                 @CK110
 components/transfer/**                    @Ricbet
 components/i18n/**                        @wenqi73
+components/pipes/**                       @chensimeng
 
 # The `components/core/*` owners
 components/core/config/**                 @wendellhu95

.github/nz-boot.yml

@@ -124,3 +124,4 @@ issue:
       Form: danranVm
       PageHeader: CK110
       Transfer: Ricbet
+      Pipes: chensimeng

components/core/pipe/nz-pipe.module.ts

@@ -6,12 +6,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzToCssUnitPipe } from './nz-css-unit.pipe';
 import { NzTimeRangePipe } from './time-range.pipe';
 
 @NgModule({
   imports: [CommonModule],
-  exports: [NzTimeRangePipe, NzToCssUnitPipe],
-  declarations: [NzTimeRangePipe, NzToCssUnitPipe]
+  exports: [NzTimeRangePipe],
+  declarations: [NzTimeRangePipe]
 })
 export class NzPipesModule {}

components/core/pipe/public-api.ts

@@ -5,4 +5,3 @@
 
 export * from './nz-pipe.module';
 export * from './time-range.pipe';
-export * from './nz-css-unit.pipe';

components/core/util/number.ts

@@ -2,6 +2,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
 
 export function getPercent(min: number, max: number, value: number): number {
   return ((value - min) / (max - min)) * 100;
@@ -22,3 +23,15 @@ export function ensureNumberInRange(num: number, min: number, max: number): numb
     return num;
   }
 }
+
+export function isNumberFinite(value: NzSafeAny): boolean {
+  return typeof value === 'number' && isFinite(value);
+}
+
+export function toDecimal(value: number, decimal: number): number {
+  return Math.round(value * Math.pow(10, decimal)) / Math.pow(10, decimal);
+}
+
+export function sum(input: number[], initial: number = 0): number {
+  return input.reduce((previous: number, current: number) => previous + current, initial);
+}

components/modal/modal.module.ts

@@ -11,9 +11,9 @@ import { NgModule } from '@angular/core';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzPipesModule } from 'ng-zorro-antd/core/pipe';
 import { NzI18nModule } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
 
 import { NzModalCloseComponent } from './modal-close.component';
 import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
@@ -34,7 +34,8 @@ import { NzModalService } from './modal.service';
     NzButtonModule,
     NzIconModule,
     NzPipesModule,
-    NzNoAnimationModule
+    NzNoAnimationModule,
+    NzPipesModule
   ],
   exports: [NzModalComponent, NzModalFooterDirective],
   providers: [NzModalService],

components/pipes/demo/aggregate.md

@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: nzAggregate
+  en-US: nzAggregate
+---
+
+## zh-CN
+
+数组的Sum、Min、Max、Average等聚合操作
+
+## en-US
+
+Sum, Min, Max, Average and other operations on arrays

components/pipes/demo/aggregate.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-aggregate',
+  template: `
+    <nz-row [nzGutter]="16">
+      <nz-col [nzSpan]="6">
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'max'" [nzTitle]="'Max [7, 8, 2, 3]'"></nz-statistic>
+      </nz-col>
+      <nz-col [nzSpan]="6">
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'min'" [nzTitle]="'Min [7, 8, 2, 3]'"></nz-statistic>
+      </nz-col>
+      <nz-col [nzSpan]="6">
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'sum'" [nzTitle]="'Sum [7, 8, 2, 3]'"></nz-statistic>
+      </nz-col>
+      <nz-col [nzSpan]="6">
+        <nz-statistic [nzValue]="[7, 8, 2, 3] | nzAggregate: 'avg'" [nzTitle]="'Avg [7, 8, 2, 3]'"></nz-statistic>
+      </nz-col>
+    </nz-row>
+  `
+})
+export class NzDemoPipesAggregateComponent {}

components/pipes/demo/bytes.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh-CN: nzBytes
+  en-US: nzBytes
+---
+
+## zh-CN
+
+存储单位的换算，增加可读性
+
+## en-US
+
+Conversion of storage units to increase readability

components/pipes/demo/bytes.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-bytes',
+  template: `
+    <ul>
+      <li>{{ 200 | nzBytes }}</li>
+      <li>{{ 1024 | nzBytes }}</li>
+      <li>{{ 1048576 | nzBytes }}</li>
+      <li>{{ 1024 | nzBytes: 0:'KB' }}</li>
+      <li>{{ 1073741824 | nzBytes }}</li>
+      <li>{{ 1099511627776 | nzBytes }}</li>
+      <li>{{ 1073741824 | nzBytes: 0:'B':'MB' }}</li>
+    </ul>
+  `
+})
+export class NzDemoPipesBytesComponent {}

components/pipes/demo/css-unit.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title:
+  zh-CN: nzToCssUnit
+  en-US: nzToCssUnit
+---
+
+## zh-CN
+
+Css 单位
+
+## en-US
+
+Css unit

components/pipes/demo/css-unit.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-css-unit',
+  template: `
+    <nz-slider [(ngModel)]="radiusValue" [nzMax]="100" [nzMin]="0"></nz-slider>
+
+    <div class="wrap">
+      <div class="box" [style.border-radius]="radiusValue | nzToCssUnit">Default</div>
+      <div class="box" [style.border-radius]="radiusValue | nzToCssUnit: '%'">%</div>
+      <div class="box" [style.border-radius]="radiusValue | nzToCssUnit: 'rem'">rem</div>
+    </div>
+  `,
+  styles: [
+    `
+      .wrap {
+        display: flex;
+      }
+      .box {
+        margin-top: 20px;
+        margin-right: 20px;
+        text-align: center;
+        line-height: 50px;
+        color: #fff;
+        width: 50px;
+        height: 50px;
+        background: #4183c4;
+      }
+    `
+  ]
+})
+export class NzDemoPipesCssUnitComponent {
+  radiusValue = 0;
+}

components/pipes/demo/ellipsis.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: nzEllipsis
+  en-US: nzEllipsis
+---
+
+## zh-CN
+
+截断字符串，用指定的字符串结尾
+
+## en-US
+
+Truncate the string, ending with the specified string

components/pipes/demo/ellipsis.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-ellipsis',
+  template: `
+    <input type="text" nz-input [(ngModel)]="str" />
+    <br />
+    <p>{{ str | nzEllipsis: 36:'...' }}</p>
+  `,
+  styles: [
+    `
+      p {
+        padding: 8px 12px;
+      }
+    `
+  ]
+})
+export class NzDemoPipesEllipsisComponent {
+  str = 'Ant Design, a design language for background applications';
+}

components/pipes/demo/module

@@ -0,0 +1,8 @@
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
+import { NzStatisticModule } from 'ng-zorro-antd/statistic';
+import { NzTableModule } from 'ng-zorro-antd/table';
+
+export const moduleList = [ NzPipesModule, NzTableModule, NzSliderModule, NzInputModule, NzStatisticModule, NzGridModule ];

components/pipes/demo/safe-null.md

@@ -0,0 +1,15 @@
+---
+order: 5
+title:
+  zh-CN: nzSafeNull
+  en-US: nzSafeNull
+---
+
+## zh-CN
+
+转换 Null 和 Undefined 为指定字符串
+
+## en-US
+
+Convert Null and Undefined to the specified string
+

components/pipes/demo/safe-null.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-safe-null',
+  template: `
+    <nz-table #basicTable [nzData]="listOfData">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Age</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let data of basicTable.data">
+          <td>{{ data.name }}</td>
+          <td>{{ data.age }}</td>
+          <td>{{ data.address | nzSafeNull: '-' }}</td>
+        </tr>
+      </tbody>
+    </nz-table>
+  `
+})
+export class NzDemoPipesSafeNullComponent {
+  listOfData = [
+    {
+      name: 'John Brown',
+      age: 32
+    },
+    {
+      name: 'Jim Green',
+      age: 42
+    },
+    {
+      name: 'Joe Black',
+      age: 32,
+      address: 'Sidney No. 1 Lake Park'
+    }
+  ];
+}

components/pipes/demo/sanitizer.md

@@ -0,0 +1,29 @@
+---
+order: 6
+title:
+  zh-CN: nzSanitizer
+  en-US: nzSanitizer
+---
+
+## zh-CN
+
+DomSanitizer 的 Pipe 实现
+
+```html
+<div [innerHTML]="html | nzSanitizer: 'html'"></div>
+<div [style]="style | nzSanitizer: 'style'"></div>
+<img [src]="url | nzSanitizer: 'url'" />
+<iframe [src]="resourceUrl | nzSanitizer: 'resourceUrl'"></iframe>
+```
+
+## en-US
+
+Pipe implementation of DomSanitizer
+
+
+```html
+<div [innerHTML]="html | nzSanitizer: 'html'"></div>
+<div [style]="style | nzSanitizer: 'style'"></div>
+<img [src]="url | nzSanitizer: 'url'" />
+<iframe [src]="resourceUrl | nzSanitizer: 'resourceUrl'"></iframe>
+```

components/pipes/demo/sanitizer.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-pipes-sanitizer',
+  template: `
+    <div [innerHTML]="html | nzSanitizer: 'html'"></div>
+  `
+})
+export class NzDemoPipesSanitizerComponent {
+  html = `<span>I am <code>innerHTML</code></span>`;
+}

components/pipes/demo/trim.md

@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh-CN:  nzTrim
+  en-US: nzTrim
+---
+
+## zh-CN
+
+去除字符串左右空字符串
+
+## en-US
+
+Strip left and right empty string