test(module:typography): add test

components/components.less

@@ -49,7 +49,7 @@
 @import "./timeline/style/entry.less";
 @import "./tooltip/style/entry.less";
 @import "./transfer/style/entry.less";
-@import "typography/style/index.less";
+@import "typography/style/entry.less";
 @import "./upload/style/entry.less";
 @import "./auto-complete/style/entry.less";
 @import "./cascader/style/entry.less";

components/core/public-api.ts

@@ -21,3 +21,4 @@ export * from './util/public-api';
 export * from './wave/public-api';
 export * from './dropdown/public-api';
 export * from './logger/public-api';
+export * from './trans-button/public-api';

components/core/trans-button/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './public-api';

components/core/trans-button/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export { NzTransButtonDirective } from './nz-trans-button.directive';

components/core/util/public-api.ts

@@ -18,3 +18,5 @@ export * from './scroll-into-view-if-needed';
 export * from './textarea-caret-position';
 export * from './throttleByAnimationFrame';
 export * from './time';
+export * from './style-checke';
+export * from './text-measure';

components/core/util/text-measure.ts

@@ -1,4 +1,12 @@
-interface MeasureResult {
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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
+ */
+
+export interface MeasureResult {
   finished: boolean;
   node: Node | null;
 }
@@ -11,9 +19,9 @@ const COMMENT_NODE = 8;
 let ellipsisContainer: HTMLParagraphElement;
 
 const wrapperStyle = {
-  padding   : '0',
-  margin    : '0',
-  display   : 'inline',
+  padding: '0',
+  margin: '0',
+  display: 'inline',
   lineHeight: 'inherit'
 };
 
@@ -24,7 +32,7 @@ function pxToNumber(value: string | null): number {
 
   const match = value.match(/^\d*(\.\d*)?/);
 
-  return match ? Number(match[ 0 ]) : 0;
+  return match ? Number(match[0]) : 0;
 }
 
 function styleToString(style: CSSStyleDeclaration): string {
@@ -38,7 +46,7 @@ function mergeChildren(children: Node[]): Node[] {
   const childList: Node[] = [];
 
   children.forEach((child: Node) => {
-    const prevChild = childList[ childList.length - 1 ];
+    const prevChild = childList[childList.length - 1];
     if (prevChild && child.nodeType === TEXT_NODE && prevChild.nodeType === TEXT_NODE) {
       (prevChild as Text).data += (child as Text).data;
     } else {
@@ -54,7 +62,8 @@ export function measure(
   rows: number,
   contentNodes: Node[],
   fixedContent: HTMLElement,
-  ellipsisStr: string): { contentNodes: Node[]; text: string; ellipsis: boolean } {
+  ellipsisStr: string
+): { contentNodes: Node[]; text: string; ellipsis: boolean } {
   if (!ellipsisContainer) {
     ellipsisContainer = document.createElement('div');
     ellipsisContainer.setAttribute('aria-hidden', 'true');
@@ -66,9 +75,7 @@ export function measure(
   const originCSS = styleToString(originStyle);
   const lineHeight = pxToNumber(originStyle.lineHeight);
   const maxHeight =
-          lineHeight * (rows + 1) +
-          pxToNumber(originStyle.paddingTop) +
-          pxToNumber(originStyle.paddingBottom);
+    lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom);
   // Set shadow
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
@@ -103,9 +110,7 @@ export function measure(
   container.appendChild(fixedContainer);
 
   // Render in the fake container
-  ellipsisContainer.appendChild(
-    container
-  );
+  ellipsisContainer.appendChild(container);
 
   // Check if ellipsis in measure div is height enough for content
   function inRange(): boolean {
@@ -119,10 +124,10 @@ export function measure(
 
   // We should clone the childNode since they're controlled by React and we can't reuse it without warning
   const childNodes: ChildNode[] = Array.prototype.slice
-  .apply(ellipsisContainer.childNodes[ 0 ].childNodes[ 0 ].cloneNode(true).childNodes)
-  .filter(({ nodeType }: ChildNode) => nodeType !== COMMENT_NODE);
+    .apply(ellipsisContainer.childNodes[0].childNodes[0].cloneNode(true).childNodes)
+    .filter(({ nodeType }: ChildNode) => nodeType !== COMMENT_NODE);
   const fixedNodes: ChildNode[] = Array.prototype.slice.apply(
-    ellipsisContainer.childNodes[ 0 ].childNodes[ 1 ].cloneNode(true).childNodes
+    ellipsisContainer.childNodes[0].childNodes[1].cloneNode(true).childNodes
   );
   ellipsisContainer.removeChild(container);
 
@@ -148,8 +153,8 @@ export function measure(
   function measureText(
     textNode: Text,
     fullText: string,
-    startLoc: number       = 0,
-    endLoc: number         = fullText.length,
+    startLoc: number = 0,
+    endLoc: number = fullText.length,
     lastSuccessLoc: number = 0
   ): MeasureResult {
     const midLoc = Math.floor((startLoc + endLoc) / 2);
@@ -165,13 +170,13 @@ export function measure(
         if (inRange()) {
           return step === fullText.length
             ? {
-              finished: false,
-              node    : document.createTextNode(fullText)
-            }
+                finished: false,
+                node: document.createTextNode(fullText)
+              }
             : {
-              finished: true,
-              node    : document.createTextNode(currentStepText)
-            };
+                finished: true,
+                node: document.createTextNode(currentStepText)
+              };
         }
       }
     }
@@ -191,15 +196,15 @@ export function measure(
       if (inRange()) {
         return {
           finished: false,
-          node    : contentList[ index ]
+          node: contentList[index]
         };
       }
 
       // Clean up if can not pull in
       ellipsisContentHolder.removeChild(childNode);
       return {
         finished: true,
-        node    : null
+        node: null
       };
     } else if (type === TEXT_NODE) {
       const fullText = childNode.textContent || '';
@@ -212,7 +217,7 @@ export function measure(
     // PS: This code should not be attached after react 16
     return {
       finished: false,
-      node    : null
+      node: null
     };
   }
 
@@ -226,8 +231,8 @@ export function measure(
   });
   const result = {
     contentNodes: ellipsisNodes,
-    text        : ellipsisContainer.innerHTML,
-    ellipsis    : true
+    text: ellipsisContainer.innerHTML,
+    ellipsis: true
   };
   while (ellipsisContainer.firstChild) {
     ellipsisContainer.removeChild(ellipsisContainer.firstChild);

components/ng-zorro-antd.module.ts

@@ -58,7 +58,7 @@ import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzTransferModule } from 'ng-zorro-antd/transfer';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
-import { NzTypographyModule } from 'ng-zorro-antd/nz-typography';
+import { NzTypographyModule } from 'ng-zorro-antd/typography';
 import { NzUploadModule } from 'ng-zorro-antd/upload';
 
 export * from 'ng-zorro-antd/affix';

components/typography/doc/index.en-US.md

@@ -5,15 +5,12 @@ title: Typography
 cols: 1
 ---
 
-Basic format and regular operation on text.
+Basic text writing, including headings, body text, lists, and more.
 
 ## When To Use
 
-When need to display title or text content. Like:
-* Copy
-* Ellipsis / expand
-* Edit
-* Markdown Typography
+- When need to display title or paragraph contents in Articles/Blogs/Notes.
+- When you need copyable/editable/ellipsis texts.
 
 ## API
 

components/typography/doc/index.zh-CN.md

@@ -1,19 +1,16 @@
 ---
 category: Components
 subtitle: 排版
-type: General
+type: 通用
 title: Typography
 cols: 1
 ---
-文本的基本格式及常见操作。
+文本的基本格式。
 
 ## 何时使用
 
-当需要展示标题、文本内容时使用。例如：
-* 拷贝
-* 省略/展开
-* 可编辑
-* Markdown 排版样式
+- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
+- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。
 
 ## API
 

components/typography/nz-text-copy.component.ts

@@ -1,28 +1,44 @@
+/**
+ * @license
+ * Copyright Alibaba.com All Rights Reserved.
+ *
+ * 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 {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
-  Input, OnDestroy,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
   ViewEncapsulation
 } from '@angular/core';
-import { NzCopyToClipboardService } from '../core/services/nz-copy-to-clipboard.service';
+
+import { NzCopyToClipboardService } from 'ng-zorro-antd/core';
 
 @Component({
-  selector           : 'nz-text-copy',
-  templateUrl        : './nz-text-copy.component.html',
-  changeDetection    : ChangeDetectionStrategy.OnPush,
-  encapsulation      : ViewEncapsulation.None,
+  selector: 'nz-text-copy',
+  templateUrl: './nz-text-copy.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false
 })
 export class NzTextCopyComponent implements OnDestroy {
-
   copied = false;
   copyId: number;
   @Input() getText: () => string;
 
-  constructor(public host: ElementRef, private cdr: ChangeDetectorRef, private copyToClipboard: NzCopyToClipboardService) {
-  }
+  @Output() readonly textCopy = new EventEmitter<string>();
+
+  constructor(
+    public host: ElementRef,
+    private cdr: ChangeDetectorRef,
+    private copyToClipboard: NzCopyToClipboardService
+  ) {}
 
   ngOnDestroy(): void {
     clearTimeout(this.copyId);
@@ -34,9 +50,12 @@ export class NzTextCopyComponent implements OnDestroy {
     }
     this.copied = true;
     this.cdr.detectChanges();
-    this.copyToClipboard.copy(this.getText())
-    .then(() => this.onCopied())
-    .catch(() => this.onCopied());
+    const text = this.getText();
+    this.textCopy.emit(text);
+    this.copyToClipboard
+      .copy(text)
+      .then(() => this.onCopied())
+      .catch(() => this.onCopied());
   }
 
   onCopied(): void {
@@ -46,5 +65,4 @@ export class NzTextCopyComponent implements OnDestroy {
       this.cdr.detectChanges();
     }, 3000);
   }
-
 }